记一次 Nginx 部署 Springboot + Vue 项目

Springboot 项目

Springboot 项目在服务器上运行在Tomcat容器中http://localhost:8555, ContextPath为/

在服务器的shell中通过 curl http://localhost:8555/ 可正常访问

Vue 项目

在宝塔中创建新的网站，域名设置为xxx.bavelee.cn ，然后把 Vue 项目 build 后的 dist 中的文件放到 /www/wwwroot/xxx.bavelee.cn

部署命令

1
2
3
4

# 上传文件到服务器
scp 本地Vue项目/dist/* 服务器用户名@服务器IP:/www/wwwroot/xxx.bavelee.cn/
# 设置权限，使ngnix可以访问
ssh 服务器用户名@服务器IP chown -R www.www /www/wwwroot/xxx.bavelee.cn/

然后访问http://xxx.bavelee.cn 可正常打开页面，但是所有的接口都请求失败，我在 axios中配置的baseUrl为/api，所有的请求格式都类似于/api/getData 同等与 => http://xxx.bavelee.cn/api/getData，但是我的后端接口是运行在http://localhost:8555的，所以我这里要设置反向代理，通过 Nginx 反向代理 将访问/api和/upload的URL代理到http://localhost:8555上

添加反向代理

image-20210730151826029.png

添加之后修改他的配置文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

#PROXY-START/api
location /api
{
    proxy_pass http://localhost:8555;
    proxy_set_header Host localhost;
}
#PROXY-END/api
#PROXY-START/upload
location /upload
{
    proxy_pass http://localhost:8555/upload;
    proxy_set_header Host localhost;
}
#PROXY-END/upload

前端项目为单项目多页面：分为如下三个页面blog、login、admin，需要设置 3 个location

nginx配置文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

location / {
	try_files $uri $uri/ /index.html;
}
location ^~/admin
{
	try_files $uri $uri/ /admin.html;
}
location ^~/login
{
	try_files $uri $uri/ /login.html;
}

到此配置完成