Linux宝塔前后端分离项目部署流程

前言

本文记录一下第一次使用Linux宝塔部署项目踩的坑

1.前期准备

域名解析

这个网上很多教程，这里就不说了

项目打包

首先，自己准备一个后端端口、新建网站端口以及数据库端口(端口不能一样，因为在同一个服务器中会出现端口被占用的情况)，然后在阿里云以及宝塔中开放这些端口

2.上传打包文件

后端：
先在pom里面配置jar或者war打包策略，然后使用maven先执行clean命令，在执行package或者install命令得到jar包
前端：
npm build命令得到dist压缩文件
然后在宝塔文件目录中新建文件夹，将jar跟dist上传，将dist解压到当前目录里。在宝塔中下载java项目一键部署(真的非常方便)，选择springboot部署，选择我们上传的jar，在自定义参数那儿，开头要加个空格，不然运行jar会报错(这个我暂时也不知道是什么原理)。
至此后端部署成功，使用服务器ip+端口可以进行访问。
在网站新建站点，有域名将域名解析填入，没有就填服务器ip+端口。
至此前端部署成功，浏览器直接输入域名或者服务器ip+端口可以访问到静态页面。

3.配置Nginx反向代理

到这一步项目还不算完全部署成功，因为前后端部署在同一台服务器，所以必然端口不同，会产生跨域问题，我这里是通过宝塔中下载的Nginx来解决的，下载好之后，在我们刚才新建的网站里，可以修改Ngixn配置文件，如：

#反向代理配置
location /api/ {
	proxy_pass http://服务器ip+后端端口/;
}

4.配置静态资源（如：上传文件、图片等到服务器）

# 下面两个location的意思是访问 http://你的IP:端口号/upload_files/aa.png 就可以访问到在 
/www/wwwroot/xxx/upload_file/ 目录下的aa图片了，可以配置多个 location
#然后你就可以把http://你的IP:端口号/upload_files/aa.png写到你的前端的 scr 里面就可以访问到了
# ^~ 表示 如果把这个前缀用于一个常规字符串,那么告诉nginx 如果路径匹配那么不测试正则表达式。
例1：
location ^~ /upload_files/ {
	root /www/wwwroot/xxx;     #指定图片存放路径    
}
例2：
location /upload_files/ {
      #识别url路径后，nginx会到/www/wwwroot/xxx/upload_files/文件路径
      #下，去匹配/upload_files
      root /www/wwwroot/xxx;
      #开启目录浏览下载功能
      # autoindex on;
    }

5.导入数据库

这里我推荐使用一个数据库管理的工具，非常方便，phpMyAdmin，在软件商店就可以下载。
这里我们创建一个数据库，导入sql就可以了，也可以对数据库进行管理，账号密码就是创建数据库时填入的账号密码。
注：一般数据库连接超时或者数据库连接不上就去检查数据库端口是否开放和数据库版本和代码中是否一致。

6.访问项目

在浏览器中输入Nginx配置好的域名或者服务器ip+端口就可以进行访问了，静态资源也可以进行上传访问。

注意事项

新建网站端口要跟前端设置的端口一致！
宝塔部署后端项目端口要跟后端配置文件端口一致！
添加域名的话，必须是解析好的域名，否则无法进行映射！
项目部署成功后，如果部署出现子菜单刷新后404，可在Nginx配置文件中配置如下：

location / {
    root /www/wwwroot/backapi.jipulse.com/dist;
	index  index.html index.htm;
    try_files  $uri $uri/ @router;
}
    
location @router {
    rewrite ^.*$ /index.html last;
}

如果子菜单刷新能出现页面但是js、css等404，如下：
1.变量路径改为’/‘，官网说了，’./'是用于开发环境的

VITE_PUBLIC_PATH = '/'

2.将vite的配置base修改为刚才设置的路径

return {
	base: env.VITE_PUBLIC_PATH,//打包路径
}