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

打印 上一主题 下一主题

主题 582|帖子 582|积分 1746



目录
一、准备工作
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)然后点击登录,

等登录到面板,输入以下命令查看面板地址:
  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)打开宝塔面板左侧的终端,输入以下命令打开文件:
  1. vim /etc/profile
复制代码
或者直接找到文件/etc/profile,进入编辑模式,

在文件中加入以下(留意修改本钱身的jdk路径):
  1. # jdk解压后的目录路径
  2. export JAVA_HOME=/www/server/java/jdk1.8.0_371
  3. export JRE_HOME=/www/server/java/jdk1.8.0_371/jre
  4. export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/
  5. export PATH=$PATH:$JAVA_HOME/bin
复制代码

然后按esc,输入:wq保存文件。
(3)然后,我们需要更新一下这个文件/etc/profile,利用下列命令,
  1. source /etc/profile
复制代码
打开菜单左侧的终端,输入以下命令查看java版本:
  1. 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
  1. cd jar包存放位置
复制代码
临时运行jar包(输入java -jar 后,再输入jar包的前面几个字母然后按tab键可以补全名称):
  1. java -jar jar包
复制代码
启动之后,

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

(2)如果想要服务器一直运行jar包(关闭页面后也会运行),输入以下命令:
  1. 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,题目成功解决了。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

北冰洋以北

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表