我的项目前端应用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/