宝塔面板 部署 VUE+Spring Boot前后端分离(腾讯云服务器)

前期准备:

  1. 腾讯云服务器

  2. Liunx轻服务系统

  3. 服务器安装宝塔面板,且配置LNMP环境,放好数据库文件,还有jdk

  4. VUE基本项目

  5. SpirngBoot 基本项目

​​​​​​一、 vue打包

打包会生成一个dist文件夹,放到桌面,方便上传到服务器

npm run build

 二、Spring Boot打包,测试

①单击maven

e1659159fc3d42abace7258fde2e0a9f.png

②双击cclean等待完成

51fcb8e0706d45eeaa3f1179fb9d91ee.png

 ③双击package等待完成,生成target文件夹,找到需要的jar包 

9f0670224e5f4140ab8e72cff626c67f.png

④windows的命令行测试 jar包

注意:如果你的jar包不在桌面,需要进入jar包所在的目录,运行该语句

java -jar 你的jar包名称.jar

c12ee431b6174fc8a1af3a4079cfa053.png

  三、登录宝塔面板部署项目

1.上传VUE项目、SpringBoot项目

①新建文件夹存放项目

13c614afdc3743b8a26f9e387498dfc3.png

②上传jar包和dist文件夹

9ab458beff6e4d3ea54b82a43be9447c.png

9b0dc339ce734b6d82315a6bf9738b27.png

③进入保存项目的文件夹,将剪切的内容粘贴到该路径下,删除空的dist文件夹

cc7832bd81b64fc797fb06a99c5c742b.png

dcdb8d9db2554b2e96807d1bb13f6a2b.png

9eb51dd44e344ab8beba488a1cd17641.png

2.运行SpringBoot项目+配置Nginx

①运行jar包

java -jar 你的jar包名字.jar

522cee8bb9284454bf51039267ee8013.png

②配置nginx.config文件

34b1309936a844c181f8752173b1585b.png

272ecade07bc4ddb93a45e62b27f0ac0.png

 root /项目路径;
 location /vue代理{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://服务器IP:后台运行的端口号;
        }

③保存,重启服务器或者重启nginx

3.运行VUE项目,添加站点,配置文件

①按步骤添加站点

dcd9402b70974d3295a029778e861fb7.png

 06c5a16b46a641cba7426cb46e86295c.png

 ②添加IP域名92b86cc0ca8c4b12a75299ad975d4606.png

 6bb63b31bcac42168f5a0dd6951b0c02.png

  ②添加I反向代理7b322b6dff664c5a9c39925d73455b67.png

 599ec2fec9ee4349a1d0d008b77b8635.png

 ③重启站点

 

 

四、进入网页,一定要测试登录,查询是否调用了后端接口

致此完成

2b4f891f802c42d0bce371501987096a.png

ec1411a45caf41d9914dd2dd8cecac8f.png

  • 8
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

假客套

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

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

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

打赏作者

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

抵扣说明:

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

余额充值