使用腾讯云宝塔面板部署后端项目，包括MySQL,Redis,JDK,Maven

一、购买腾讯云服务器并配置

购买腾讯云的一个服务器服务后进入到如下页面，点击左侧栏服务器，然后点击“重装系统”
在这里插入图片描述
选择“使用应用面板”->“宝塔Linux面板”->填写自定义账号和密码->点击确认

在这里插入图片描述

二、配置宝塔服务器端口参数并启动

点击确认之后进入到如下页面：
在这里插入图片描述
点击应用管理查看服务地址和端口号，默认端口号为8888.

由于8888端口号并没有开启和配置，因此需要自定去防火墙开启配置
同时因为本人后端项目还是用到了MySQL和Redis，所以将MySQL的端口号3306和Redis端口6379也配置进去。
在这里插入图片描述

回到“应用管理”页面复制左侧命令然后点击“登录”启动Linux命令行

在命令行粘贴刚刚复制的命令然后执行，得到宝塔Linux面板地址以及用户名和密码，按住Ctrl点击“外网面板地址”后方的地址进入到宝塔面板。
在这里插入图片描述
使用上述得到的用户名和密码进行登录

注册宝塔账号然后登录

三、安装应用并配置MySQL，将本地数据库中数据导入服务器中

首次登录成功后进入如下页面，选择自己需要的依赖环境进行安装，这里我就选择第一个LNMP（推荐）的，然后点击“一键安装”即可。
在这里插入图片描述
等待安装成功：

安装成功后初始页面如下：

新建服务器上的数据库：

本地测试连接服务器的MySQL

点击ok进行创建连接，将本地数据库的表信息DDL输入窗口中，并执行

成功执行后右侧出现刚刚创建的数据库表信息
在这里插入图片描述
配置application中的mysql地址和用户名和密码

四、配置Redis

安装Redis
在这里插入图片描述
按照如下顺序配置redis

回到Linux命令行中启动redis，输入命令：

ps -ef|grep redis

出现如下结果表示启动redis成功：
在这里插入图片描述

回到宝塔面板查看redis状态，如下表示成功

配置本地项目中application中的redis配置
在这里插入图片描述

五、安装JDK和Maven

安装jdk
在这里插入图片描述
安装maven，回到Linux命令行输入，然后等待

sudo yum install maven -y

在这里插入图片描述
六、将本地项目导入服务器
生成本地项目jar包，在本地idea中的右侧maven中点击package，等待打包jar包

成功后目录中得到如下jar包

将jar包上传至服务器的www.wwwroot目录下

六、服务器上部署后端并启动Java项目

将jar包添加到Java项目中，注意选择刚刚上传的jar包，同时更改项目中配置的端口号
在这里插入图片描述
出现如下图，则表示添加并运行成功

也可以运行日志中的项目启动情况，也可以看到当前项目启动成功：

至此，项目的后端已经成功部署在服务器上。接下来部署前端。

前端部署

将前端项目中的后端地址改成刚刚配置好的地址，然后打包得到dist目录，打包操作根据自己的前端项目自行操作，我是使用vite构建的vue3项目，所以直接找到package.json文件点击如下按钮，不检查只打包就行。
在这里插入图片描述
打包成功左侧目录中多出dist文件夹。
然后回到宝塔面板进行创建前端项目服务

将前端打包生成的dist目录中的文件全部上传到刚刚前端的目录下

上传成功后回到“网站”->PHP项目中按照如下点击

进入到自己项目的前端页面：可以看到静态信息完整响应，但是并没有和后端交互数据。
在这里插入图片描述
查看控制台报错信息：

Access to XMLHttpRequest at 'http://{我的域名}:8101/huidada/api/user/get/login' from origin 'http://{我的域名}' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

报错原因：端口号后面不需要带项目名称：huidada，将前端的request.js请求中的地址配置中的项目名称删掉，重新build前端项目并上传部署一遍前端。
再次进入依旧报错，并且报错内容和上述一样。
原因：浏览器缓存没有清理，依旧保存了之前的cookie，按F12->应用程序->存储->勾选包括第三方cookie->点击清除网站数据->刷新网页即可显示正常。
在这里插入图片描述
问题2：当进入到带有后缀页面时，显示404
原因：这个问题通常是由于Vue项目在生产环境中使用了HTML5 History模式路由，而服务器没有正确配置以处理这些路由导致的。具体来说，当你直接访问http://{域名地址}/userLogin时，服务器尝试找到该路径对应的文件，但由于前端项目是SPA（单页应用），并没有实际存在的文件，所以会返回404错误。
解决原因：
在前端项目的配置文件中加上如下配置：

location / {# 用于配合 browserHistory使用try_files $uri $uri/index.html /index.html;}

在这里插入图片描述
解决完上述bug后又出现新的bug，每次当我用户登录完成之后，页面却一直显示未登录状态。
原因：因为该项目使用的是session存储登录信息，但是前后端分离 vue+springboot 跨域会导致 session+cookie失效问题，因此每次登陆后浏览器与后端并不能正常通过http请求建立正常的session关联。
解决办法：首选需要申请https证书，然后在后端的配置文件中加上如下配置项：