共计 2496 个字符，预计需要花费 7 分钟才能阅读完成。
我的项目前端应用 vue 画页面、后端应用 express 写接口。部署我的项目之前，要做好筹备工作。要把前端的 vue 我的项目
npm run build打包生成一个 dist 文件夹，同时也要把 nginx 装置好。咱们接着往下浏览步骤：
第一步
首先找到 nginx 装置的目录，而后批改 nginx 的服务配置文件，是在 nginx 装置目录里的 conf 文件夹中的 nginx.conf 这个文件，咱们应用 vscode 关上，并加上一个 serve{}配置咱们所须要的反向代理，接下来就是写对应 nginx 配置代码了
第二步
咱们比拟喜爱 5678 这个数字，于是咱们就把本人电脑上的 5678 这个端口凋谢给用户应用。即：咱们应用 nginx 这个工具（哨兵）监听本机的 5678 这个端口，当有用户来拜访这个端口的时候，咱们就给到相应的反馈。
所以对应 nginx 代码：listen 5678
第三步
假如咱们电脑的 ip 是10.9.26.121，因为咱们用本人的电脑当做服务器部署我的项目。
所以对应 nginx 代码：server_name 10.9.26.121
第四步
当用户拜访咱们的 ip 端口时，即：用户拜访：10.9.26.121:5678的时候，因为哨兵工具 nginx 在时时刻刻监听监督这个 ip 端口。所以 nginx 收到 ip 端口的拜访申请时，就会把申请转发到，或者说定位 location 到咱们前端 vue 我的项目打包好的 dist 文件中去。dist 文件夹中的寄存的是咱们写好的前端页面代码，代码解析执行，用户即可看到前端页面。因为程序执行须要找到对应的文件代码地位，所以 root 就是对应前端打包代码 dist 寄存的地位。至于 dist 入口，必定是 index.html 不需赘述。对应 nginx 代码如下：
location / {
root D:/nginx-1.18.0/html/personManage/dist;
index index.html;
}比方上述的 root 是，我把 vue 打包的 dist 文件放在电脑 D 磁盘中的这个目录地位D:/nginx-1.18.0/html/personManage/dist 然而留神，这里有一个坑：如果咱们间接在文件地址栏复制 dist 文件地址地位，复制的后果是不对的。如下图这样的错误操作：
咱们最终复制到的是这样的地址：
D:\nginx-1.18.0\html\personManage，如果咱们间接把这个地址放在 root 前面，运行 nginx 当前，会显示 500 Internal Server Error，因为这里是去文件夹外面找程序代码，所以须要用正斜杠 /，这样的话 nginx 能力辨认，即，解决方案为：
批改成：D:/nginx-1.18.0/html/personManage/dist（毕竟 windows 喜爱用反斜杠 \，然而 Nginx 只应用正斜杠 /）
第五步
又因为，前端 vue 我的项目中 ajax 交互跨域解决方案应用的是 vue.config.js 中的 devServer 中 proxy 代理，所以 nginx 中还须要一个 location 去解决，前端跨域申请转发的问题，所以 proxy 中的跨域转发前缀要和 nginx 中的跨域转发前缀保持一致，页面接口交互能力失常实现。图示如下：
最终 nginx 代码
# personManage 我的项目 history 路由模式
server {
listen 5678; # 给用户应用 5678 端口并监听
server_name 10.9.26.121; # 本机服务器 ip 地址为：10.9.26.121
client_max_body_size 100m; # 上传大文件的配置，nginx 默认 20M 容量，想要上传更大文件，就要额定设置
location / { # 定位具体的文件入口
try_files $uri $uri/ /index.html; # 解决 vue 中 history 路由模式，部署后刷新页面 404 问题，hash 路由模式则不须要
root D:/nginx-1.18.0/html/personManage/dist; # 前端代码 dist 文件所在磁盘目录地位
index index.html; # dist 文件夹中的入口文件 index.html
}
location /api/ { # 解决前端跨域转发申请
# 咱们后端 express 服务启用的端口是 9999，所以这里就转发到这个地址
proxy_pass http://10.9.26.121:9999/;
# 上面三句话是用来获取用户拜访的 ip 的
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
}
}后端 express 启用的是 9999 端口，代码：
app.listen(9999, (req,res) => {console.log(‘ 后端服务端口地址为：localhost://9999’) } )
第六步
因为后端咱们应用的是 node 中的 express 框架，不是 java 中的 springboot 框架什么的，不须要打一个 jav 包，咱们只须要在 express 中应用 pm2 插件去治理咱们的后端我的项目即可。
6.1 全局装置 pm2
npm install -g pm2
6.2 应用 pm2 启动 express 我的项目
之前咱们启动 express 我的项目应用的命令是 node app.js，然而有局限，所以咱们应用 pm2 这个插件去治理后端的 express 我的项目。pm2 性能挺弱小的，包含开机自启动我的项目、进行我的项目、过程治理、负载平衡、日志查看等性能，而node app.js 只能启动我的项目，所以还是要应用 pm2 更加方便管理。全局装置好 pm2 当前，咱们执行 pm2 - v 命令能查看到版本号，就阐明咱们曾经装置胜利了，而后执行 pm2 start app.js 启动我的项目。呈现下图，就阐明咱们服务启动好了，而后用户就能够失常拜访了
总结
上述就是 nginx 部署一个 vue+express 我的项目的流程步骤。如果大家想进一步理解 pm2 插件的应用细节，能够去 pm2 官网看看。附上传送门:
https://pm2.keymetrics.io/
