Linux Nginx部署前后端分离的Java Web项目(Vue+Springboot)

系统(CentOS 8)环境准备工作：

- Java JDK的安装和配置(Java 8)
- Nginx的安装与配置
- MySQL的安装与配置、项目数据库的建立

测试找的一个项目demo地址：https://gitee.com/xqnode/springboot-vue-demo

一、项目分析

部署到Linux服务器之前需要明确该项目的运作模式。这里选取的前后端分离项目基于Vue+Springboot开发，前端与后端所有交互请求的url都是以/api开头，以区分其他请求的url。前端端口为9876，后端端口为9090，在前端项目打包之前，项目通过前端的vue.config.js文件进行url重写暂时解决了跨域(主要是跨端口)问题，如下：

// 跨域配置
module.exports = {
    devServer: {                //记住，别写错了devServer
        port: 9876,				//设置本地默认端口
        proxy: {                //设置代理，必须填
            '/api': {           //设置拦截器  拦截器格式=>斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:9090',    //代理的目标地址
                changeOrigin: true,                 //是否设置同源，输入是的
                pathRewrite: {                      //路径重写
                    '/api': ''                      //选择忽略拦截器里面的单词
                }
            }
        }
    }
}

开发环境下(前端DevServer)没有问题。当通过npm run build执行前端打包脚本形成一个前端项目(dist目录)，这个配置失去其作用，需要通过Nginx的配置重写url来解决跨端口问题。

二、项目准备

将前端项目打包形成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 {…}节点以及当中的location / {…}节点如下：

server {
    listen       9876; # 监听前端的端口
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        # root 指定前端资源的根目录
        root                html/vue;
        index               index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
    	root   html;
    }

    #...省略一些被注释掉的配置

    location /nginx_status {
        stub_status on;
        access_log off;
    }
}

重启nginx或者通过nginx -s reload命令使修改后的配置生效。

2、前后端跨端口通信问题的解决。
没有了上面关于跨域的配置，前端所有与后端通信发出的请求都是以http://localhost:9876/开头，因此出现跨域问题。

后端基于Springboot(内嵌tomcat)因此无需另起tomcat容器，可以直接通过java -jar xxxx.jar(项目本身形成的那个jar包)运行起来。所有的前后端通信请求的url都是http://localhost:9876/api/xxxxxx，因此可以在Nginx中配置处理/api为前缀的路径，类似于于拦截器。

可以先在http节点中(server节点外)添加上游服务器upstream节点，这个节点一般用于反向代理，这里在upstream节点中只添加一个server表示只代理一个服务器(tomcat-1及其9090端口)，之后如果想反向代理多个服务器部署的同一个后端，可以往同一个upstream节点中添加多个不同的server地址(如下面tomcatserver节点的tomcat-2。weight是轮询的权重)，当然通过添加不同的upstream节点还可以实现代理不同的后端(个人见解)。

# reverse proxy
upstream tomcatserver {
    server localhost:9090 weight=10; # tomcat-1
    # server localhost:9091 weight=10; # tomcat-2
}

在nginx.conf的server节点中添加location节点如下：

# 所有与后端交互的url都携带api作为标志，因此可以监听api
location /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/得到主界面

登录后得到相应的界面如下。