nginx部署前后端分离项目(spring boot + vue)

部署后端

spring boot 项目部署到服务器上,我们只需打个jar包放到服务器上运行即可。
使用maven打包的方法:
![在这里插入图片描述]( https://img-blog.csdnimg.cn/8428d69df30643288ecd45d947238d3c.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6YCX5Y-3ODA4MA==,size_20,color_FFFFFF,t_70,g_se,x_16)
得到一个jar包,上传到服务器上
在这里插入图片描述
执行jar的命令:

java -jar xxxxx.jar

后台执行

nohup java -jar xxxxx.jar &

部署前端:

![在这里插入图片描述]( https://img-blog.csdnimg.cn/4a4e9a66af2b40f3a53d1c1f51547e98.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6YCX5Y-3ODA4MA,size_20,color_FFFFFF,t_70,g_se,x_16)
在baseUrl 中填写后台的地址。
![在这里插入图片描述]( https://img-blog.csdnimg.cn/9a1e0d894d53462485d38b2f7c804f26.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6YCX5Y-3ODA4MA
,size_18,color_FFFFFF,t_70,g_se,x_16)
dev中的 target也填上后台的地址。

然后进入的vue项目的根目录,进入cmd执行

npm run build

得到一个dist文件

![在这里插入图片描述]( https://img-blog.csdnimg.cn/9b92e29e32464f13b79ef69e6397d50a.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6YCX5Y-3ODA4MA==,size_20,color_FFFFFF,t_70,g_se,x_16)
将这个文件也上传到服务器上

配置nginx

首先是下载 nginx
可以参考这篇我文章https://blog.csdn.net/qq_51088445/article/details/121584765

修改配置文件:

![在这里插入图片描述]( https://img-blog.csdnimg.cn/89c63d35a45f4100bdb9dc7831752c32.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6YCX5Y-3ODA4MA==,size_19,color_FFFFFF,t_70,g_se,x_16)

/teach与前端对应,proxy_pass 后填写后端地址
可以添加一个upstream进行反向代理

upstream tomcatserver {
server localhost:8089;
}
location /teach {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://tomcatserver;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

执行systemctl reload nginx.server重新加载nginx

posted @ 2021-12-09 22:18  逗号8080  阅读(1301)  评论(0)    收藏  举报