部署Springboot+Vue前后端分离项目的历程杂谈

Main_Kevin_H

已于 2024-08-29 10:10:25 修改

阅读量558

点赞数 27

文章标签： java 学习

于 2024-08-28 17:31:10 首次发布

本文链接：https://blog.csdn.net/ddfhfjd/article/details/141641825

版权

部署环境

1、宝塔面板（9.1.0免费版）

阿里云服务器如何安装宝塔面板教程汇总（图文教程）-阿里云开发者社区 (aliyun.com)https://developer.aliyun.com/article/767507宝塔这玩意真的是让我又爱又恨

爱就爱在它搭建基础的服务器生产环境是真的很快，很方便。不用我一个个对应版本地去找，一些环境变量也不需要你动手了。甚至还有网站一键部署？！大受震撼。

恨就恨在有一些操作很固定，缺少一些功能。就比如我想换一个mongodb的版本，我在软件商店里卸载后，重新安装，安装了n次也不知道为什么会出下图的问题：

没找到问题原因。。。。（手动添加pid并检查权限没有问题后还是不行，求大佬指点）

最后我还是通过yum源文件的方式安装的。然后手动做的一些环境搭建，在面板上是不会有显示的。

2、MongoDB 6.0

这个NoSQL数据用得很少，也是在边用边学的阶段。整体来说配置好之后还是比较易用的，就是我在配置的时候遇到了坑，花了很多时间。后续甚至被别人偷了数据库，难受。

3、基础的一些环境 jdk17、nginx 1.20.2、php、tomcat

大致流程

1、后端java项目打包，我是打包成jar包，方便直接运行。war包的话是专门用于打包和分发 Java Web 应用程序。包含 Web 应用程序的所有组件，包括 Servlet、JSP、HTML、JavaScript、CSS、图像文件等。

打包直接用maven做就可以了

记得在pom文件中做配置。

之前遇到过java -jar 运行时遇到找不到主类的问题，原因就是configuration这里的skip不是false

2、前端项目打包

我使用的是vite，在配置好vite.config.js文件后，在命令行输入npm run build即可

打包出来的文件结构是：

3、上传到服务器

可以通过xshell远程连接服务器后使用 rz 或者 rz -be（防止中文乱码）进行文件上传

或者通过宝塔面板-【文件】-【文件上/下载】进行传输

4、开放防火墙，设置服务器的安全组

放行8989端口
firewall-cmd --zone=public --add-port=8989/tcp --permanent
重新加载防火墙
firewall-cmd --reload
查看防火墙规则
firewall-cmd --list-all

安全组需要登录到云服务器官网，在里面设置。

5、运行jar包

nohup java -jar myapp.jar & 或者在宝塔中的【java项目】中进行运行。

6、配置nginx

在nginx配置中添加上server，user 一般设置为 root

在宝塔中可以只针对一个站点进行设置，在其配置文件中修改即可

location / {
root /www/wwwroot/xx.xxx.xxx.xx_8282/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}

# API 代理
location /api/ {
proxy_pass http://xx.xxx.xxx.xx:8181/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}

默认文档设置为打包出来的dist

前后端在不同的端口，要配置代理，前端在8282，后端在8181

然后就可以正常运行了

踩到的坑

1、后端跨域配置。之前在本地开发环境时，使用的是开发服务器来运行前端应用。vite内置了代理功能，可以绕过浏览器的同源策略，将请求代理到后端服务器。所以在本地测试时，我只需要在前端配置代理，不需要在后端进行跨域配置。而当我的应用部署到生产环境时，前端的静态文件通常会直接由 Web 服务器Nginx提供，而不是开发服务器。前端发出的请求会直接发送到后端服务器，而不会经过前端的代理。这样就会因为浏览器的同源策略，这些请求会受到跨域限制，导致请求失败。

具体的跨域配置做法有很多，我这里采用的是在WebMvcConfigurer中配置的方法

    //设置跨域
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://xx.xxx.xxx.xx:8282")//前端服务所在端口
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }

2、前端项目运行时，页面打开是空白的

这是静态文件的路径有问题，要修改config.js文件

将默认的base设置为‘./’