vue3+Nest+prisma+nginx 手动部署到服务器

1.准备工作

购买服务器并初始化成centOS，使用shell工具连接远程服务
购买域名将域名解析到服务器公网IP
- 使用域名前确保域名生效并且备案，否者使用浏览器访问会被拦截

2.下载必要资源

安装Docker 并部署mysql
安装node.js 用于运行nest和安装依赖
安装nginx 用于部署vue和反向代理服务器

确保以上准备完成再进行下面部分

3. 部署vue

打包

# yarn run build:prod

生成的dist 压缩成dist.zip上传到服务器
- scp: 复制本地文件到对应远端 # scp [file] [远端]:[远端路径]

# scp ./dist.zip root@i.kokomi.online:/root/myFiles/nginx/web/

解压dist

[root@ikokoomi ~]# cd /root/myFiles/nginx/web  // 切换到这个目录
[root@ikokoomi web]# unzip dist.zip // 解压到当前目录
[root@ikokoomi web]# rm dist.zip -y // 删除压缩包

配置nginx
- 配置无误，浏览器就能访问了

[root@ikokoomi ~]# cd /etc/nginx/conf.d
[root@ikokoomi conf.d]# vim iconf.conf // 创建一个配置文件
[iconf.conf file] ↓
server {
 listen       80; # 监听80端口
 server_name  47.119.17.59; # 匹配的host

 location / { # 匹配的路由
     root        /root/myFiles/nginx/web; # vue项目存放的位置
     index       index.html index.htm; # 默认访问的文件
   }
}

# 保存退出

[root@ikokoomi conf.d]# nginx

# nginx -s reload 重新加载nginx
# nginx -s stop 停止nginx

4. 部署Nest

打包
生成dist 压缩成dist.zip 上传到服务（上传到不同目录，防止混淆，例：/root/myFiles/server）
解压dist
把dist理解成src 将package.json .env等工程文件复制到跟dist同级的目录
安装依赖
- 特别提示：使用prisma，由于 prisma/client 是根据 schema.prisma 生成，本地数据库与服务器一致或本地连接的就是服务器数据库，可以直接复制 prisma 到根目录重新构建
- npx prisma generate

npm i

配置反向代理 ( 服务端使用cors可忽略 )
- 前端直接请求nginx 80端口nginx匹配到对应路由(/api | /v1)，将转发到配置的服务，服务响应给nginx，nginx再响应回前端，跨域部分由nginx完成，nginx不是浏览器不会受到跨域策略影响

[iconf.conf file] ↓
server {
 listen       80; # 监听80端口
 server_name  47.119.17.59; 
 # 匹配的host,如果使用域名请求就算host对应不上，由于最终请求的目标依旧是当前主机，nginx会默认匹配第一个server

 location / { # 匹配的路由
     root        /root/myFiles/nginx/web; # vue项目存放的位置
     index       index.html index.htm; # 默认访问的文件
   }
}

 location ^~ /api/ {   # 匹配 /api开头的请求
     rewrite ^/api/(.*) /$1 break;  # 将/api/...... 替换成 /......
     proxy_pass   http://127.0.0.1:3000; # 代理到的目标
     # 示例：http://47.119.17.59/api/user/list => http://127.0.0.1:3000/user/list
}

# 备注： 
#      可以多域名对应同ip，例如 i.kokomi.online s.kokomi.onlie 都可以指向当前主机
#      页面使用 i.kokomi.online 访问
#      请求使用 s.kokomi.online 访问
#      再开一个server： 
#         server {
#            listen       80;
#            server_name  s.kokomi.online;
#         location / {  直接代理所有请求 后端接口不变的情况下，前端base_URL删除/api就行
#             proxy_pass   http://127.0.0.1:3000; # 代理到的目标
#                }
#         }
#
#

安装pm2, 在项目dist目录下启动main.js

[root@ikokoomi ~]# npm i pm2 -g
[root@ikokoomi dist]# pm2 start main.js
[root@ikokoomi dist]# pm2 log  // 查看运行日志

2. orange学习日志-前后端分离(vue+node)部署

vue3+Nest+prisma+nginx 手动部署到服务器

1.准备工作

2.下载必要资源

3. 部署vue

4. 部署Nest