如何上线前后端项目（宝塔踩坑版）

宝塔上线网站流程

前言

为了协助师兄上线网站，又一次重新复习了上线的流程。该项目要求访问地址必须是服务器的ip，因此不能采用快速上线的方式，如：前端采用vercel，后端采用第三方平台（微信云）、又或者是内网穿透等方式！
这里推荐我喜欢一个up主yupi快速上线项目的教程：https://www.bilibili.com/video/BV1z14y1r7Fc/?spm_id_from=333.999.0.0&vd_source=36cdcc262df0dee0619a31d3d58e6e19

上线工具

0. 服务器（这是必须的）
1. xshell（远程连接服务器，模拟终端）
2. 数据可视化工具（远程连接服务器数据库，建库建表）
3. 宝塔（一键安装上线项目所需的环境）
   ps:宝塔需要安装在服务器上，通过该工具进行可视化（省去一些安装命令和一些文件操作的命令行）

项目所需环境

该项目是前后端分离，前端vue，后端springboot

1. nginx
2. Java8
3. MySQL数据库
   ps：
   （1）通过宝塔安装nginx和mysql数据库（建议版本安装MySQL8.0以上，因为宝塔默认安装5.7版本）
   （2）如果你是采用宝塔启动Java项目，是会启动宝塔默认的JDK版本，因此需要指定你自己JDK进行编译项目！！否则可能会报JDK版本编译错误！如下图JDK是宝塔默认的版本，还有一个1.7的是宝塔安装的（很难崩）
   
   （3）Java你就必须手动安装，这里推荐一篇文章，跟着安装即可~ linux安装Java环境指南 ，同时Java8建议最新，我的JDK版本1.8.0 381，所以推荐以这个版本往上走。
   ps:要保持一致，项目JDK的文件地址和项目执行命令的地址要一模一样！！！
   

上线问题

通过宝塔安装完MySQL数据库之后，可以采用可视化工具（Navigate），也可以使用xshell启动MySQL的黑框客户端。（应该都选可视化工具吧doge）

1. 远程连接数据库连不上

检查一下配置是否遵循：

• 服务器的数据库3306端口需要打开（后面会继续阐述）
• 同时修改写入MySQL数据库的权限Navicat如何连接远程服务器的MySQL
• 需要记住记住自己数据库的密码和账号（账号默认root，密码需要自己在宝塔修改，因为是通过宝塔安装数据库的，因此提供的密码是初始的。该密码比较难记，因此需要自己自行修改）
  

4. （重点）服务器会有对端口额外加一层保护，即即使在宝塔开放了端口，默认所有IP访问，Navigate依旧远程连接不上！因此我们得额外在服务器上允许所有IP访问某个端口，比如数据库的端口是3306！

• 服务器端口设置
  
• 宝塔端口设置
  
  ps：如果阁下不想在服务器额外设置的话，可以关闭服务器的防火墙也是可以的，但是危险程度阁下可以考虑一下（doge）

2. 跨域问题

这个算是前后端分离的项目“通病”了，该项目通过后端配置解决该问题！这里献上祖传配置，基本是可以解决跨域问题吧（大概doge）

@Configuration
public class CorsMapping implements WebMvcConfigurer {
    @Override
    /**
     * 重新跨域支持方法
     * CorsRegistry  开启跨域注册
     */
    public void addCorsMappings(CorsRegistry registry) {
        //addMapping 添加可跨域的请求地址
        registry.addMapping("/**")
                //设置跨域 域名权限 规定由某一个指定的域名+端口能访问跨域项目
                //可以添加多个访问网址，本质逻辑就是网址的黑白名单，底层是数组
                .allowedOrigins("http://127.0.0.1:5173")
				// .allowedOriginPatterns("*")
                //是否开启cookie跨域
                .allowCredentials(true)
                //规定能够跨域访问的方法类型
                .allowedMethods("GET","POST","DELETE","PUT","OPTIONS")
                //添加验证头信息  token
                .allowedHeaders("*")
                .exposedHeaders("*");
                //预检请求存活时间 在此期间不再次发送预检请求
				//.maxAge(3600);
    }