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

原材料

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来查看前后端通信是否设置成功。

记一次前后端分离开发部署经历相关推荐

web前后端分离开发部署模式
web前后端分离开发部署模式在开始讨论这个话题之前我们先来认识一下传统的开发模式. 一.传统开发模式相信很多做过Web开发童鞋应该都会经历这样一种开发模式,利用后端语言提供的模版引擎编写HTML/ ...
笔记合并_.NET Core开发实战（第23课：静态文件中间件：前后端分离开发合并部署骚操作）学习笔记（上）...
23 | 静态文件中间件:前后端分离开发合并部署骚操作我们先来看一下静态文件中间件有哪些能力 1.支持指定相对路径 2.支持目录的浏览 3.支持设置默认文档 4.支持多目录映射源码链接: http ...
.NET Core开发实战（第23课：静态文件中间件：前后端分离开发合并部署骚操作）--学习笔记（下）...
23 | 静态文件中间件:前后端分离开发合并部署骚操作这里还有一个比较特殊的用法一般情况下,我们前后端分离的架构,前端会编译成一个 index.html 文件和若干个 CSS 文件和 JavaSc ...
.NET Core开发实战（第23课：静态文件中间件：前后端分离开发合并部署骚操作）--学习笔记（上）...
23 | 静态文件中间件:前后端分离开发合并部署骚操作我们先来看一下静态文件中间件有哪些能力 1.支持指定相对路径 2.支持目录的浏览 3.支持设置默认文档 4.支持多目录映射源码链接: http ...
前后端分离开发模式下后端质量的保证 —— 单元测试
概述在今天, 前后端分离已经是首选的一个开发模式.这对于后端团队来说其实是一个好消息,减轻任务并且更专注.在测试方面,就更加依赖于单元测试对于API以及后端业务逻辑的较验.当然单元测试并非在前后端分 ...
【转】Vue.js入门教程（一）从静态页面到前后端分离开发
第一章:基础知识我能看懂吗? 只要你现在能用html+css+js制作一个静态页面,相信我,你100%可以读懂这篇文章. 本文尤其适合那些想要了解前后端分离开发技术,或者刚刚脱离传统MVC开发模式的 ...
ultraedit 运行的是试用模式_单元测试 —— 前后端分离开发模式下后端质量的保证...
概述在今天, 前后端分离已经是首选的一个开发模式.这对于后端团队来说其实是一个好消息,减轻任务并且更专注.在测试方面,就更加依赖于单元测试对于API以及后端业务逻辑的较验.当然单元测试并非在前后端分 ...
Nodejs搭建前后端分离开发模式下的微信网页项目
原文链接:<Nodejs搭建前后端分离开发模式下的微信网页项目>- 陈帅华本文涉及对前后端分离及微信网页项目中的前端如何在本地环境中开发与调试的思考. 主要问题 1.如何配置微信公众平台 ...
Vue2+Node.js前后端分离项目部署到云服务器
本文参考教程: NodeJS项目部署到阿里云ECS服务器全程详解 - 知乎本文详细介绍如何部署NodeJS项目到阿里云ECS上,以及本人在部署过程中所遇到的问题.坑点和解决办法,可以说是全网最全最详细 ...

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

原材料

部署过程

题外话

记一次前后端分离开发部署经历相关推荐

最新文章

热门文章