完成前后端分离项目部署

之前对于nginx一直懵懵懂懂,于是自己动手通过nginx部署一个前后端分离项目,便于自己理解nginx.

1.第一步先创建前端项目
我是直接从github上下载的,直接搜xmall即可.
下载好之后进入项目根目录先后执行命令 npm install 、npm run build,

前端配置:在conf/index.js中

‘/member/*’: {
target: ‘http://127.0.0.1:8081’ ,// 请求本地 需要xmall后台项目 默认127.0.0.1:8081
},
代表url中/member/下的请求,都会转发到http://127.0.0.1:8081(后端服务器地址)上,
配置完成后执行npm run dev命令启动前端服务器.同时启动后端服务,可以自行写demo测试是否成功.

//上述是通过前端直接配置解决跨域问题,而对于生产环境来说,则需要通过nginx来代理解决跨域了.

1.在本地安装nginx(网上都可下载),先来看配置.我主要修改的是server模块

localhost/member/下的所有请求都会代理到 http://localhost:8081/ 服务中.
例如:
localhost/member/aaa,此时会通过nginx 代理到http://localhost:8081/aaa,从后端会进行匹配到相应的aaa执行对应的方法.

说些对于nginx的理解:
之前我一直存在一个误区,把nginx理解成网关(当然也可以实现,但不建议),前端所有请求到nginx,然后nginx匹配后端服务,因此我的proxyTable端口一直尝试指向nginx端口,一直不成功,其实这是错误的理解.
咨询大佬后,他跟我说了一句话让我从误区走了出来

举个例子:我的前端和后端就像牛郎和织女,中间隔着银河(跨域问题)无法相遇,而nginx通过url知道了牛郎和织女要走哪条路,于是在中间搭建一座桥,让他们相遇.