腾讯云服务器上线一个springboot+vue项目最全教程 非Docker

admin管理员组

文章数量:1666065

前言

• 博主看网络上的各种介绍项目上线的视频/文章，要么不是项目获取困难，要么没有良好的引导比较难看懂，要么不全。因此写本博客。本博客应该是最全的了，全面地介绍一个项目如何上线。即使你是小白看完博客也能让你成为糕手糕手糕糕手
• 背景色是 野菊紫

文章目录

• 前言
• 要上线的项目介绍（如果你已经自己写过了一份项目，那就不用看这一部分）
• • 从外表层面认识该项目
  • • 用户端
    • 管理员端
  • 从代码层面认识该项目
  • • 后端
    • 前端
• 第一步：购买云腾讯云服务器并使用
• • 购买腾讯云服务器
  • • 购买地址
    • 学生优惠
    • 服务器配置
  • 来控制台看看你买的服务器
  • 使用SSH工具MobaXerm链接服务器
• 第二步：获得项目代码
• • 我懂git指令
  • 我不懂git指令
  • • • 1、你想将代码放在那里？
      • 2、开始克隆项目
      • 3、ok
• 第三步：安装宝塔面板及理解腾讯云公网防护
• • 安装宝塔面板
  • • 腾讯云服务器设置端口放行使得能访问宝塔面板
    • 不放行给所有网段
    • 访问显示404
• 第四步：将数据库部署好
• • • 添加数据库 如果你的数据库名和我的不一样，那记得在第五步的时候进行适当更改
    • 注意
    • 数据库导入失败
• 第五步：把项目后端上线服务器
• • 项目打成jar包之前 需要做些什么？
  • 项目打成jar包
  • jar包本地运行验证（重点 此处能理解服务跑在服务器是什么意思）
  • 使用Linux命令来上传jar包
  • • 启动jar包
    • 因没有安装java导致报错
  • 其余相关配置
  • • 在后台运行
    • 查看后台运行日志
    • 查看应用程序运行状态
    • 访问应用程序
• 第六步：使用Nginx上线项目前端
• • 在本地配置Nginx来感受前端上线是怎么一会事
  • • 替换
  • 解决其他问题
  • 上线前的项目类型分辨与上线前的项目更改
  • • 项目类型一（本项目）
    • 项目类型二（非本项目）
  • 项目上传
  • • 安装nginx
    • • 提示不能安装
    • 配置Nginx

要上线的项目介绍（如果你已经自己写过了一份项目，那就不用看这一部分）

• 作为教材的是一个springboot+vue的项目，项目很小，只有使用mysql、elementUI。 但就是因为项目足够小，所以会让新手更容易认识理解如何上线项目。
• 该项目已经上传到我的github、gitee中。不过你就算不会git，什么都不懂也没事，按照我博客教程一步步走，就好了。​

从外表层面认识该项目

• 有登录界面，然后分为管理员端和用户端两个端

用户端

• 这里是座位预约界面，前端有一个bug，没有将光标默认显示在座位预约上面

• 留言板界面，用户可自由留言

管理员端

• 管理员端，可以对项目的公告呀、座位呀、用户、留言榜等进行管理

从代码层面认识该项目

后端

• 如果你想在本地把项目跑起来，点下面这个即可

前端

第一步：购买云腾讯云服务器并使用

购买腾讯云服务器

• 项目需要运行在服务器上，因此我们需要购买一个云服务器

购买地址

https://cloud.tencent/act

学生优惠

https://cloud.tencent/act/campus

• 具体的服务器选购，看我的文章：

  https://juejin/post/7405388594830508068
  

题外话

• 我买的时候发现了很搞笑的事

• 最便宜的居然是没有活动的，而且腾讯云给的100块创作者卷，居然不能用于有活动的产品。what can i say？

服务器配置

• 这个和linux差不多

来控制台看看你买的服务器

https://console.cloud.tencent/lighthouse/instance/index?rid=1

使用SSH工具MobaXerm链接服务器

• 接下来的操作可以看我的另一篇博客：很好用的服务器/虚拟机链接工具MobaXterm 下载安装链接以及一些方便快捷的设置
  

第二步：获得项目代码

我懂git指令

https://gitee/Qiuner/SelfStudyRoom

我不懂git指令

1、你想将代码放在那里？

• 然后点击回车

2、开始克隆项目

git clone https://gitee/Qiuner/SelfStudyRoom

• 复制粘贴上面的命令即可

3、ok

第三步：安装宝塔面板及理解腾讯云公网防护

安装宝塔面板

访问以下网址

https://www.bt/new/download.html

• 根据自己需要选择不同的版本，然后将命令直接复制到你ssh工具链接到的主机上即可实现安装宝塔面板

• 下面选项直接选yes即可

• 我的马赛克是一些关键信息，这个服务器马上过期了，就算破解马赛克也没有用
• 这里面外网就是能访问bilibili、抖音能上网的设备都能通过这个ip访问到宝塔面板，而内网地址需要你和这个服务器处于同一个局域网，才能使用内网进行访问
• 因为这个时候我们还访问不了页面

netstat -tulnp | grep 16716

• 通过这段代码查看端口是否在运行

• 显示如图那这个端口就是在运行

腾讯云服务器设置端口放行使得能访问宝塔面板

• 腾讯云为你服务器提供的一种端口保护，和本地的防火墙不是一个概念
• 下面代码是本地防火墙的放行，但只是这样还不够，还要去腾讯云那里，进行放行

firewall-cmd --zone=public --add-port=16716/tcp --permanent
firewall-cmd --reload

按照以下图片设置就能直接看到

不放行给所有网段

使用以下命令查询自己电脑在公网的ip

nslookup myip.opendns resolver1.opendns

• 我打了马赛克的部分就是你的公网ip，就是你的这个局域网的公网ip。博主链接的是校园网
• 但经过测试，暂时不知道怎么放行给一个网段

访问显示404

• 这种情况是因为你是通过IP地址加端口访问的，这种办法访问会出现404。这是宝塔面板设置的一种保护，你需要做的就是把你之前第一此安装宝塔面板显示的

• 你就能成功访问啦

• 这里面nginx、mysql、jdk是必须的，phpmyadmin是一个数据库可视化的东西 pure-ftpd是phpmyadmin安装前置条件

第四步：将数据库部署好

添加数据库 如果你的数据库名和我的不一样，那记得在第五步的时候进行适当更改

• 如此，就能看到了

注意

记住你设置的数据库密码，这个关系到后续的后端部署

数据库导入失败

• 有这两句方便项目本地运行，但项目部署的时候就用不到了

第五步：把项目后端上线服务器

项目打成jar包之前 需要做些什么？

• 注意，在将项目打成jar包之前，需要改变项目的数据库链接设置什么的
• 如果你的项目有什么redis nacos，那都需要适当地修改配置
• 至于我这个演示项目，只需要你前面的数据库名字 密码按照我图片里面设置就好了

项目打成jar包

• 可以看到jar包在target下面

jar包本地运行验证（重点 此处能理解服务跑在服务器是什么意思）

• 在以往的项目中，大多是在idea中将项目跑起来，但本次，将跑jar包。让我们在视觉上感受到项目的后端

最后执行结果

找到你的jar包，然后开始进入命令行，输入以下命令

• 使用下列命令

java -jar SelfStudyRoom-0.0.1-SNAPSHOT.jar

• 然后你就会发现神奇的启动了，idea没有在运行，但前端还是能使用后端的处理逻辑

• 接下来，上传jar包到服务器上面，然后开始进行部署

使用Linux命令来上传jar包

• 一般会将jar包上传到opt文件夹下面，在opt文件夹下添加一个文件夹，然后上传应用程序，接下来我们就来使用

到相应文件夹

cd /opt

创建文件夹

mkdir application

进入文件夹

cd application

• 接下来你可以复制一份jar包，做备份处理

启动jar包

java -jar SelfStudyRoom-0.0.1-SNAPSHOT.jar

因没有安装java导致报错

解决办法

sudo yum install java-11-openjdk-devel

• 是打 y 然后回车

下图为安装成功的状态

• 你也可以在宝塔面板中安装，说到底，宝塔面板只是个辅助的可视化工具罢了，一个任务实现的方式是多种多样的

• jar包运行成功

其余相关配置

在后台运行

为了在关闭终端后仍然保持应用程序运行，你可以使用 nohup 或者 screen 等工具来在后台运行 JAR 包。

使用 nohup 命令：

nohup java -jar SelfStudyRoom-0.0.1-SNAPSHOT.jar > output.log 2>&1 &

• output.log：保存应用程序的日志输出。
• &：表示将进程放到后台运行。

查看后台运行日志

tail -f output.log

查看应用程序运行状态

ps -ef | grep java

或者查看端口（注意端口）

sudo netstat -tuln | grep 9090

访问应用程序

http://your-server-ip:9090

• 注意，需要在腾讯云放开端口，并且使用http来访问，而不是https访问

• 以上是访问结果。到了这一步，你可以不止拿你电脑可以访问，拿手机访问也是一样。去看看你的云服务器运行的服务吧，感受一下学编程反馈的喜悦😄

• 博主很喜欢编程，就是因为程序的世界里很纯粹。只有逻辑，对就是对，错就是错，有能力就做的出来。程序员的世界也比较纯粹，开源精神。这种精神在无论多先进的生产力背景、多高尚的人文社会都不会落后。有时候你遇到大佬或者重难点，你好言两句，描述清晰，大佬也会给你看看bug，传经验。

第六步：使用Nginx上线项目前端

在本地配置Nginx来感受前端上线是怎么一会事

• 先去下载Nginx

https://nginx/en/download.html

• 接下来，我们来将nginx的内容替换成我们打包好的文件即可

使用VSCode打开项目文件

npm run build

• 运行这个命令

• 运行后生成dist文件夹

替换

• 然后重启nginx服务

• 注意，还是要访问http://localhost:80

解决其他问题

• 但这里上线还有些问题,比如刷新后会

        location / {
            root   E:\dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

上线前的项目类型分辨与上线前的项目更改

项目类型一（本项目）

本项目没有使用vue.config.js中匹配

• 这里面关系到跨域问题，但本博客讲的是上线项目，因此不谈那么多

项目类型二（非本项目）

• 这种是使用了匹配的方式

以上两种项目都是要将代码中的target值换成后端服务地址，就是你服务器跑起来的地址 之前部署后端部署在哪里，就改成什么样

• 然后就是将Nginx上传、修改要运行的地方啦，小伙伴们可以自己动手试一试。不看继续看教程，来检验自己是否学进去了.

• 我使用分隔线 给需要自己实践的小伙伴

---

分隔线

分隔线

分隔线

分隔线

• 下面就是教程啦

---

项目上传

• 项目上传到/var目录下

• 将打包的文件都上传

• 上面这样就是上传成功了

• 输入nginx -v 来查看本地nginx版本(博主一开始还以为没有安装)

/var/dist

• 但这个nginx是宝塔面板安装的,我们删掉自己安装一个

安装nginx

sudo dnf install nginx

提示不能安装

• 编辑配置来防止安装失败

• 按ESC 然后按 i 进入编辑模式 移动光标到下面 注释最后一行

• 按ESC 然后输入wq

• 就发现能够安装啦

sudo dnf install nginx

配置Nginx

• 来到这个目录,然后点击

service nginx start

• 然后就可以访问你的前端,快去看看吧,如果你使用宝塔面板也是一样的,不过宝塔面板可以在宝塔面板的这个页面进行修改

你好,我是Qiuner. 为帮助别人少走弯路而写博客 这是我的 github https://github/Qiuner⭐ gitee https://gitee/Qiuner 🌹

如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^) 。想看更多 那就点个关注吧 我会尽力带来有趣的内容 😎。

代码都在github或gitee上，如有需要可以去上面自行下载。记得给我点星星哦

承接毕设辅导，代码开发等

如果你遇到了问题，自己没法解决，可以去我掘金评论区问。私信看不完，CSDN评论区可能会漏看 掘金账号 https://juejin/user/1942157160101860 掘金账号

更多专栏:

• 📊 一图读懂系列

• 📝 一文读懂系列

• ⚽ Uniapp

• 🌟 持续更新

• 🤩 Vue项目实战

• 🚀 JavaWeb

• 🎨 设计模式

• 📡 计算机网络

• 🎯 人生经验

• 🔍 软件测试

掘金账号 CSDN账号

感谢订阅专栏 三连文章

本文标签： 腾讯最全上线服务器项目