springboot+vue项目部署到服务器详细（前后端单独部署）

最近在写springboot+vue的项目，用了前后端分离，写完了之后就该部署了，我认为其中主要是来解决跨域的问题。那么来看看怎么配置的。

以下为window环境，下文会说明和linux不同的地方，但主要是学习配置，环境不影响。

一、前端部署

1、下载 nginx，官方网址如下：http://nginx.org/en/download.html

2、解压安装包到任意目录

3、打开前端项目，执行npm run build

4、进入前端项目的dist目录，把里面的文件都复制到nginx\html 下（注意：需要覆盖掉nginx\html 下的index.html）

5、配置完整项目的默认端口，打开 nginx\conf\nginx.conf，找到 server 的配置处，然后按照下面来更改：

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #root存放前端项目的目录地址，这里采用默认配置，即nginx/html目录
        #index配置首页文件
        location / {
            root   html;
            index  index.html index.htm;
        }

        #这里解决跨域问题，后端地址及端口号
		location /api/ {
			proxy_pass http://127.0.0.1:8080$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;
		}

}

主要是改三个地方，listen配置项目的端口号， location / 配置前端项目的目录， location /api/ 配置后端地址解决跨域问题。

6、配置完成后，启动命令行进入 nginx 目录下输入命令启动nginx：start nginx，访问 http://localhost:80/ 。到此，前端部署完成，接下来到后端。

这里给出一个参考，是使用自定义前端文件路径时的配置，注，下图和本文章配置不同，仅做为参考，全篇文章以代码为准！

二、后端部署

这里先说下war方式部署。

1.进入后端项目，使用maven package打包后端项目，得到.war文件，不会打包war的待会看下文jar方式部署

2.把war文件放到tomcat/webapps/目录下，重命名为api.war，启动tomcat。

3.测试一下http://localhost:8080/api/XXX 和 http://localhost:80/api/XXX,没报错。到这里，后端也部署成功了。

这里说一下，前后端分离项目由于是分开写的，前端项目发送的所有请求都是后端请求路径加上/api拼接的，比如后端有一个接口：localhost:8080/login，这是正常的访问，地址localhost + 后端端口8080 + 接口名称/login，那么由于前端端口与后端接口不同，需配置跨域，跨域后，前端可以访问后端端口，这时整个项目访问的 login 接口就变成了 localhost:8085/api/login ，地址localhost + 前端端口8085 + /api + 接口名称/login，这时前端就可以访问到后端接口，具体跨域配置，这里不在详述。

所以，当访问http://localhost:8080/api/XXX 成功时表示后端项目正常运行，而访问http://localhost:80/api/XXX成功时则表示，通过80端口也能访问到后端接口，nginx跨域配置成功，这时，整个项目才算部署好！

tomcat部署项目时需要重命名war文件为api.war，是因为这时访问后端接口则必须加上项目名称‘api’，所以原本的后端login接口的访问，就由http://localhost:8080/login 变成了http://localhost:8080/api/login，这时就可以被nginx配置的location /api/ 所拦截到，进而nginx跨域配置生效！

 

接下来说说jar方式部署后端。

1.前面所说nginx配置不变，修改后端yml配置文件，添加如下：

server:
  tomcat:
    uri-encoding: UTF-8
  port: 8080
  servlet:
    context-path: /api
    session:
      timeout: 0

2.后端打包生成jar文件，打开命令行进入到jar文件所在目录下，执行 java -jar xxx.jar

3.测试一下http://localhost:8080/api/XXX 和 http://localhost:80/api/XXX,没报错。到这里，后端也部署成功了。

两种方式，合适的才是最好的！

 

 

后记：

后来学习到nginx重写url又找到一种方法，在nginx代理时重写/api开头的url，直接处理好数据，更加方便了，这样后端无论时war方式还是jar方式都很方便了！

下面说说方法。

前端部署不变。

修改nginx.conf如下：

server {
    listen 81;
    server_name localhost;

    location / {
        root /data/xxxx/html;
        index index.html;
    }
    #拦截/api/请求，因为所有的请求在前端被处理成 '/api+后端接口'形式
    location /api/ {
        #开启重写日志记录，这个会记录在error.log里面，级别为notice
        rewrite_log on;
        #重写规则，可根据实际情况调整。
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:8089;
        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;
    }
}

主要是对请求进行重写，使用了rewrite，用法为 rewrite reg replacement flag。（reg:正则表达式，replacement:要替换的文本，flag:替换之后的操作），具体使用不在详述，这里使用只需变动第一个参数，即正则表达式，根据实际情况修改正则表达式即可，/api/即前端所加请求的前缀。

这样一来，后端war部署时就不必在修改war包为api.war了，jar包部署时，也不必在额外添加server:servlet:context-path: /api了。搞定！