构建部署

前端

本地构建

pnpm build

本地预览

pnpm preview

注意

使用 pnpm preview 预览时 vite.config.js 中的代理配置也生效，如果使用 http-server 启动或者使用 nginx 部署则代理不生效，需另行配置反向代理

部署

部署文件: pnpm build 构建后生成的 dist 文件夹下的所有文件

一、部署到 gitee pages / github pages （不推荐）

• 优点: 免费
• 缺点:
  1. github pages 国内访问慢，gitee page 自定义域名要收费，且需要实名认证
  2. 无法设置代理，接口开放跨域才可使用
  3. 无法使用 history 模式路由，可以接受hash路由可忽略

二、部署到 vercel (只推荐个人项目使用)

• 优点: 免费、非常简单
• 缺点:
  1. 国内访问较慢，相对 github pages 稍快
  2. 容易被墙（可通过绑定自定义域名解决）

问: 如何解决使用 history 模式路由 404 问题？

在项目根路径新建文件 vercel.json, 内容如下

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

三、部署到云服务器（推荐）

新手: 建议安装面板进行一键部署，推荐 1panel, 宝塔 也行 老手: 老手应该不用教吧, hahaha...

问: 如何解决 history 模式路由 404 问题？

在 nignx 配置文件中增加以下配置

location / {
  try_files $uri $uri/ /index.html;
}

问: 如何配置代理

以下为参考配置，具体需根据实际接口服务进行调整

location ^~ /api/ {
    proxy_pass http://localhost:8085/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Forwarded-Proto $scheme;
}

四、部署到 阿里云 oss(中等推荐)

优点: 速度快 缺点: 流量大可能收费

后端

本地构建

pnpm build

注意

构建后会生成两个文件夹 dist 和 ncc-dist, 我们只需要 ncc-dist，因为 dist 下的文件会依赖于 node_modules 部署起来会比较麻烦，而 ncc-dist 下的文件则将所需要的依赖文件都打包到一起了，只需要执行 里里面的 index.js 就可以运行了

本地预览

node ncc-dist/index.js

看到 🚀 启动成功: http://localhost:8085 就成功了

部署

后端的部署选择很少，只推荐部署到云服务器或者自建的服务器中

一、服务器环境准备:

1. mysql(推荐5.7)
2. redis
3. node (推荐安装nvm)
4. pm2，使用 npm i -g pm2 进行安装

二、将构建产物上传到云服务器，然后在 index.js 同级目录下创建 .env 文件

DB_HOST=localhost
DB_PORT=3306
DB_USER=admin
DB_PWD=123456
DB_DATABASE=isme
DB_SYNC=true
JWT_SECRET="xxxxxx"
IS_PREVIEW=false

注: 需将以上配置修改为服务器环境的配置

三、使用 pm2 启动服务

pm2 start -n nest-jwt ./index.js --watch

注: 执行 pm2 ls 可查看运行的服务