SpringBoot+vite+宝塔linux部署前后端分离项目

Cykzzzz

已于 2024-04-15 13:03:50 修改

阅读量1.6k

点赞数 61

于 2024-04-15 12:58:45 首次发布

本文链接：https://blog.csdn.net/qq_58116623/article/details/137775008

版权

1.购买服务器

阿里云，腾讯云，华为云等等都可以，买个2核2G的就足够（这里2核是虚拟核心数）。
镜像选择宝塔linux，然后按照对应的引导开始配置即可。
云服务的安全组记得放开8888,8080,3306,5173,80,9090等端口，如果你后面遇到一些问题的表现是页面卡死，大概率是端口没有放开。

2.打包前端项目

打包之前需要确认一件事：是否需要代理来解决跨域，其实springboot加上@CrossOrigin已经可以处理跨域了，但是安全度不高。

如果开启代理，其他有些博客写需要设置vite.config.js的server，但我实测并不需要，在nginx配置即可。此时我们需要做的是确认axios的baseUrl
```
const service = axios.create({
  baseURL: "/api", //把原来的地址改为/api即可
  timeout: 50000,
});
```
此时请求的url：http://localhost:8080/a变为http://localhost:5173/api/a，符合浏览器同源原则。

如果不开启代理，确认springboot的控制层都加上了@CrossOrigin，axios的baseUrl即服务器后端ip加端口

const service = axios.create({
  baseURL: "http://1.11.111.111:8080/",//自己服务器的ip和端口
  timeout: 50000,
});

直接运行 npm run build
生成dist就是我们打包后的文件
在这里插入图片描述

3.打包后端项目

配置application.yaml

spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    druid:
      url: jdbc:mysql://IP:3306/数据库名字?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8
      username: root
      password: 123456
      driver-class-name: com.mysql.cj.jdbc.Driver

注意url的的配置，ip和端口和数据库名字都需要改，用户名和密码也需要改。
在这里插入图片描述
这时候会生成target文件，如果找不到去本地文件夹中找。

这里的jar包就是打包后的文件啦。

4.进入宝塔界面

宝塔的登录注册对应的云平台都有教程，进入后会选择软件安装，我建议选最左边那个。

这是我的项目中的版本，注意mysql的大版本要和springboot项目中的驱动版本对应。
在这里插入图片描述
在文件界面中创建springboot和vue文件夹，在springboot上传打包好的jar包，vue中上传dist文件夹。
在安全界面把对应的端口号都放开。

5.配置数据库

在数据库界面需要完成两件事：

修改root密码和springboot配置相同
创建对应的数据库，用户名和密码随意，然后点击右边的管理，用生成的sql语句创建表和数据。

这时候如果报nginx错误，检查端口是否放行和php与phpmyadmin的版本是否对应。
之后我们可以检查数据库是否配置成功，打开sqlyog或navicat等工具。
在这里插入图片描述
如果成功说明配置ok，没成功也不要慌，可以尝试这篇文章
修改root用户权限

6.创建后端项目

之后是关键步骤，点击网站->Java项目->添加Java项目
在这里插入图片描述
提交后可以用浏览器访问一下，例如 1.11.111.11:8080,出现下面这个界面或者配置好的界面就ok了。

7.配置nginx代理

之后我们来到PHP项目配置nginx，直接在之前的server下面再写一个server即可。
在这里插入图片描述

server {
		listen 80; //随意，80端口可以用IP直接访问
		server_name 1.11.111.11; //随意
		location / {
			root /www/wwwroot/vue/dist;#dist文件的位置(根据自己dist包放置的位置决定)

	    # 若不配置try_files， 刷新会404
			index index.html;
			try_files $uri $uri/ /index.html;
		}
		location /api {
		//这个rewrite很关键，如果你的后端接口地址没有api前缀需要加上这段。
		//例如：http://1.11.111.11/api/user->http:1.11.111.11:8080/user否则指向http:1.11.111.11:8080/api/user
		rewrite  ^.+api/?(.*)$ /$1 break;
  		proxy_pass http://1.11.111.11:8080; //后端地址
    }
}

这里如果你选择不开启反向代理，即baseUrl是后端的真实地址，location /api部分可以不写。
配置写好后重载nginx，访问IP即可尝试是否成功。