首页 前端知识 (亲测有效)SpringBoot Vue项目云服务器部署(宝塔)

(亲测有效)SpringBoot Vue项目云服务器部署(宝塔)

2024-09-14 23:09:01 前端知识 前端哥 717 754 我要收藏

目录

一、准备工作

1、购买云服务器

2、获取面板地址

二、jdk和数据库

1、安装环境

 2、安装Java环境jdk

3、添加数据库

三、前端部署

1、修改后台服务所在源

2、vue  build

2、创建站点

四、后端部署

1、修改application.yml

2、idea打包

3、运行jar包

方式一:在终端命令运行jar包

方式二:添加Java站点(服务器和面板都开一下端口)

 4、开放端口

五、测试

六、可能遇到的问题

1、404


仿照别人项目做了个基于 springboot 和 vue 的网站,在腾讯云服务器上,通过 宝塔面板 部署了该项目。

项目的技术栈:Vue3、Axios、Element Plus、Spring Boot2、Mybatis、MySQL8

一、准备工作

1、购买云服务器

(1)首先前往云服务器平台(阿里云或腾讯云)购买云服务器(可以免费试用),这里以腾讯云为例。

然后创建服务器,选择常见linux的发型版本,centos、debian、ubuntu 啥的都行。

我这里使用宝塔linux面板,地区可以选择离自己现在所处位置近的。

点击立即使用,

创建成功之后会发通知,点击跳转,

(2)在这个控制台页面就可以看到了。

2、获取面板地址

(1)然后点击登录,

等登录到面板,输入以下命令查看面板地址:

sudo /etc/init.d/bt default

(2)找到防火墙页面,

添加8888端口后,访问上面的外网地址,

可以看到已经添加成功了,

二、jdk和数据库

1、安装环境

(1)复制外网面板地址,浏览器打开,就可以进入宝塔面板腾讯云专项网网页,

然后登录到宝塔面板,账号密码是上面命令生成的账号密码。

进入之后,需要绑定宝塔官网账号,如果没有的话,需要注册一下。

(2)找到左侧的软件商店,搜索应用并且安装以下(如果没有用到redis,可以不用安装):

如果需要其他环境自行下载。

一共安装了这么多,

 2、安装Java环境jdk

(1)要先安装Java环境(根据项目情况选择)

点击宝塔面板左侧的网站 - Java项目 - Java环境管理 - 安装Java环境,

此处我选择的是jdk8,等待安装完成,可以看到,

然后需要在文件中加入以下(注意修改成自己的jdk路径):

(2)打开宝塔面板左侧的终端,输入以下命令打开文件:

vim /etc/profile

或者直接找到文件/etc/profile,进入编辑模式,

在文件中加入以下(注意修改成自己的jdk路径):

# jdk解压后的目录路径
export JAVA_HOME=/www/server/java/jdk1.8.0_371
export JRE_HOME=/www/server/java/jdk1.8.0_371/jre
export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/
export PATH=$PATH:$JAVA_HOME/bin

然后按esc,输入:wq保存文件。

(3)然后,我们需要更新一下这个文件/etc/profile,使用下列命令,

source /etc/profile

打开菜单左侧的终端,输入以下命令查看java版本:

java -version

就可以看到jdk的版本了。

3、添加数据库

(1)点击左侧的数据库,添加数据库。用户名和密码自己设置,

添加完成之后,可以在面板中看到了。

(2)添加后,导入数据库表,

将以sql为后缀的文件上传,此文件即建表语句。

(3)然后点击工具,可查看是否成功建表。

(4)要想查看数据库中表导入数据是否成功,可以通过我们之前安装的这个phpMyAdmin 5.0,

进入宝塔面板左侧的数据库,点击phpMyAdmin,选择面板访问,

 进入之后,会生成下面这个页面,可以可视化数据库表的数据。

三、前端部署

1、修改后台服务所在源

打开前端项目,找到request.ts文件,修改后台服务所在ip,

2、vue  build

如果前端是vue工程,进入到vue文件下,cmd进入命令行,输入npm run build打包。

打包成功后会出现dist文件,

将dist文件拖到宝塔面板文件里,此处我的路径是/www/wwwroot。

2、创建站点

(1)点击左侧的网站添加站点。

其中,需要点击安装ftp,

安装完成之后,添加ip或域名,

(2)找到网站目录,定位到上面添加的dist文件位置,最后不要忘记保存

(4)此时,我将之前的前端打包文件夹dist放到了这个目录下,并且修改了网站站点的配置。

 (5)然后在浏览器中通过ip可以访问到前端页面了(能看到就行,其他问题往后看)。

四、后端部署

1、修改application.yml

修改数据库连接池,并设置后端端口号(记住端口号)

2、idea打包

打包后,工程target文件下会生成jar包,

将jar包拖到宝塔面板文件里。

到此,前后端文件所在位置如下:

 

3、运行jar包

方式一:在终端命令运行jar包

(1)打开服务器终端,输入以下命令跳转文件。如:cd /www/wwwroot

cd jar包存放位置

临时运行jar包(输入java -jar 后,再输入jar包的前面几个字母然后按tab键可以补全名称):

java -jar jar包

启动之后,

然后,在浏览器进入地址,就可以看到后端正常启动了。

(2)如果想要服务器一直运行jar包(关闭页面后也会运行),输入以下命令:

nohup java -jar jar包 &

方式二:添加Java站点(服务器和面板都开一下端口)

直接添加这个 java 项目的端口,

  • 项目jar路径:选择上传的jar包路径位置
  • 项目端口:要和自己的项目端口一样
  • 项目jdk:已安装的jdk
  • 项目执行命令:是自动生成的
  • 开机启动:选择

 4、开放端口

点击左侧的安全,添加用到的端口,

腾讯云网页那边也要添加上,

五、测试

(1)我在站点里设置的后端端口是8101,

在浏览器中输入后端的某个路径,就可以看到后端可以正常访问了,

(2)前端也可以了,我在站点里设置的前端端口是8080,因此ip+8080访问,

打开服务器对应网站(服务器ip地址+域名号),刷新即可,

六、可能遇到的问题

1、404

此问题可能由vue的路由引起,需要nginx配置一下。

打开nginx配置,找到nginx位置。打开以你ip命名的conf文件,在server里添加一行命令,然后重载nginx。

详情请移步我的另一篇博客Vue项目通过宝塔部署之后,页面刷新后浏览器404页面-CSDN博客

OK,问题成功解决了。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18333.html
标签
评论
发布的文章

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!