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

女爷i 2021-09-25 00:56 468阅读 0赞

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

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

## 一、前端部署 ##

1、下载 nginx，官方网址如下：[http://nginx.org/en/download.html][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/` 。到此，前端部署完成，接下来到后端。

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70][]

## 二、后端部署 ##

### 这里先说下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了。搞定！

[http_nginx.org_en_download.html]: http://nginx.org/en/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70]: /images/20210923/e92c86baa1d24170a352506857c25054.png