记一次前后端分离开发部署经历

原材料

React前端
Node.js后端，使用express框架
pm2
nginx代理服务器

部署过程

1.在本地开发好之后，把react代码和express代码打包上传至git。在服务器上clone git并且进行npm install。在react项目中执行npm build生成静态文件。
2.在后端app.js所在的文件夹下使用pm2启动后端服务。
3.接下来就可以设置nginx.conf文件了。这部分的配置请大家看网上其他文章中有提到的，设置location /{}规则，将root设置为刚刚npm run build产生的buid文件夹。因为是单页面应用（SPA），所以所有路径都指向index.html文件。这时可以通过我们设置的域名访问到index文件。
4.接下来用nginx代理设置前端与后端的通信。在nginx.conf文件中设置一条locaition /api { proxy_pass: http://localhost:5000/ }，请注意对于express设置了app.get("/xxx")等规则的后端应用来说，这里的proxy_pass: http://localhost:5000/路径中在最后一定要加一个/表示相对路径。（我在这里一直出错好久）
5.所以在我前端应用中的所有请求都是指向相对路径"/api/xxx"，在nodejs后端中设置的是app.get("/api/login")等。
最后可以成功通过域名访问服务器上的前端应用并实现前后端通信。

题外话

1.后端应用的输出可以通过pm2 log app.js查看到；
2.nginx的错误日志和访问日志可以在nginx.conf中配置，然后查看；
3.可以使用postman测试通过"域名"/api/xxx来查看前后端通信是否设置成功。