准备在Linux Nginx部署前后分离的Java Web项目(Vue Springboot )系统(CentOS 8)环境：
- Java JDK的安装和配置(Java 8)
-安装和配置- Nginx
-安装和配置- MySQL，生成项目数据库
在测试中找到的demo地址： https://gitee.com/xq node/spring boot-vue-demo
一方面，项目分析在部署到Linux服务器之前需要明确项目的运营模式。 在此选择的前端和后端隔离项目是基于Vue Springboot开发的，所有前端和后端交互请求的url都以/api开头，以区分其他请求的url。 前端端口为9876，后端端口为9090。 在打包前端项目之前，项目在前端vue.config.js文件中重写了url，以临时解决域之间(主要是端口之间)的问题。
请注意不要在//域之间写错module.exports={ devserver : }//dev server port 33609876。 //本地默认端口proxy: { //必须输入'/API ' 3360 ' http://localhost :9090 '，/API'3360 //决定是否设置相同，是，请输入pathRewrite: { //路径重写(/API ) }在npm run build上运行前端软件包脚本(DDD )
二、项目将前端项目打包形成dist目录，归档为. tar文件，传输到Linux虚拟机后恢复，/usr/local/nginx/html目录将后端项目变成jar包(一组包含项目及其依赖关系的jar包)，并以相同的方式将其移动到/usr/src目录中。 这里的目录不一定是这两个，后期的配置可以相应变更。 将两个项目重命名为vue、vuedemo会更容易查找。
三. Nginx配置通过在vim/usr/local/Nginx/conf/nginx.conf中编辑Web服务器nginx的配置文件进行配置。 主要分为以下两种构成。
1、前端资源请求
要访问http://localhost:9876/，您需要打包的index.html，它是项目的主界面。 找到http { . }节点，然后编辑server { . }节点及其位置/{ . }节点。
服务器{ listen 9876； #接收前端端口server_name localhost； #charset koi8-r； # access _ loglogs/host.access.log main； location/{ # root前端资源的根root html/vue； 索引索引. html index.htm； } #error_page 404 /404.html； # redirectservererrorpagestothestaticpage/50x.html # error _ page 500502503504/50x.html； location=/50x.html { root html； } # .已注释掉的配置location/nginx _ status { stub _ status on； 访问_ log off； 重新启动nginx或使用nginx -s reload命令使更改的配置生效。
2、解决前后端端口间通信问题。
如果没有上述跨域配置，则会出现跨域问题，因为来自前端所有咖啡豆和后端咖啡豆的请求以http://localhost:9876/开始。
后端基于Springboot (嵌入式tomcat )，因此不需要单独提供tomcat容器，可以直接在java -jar xxxx.jar上运行。 的前后爽口咖啡豆请求的url均为http://localhost :9876/API/xxxx
xx，因此可以在Nginx中配置处理/api为前缀的路径，类似于于拦截器。可以先在http节点中(server节点外)添加上游服务器upstream节点，这个节点一般用于反向代理，这里在upstream节点中只添加一个server表示只代理一个服务器(tomcat-1及其9090端口)，之后如果想反向代理多个服务器部署的同一个后端，可以往同一个upstream节点中添加多个不同的server地址(如下面tomcatserver节点的tomcat-2。weight是轮询的权重)，当然通过添加不同的upstream节点还可以实现代理不同的后端(个人见解)。
# reverse proxyupstream tomcatserver { server localhost:9090 weight=10; # tomcat-1 # server localhost:9091 weight=10; # tomcat-2}在nginx.conf的server节点中添加location节点如下：
# 所有与后端交互的url都携带api作为标志，因此可以监听apilocation /api {# 重写url，通过正则取url当中的/api/之后的部分与proxy_pass组成新的url rewrite ^/api/(.*)$ /$1 break; # proxy_pass 用于配置访问这个location时所用代理 proxy_pass http://tomcatserver; # proxy name of a group of upstream servers # proxy_pass http://localhost:9090$request_uri; =>有问题 proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-Ip $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}有的人由于前后端分离时url约定的不同选择了下面那一行的proxy_pass配置，首先有问题的是这样写nginx会报localhost不认识的错产生502(查看nginx安装目录下的logs/error.log文件可看到nginx的错误日志，如图)，需要使用resolver。通过代理上游服务器upstream不会有这个麻烦。
然后是$request_uri，这个变量指代的是proxy_pass之后的全部的url，如一个url为http://localhost:9876/api/user/233，proxy_pass用于替代localhost:9876这个部分，request_uri指的是/api/usr/233这一部分。因此没有去除/api的url是找不到后端对应controller的，nginx不会生成错误日志，服务器返回的是404的错误。
配置完成后，生效新的配置。进入后端jar包所在目录，启动后端程序
然后在浏览器中访问http://localhost:9876/得到主界面
登录后得到相应的界面如下。