当前位置: article > 正文

SpringBoot+Vue前后端分离，宝塔面板部署心得_为什么用宝塔部署springboot项目

作者：喵喵爱编程 | 2024-08-05 09:15:44

踩

为什么用宝塔部署springboot项目

部署的项目是码神之路老师的blog项目，这是个优秀的前后端分离，贴合实际工作开发的，我学习下来，有很大的收获，可以都去学习学习。

一、项目修改

因为开发环境与生产环境不相同，所以需要修改一些相关代码。

1.前端项目修改

前端项目，是可以定义不同的环境变量，对应不同的环境的，在打包时，NODE_ENV: ‘“development”’,代表开发环境，NODE_ENV: ‘“production”’,代表生产环境。进行对应的npm run build就可以了，可惜我是学后端的，前端还不是太了解，我就直接在index.js中修改了。

在这里插入图片描述

再在所有的传输给后端的接口上之前都加上/api，我这个项目时在api文件中的js文件中修改，可能你们自己的项目，也有些axios之类的传输，只要是与后端传输的都需要修改

在这里插入图片描述

为什么要在接口前统一加上/api?

并不是一定是/api，都改成/test，/build，也都行
加上之后，是为了在后面进行部署时，nginx进行反向代理时，进行识别，如下代码，当识别到接口上是以/api开头，就会进行反向代理，将此请求，发送给反向代理的ip地址。（另外，我在部署的时候，因为是第一次接触nginx反向代理，我就在想，那我直接location后面不加/api，这样写location / {}那样前端不就不用改了嘛。事实证明，我在瞎扯，如果location / {}这样写的话，那就是正向代理。具体nginx，请小伙伴自行探索）

location /api {
		proxy_pass  http://127.0.0.1:8080
	}
1
2
3

2.后端项目修改

在统一的webconfig文件中进行修改

在这里插入图片描述

application文件的修改

在这里插入图片描述

前面，我们在修改前端时，我们将接口都加上了/api，那现在生产环境nginx在转发时location / { proxy_pass http://127.0.0.1:8080 }，在ip地址，端口后直接加上/，http://127.0.0.1:8080/，nginx在反向代理时，就会自动去除/api。不加/，就不会自动去除。

但是在开发环境中，没有nginx帮我们进行自动去除/api呀。这时候，你的前端接口时http://127.0.0.1:8080/api/articles但后端接口还是http://127.0.0.1:8080/articles

此时如果你前端在添加/api时，不在pathRewrite中不添加/api的话，那就可以在后端yml文件添加server.servlet.context-path:/api，他这个意思就是改写所有接口，所有接口都前都加上/api。在前端配置文件中添pathRewrite{/api}的话，就代表改写所有接口，去除/api。所有后端添加，和前端去除，只要配置一个就行，一般来说，后端不进行配置，前端配置