使用腾讯云宝塔面板部署后端项目,包括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证书,然后在后端的配置文件中加上如下配置项:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kivi闭关编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值