背景

之前一直没有搞过前后端分离项目的部署，都是springboot单体项目，现在刚好遇到了，记录下吧。

部署

1、前端

VUE打包为index.html+Nginx，80端口，服务器100.201.241.23

VITE_APP_BASE_URL_PREFIX=/api
# 代理 100.201.241.93 localhost
VITE_PROXY = [["/api","http://100.201.241.93:9991/api"]]

上面的意思是VUE前端请求的后台接口都会加上/api

2、后端

springboot根路径为/api，直接启动9991端口，服务器100.201.241.93

server:
  port: 9991
  servlet:
    context-path: /api
    ...

3、Nginx配置如下

    upstream mdpServer {
       server 100.201.241.93:9991;
   }
  server {
     listen 8010;
location / {
                     root /home/nginx/web;
                     try_files $uri $uri/ /index.html;
                     index index.html index.htm;
                  }
location ~* /api/(.*)
{
                      set $path $1;
                      proxy_pass              http://mdpServer;
                      proxy_set_header        Host $host:$server_port;
                      proxy_set_header        X-Real-IP $remote_addr;
                      proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
                  }
  }

4、关键注意点

try_files $uri $uri/ /index.html;

如果没有这个，vue项目有路由会直接报错，比如

http://100.201.241.23 没有问题
http://100.201.241.23/login 就会报错

加上这个配置就好了