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

前言

• 博主看网络上的各种先容项目上线的视频/文章，要么不是项目获取困难，要么没有良好的引导比力丢脸懂，要么不全。因此写本博客。本博客应该是最全的了，全面地先容一个项目怎样上线。纵然你是小白看完博客也能让你成为糕手糕手糕糕手
  
• 配景致是 野菊紫
  

要上线的项目先容（假如你已经自己写过了一份项目，那就不消看这一部分）

• 作为课本的是一个springboot+vue的项目，项目很小，只有利用mysql、elementUI。 但就是由于项目充足小，以是会让新手更容易熟悉明确怎样上线项目。
  
• 该项目已经上传到我的github、gitee中。不外你就算不会git，什么都不懂也没事，按照我博客教程一步步走，就好了。​
  

从外表层面熟悉该项目

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

用户端

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

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

管理员端

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

从代码层面熟悉该项目

后端

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

前端

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

购买腾讯云服务器

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

购买所在

1. https://cloud.tencent.com/act

复制代码

门生优惠

1. https://cloud.tencent.com/act
2. /campus

复制代码

• 详细的服务器选购，看我的文章：
  
  1. https://juejin.cn/post/7405388594830508068

  复制代码

题外话

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

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

服务器设置

• 这个和linux差不多
  

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

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

复制代码

利用SSH工具MobaXerm链接服务器

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

第二步：得到项目代码

我懂git指令

1. https://gitee.com/Qiuner/SelfStudyRoom

复制代码

我不懂git指令

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

• 然后点击回车
  

2、开始克隆项目

1. git clone https://gitee.com/Qiuner/SelfStudyRoom

复制代码

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

3、ok

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

安装宝塔面板

访问以下网址

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

复制代码

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

• 下面选项直接选yes即可
  

• 我的马赛克是一些关键信息，这个服务器立即逾期了，就算破解马赛克也没有效
  
• 这内里外网就是能访问bilibili、抖音能上网的装备都能通过这个ip访问到宝塔面板，而内网所在须要你和这个服务器处于同一个局域网，才气利用内网举行访问
  
• 由于这个时间我们还访问不了页面
  

1. netstat -tulnp | grep 16716

复制代码

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

• 体现如图那这个端口就是在运行
  

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

• 腾讯云为你服务器提供的一种端口掩护，和当地的防火墙不是一个概念
  
• 下面代码是当地防火墙的放行，但只是如许还不敷，还要去腾讯云那里，举行放行
  

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

复制代码

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

不放行给全部网段

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

1. nslookup myip.opendns.com resolver1.opendns.com

复制代码

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

访问体现404

• 这种环境是由于你是通过IP所在加端口访问的，这种办法访问会出现404。这是宝塔面板设置的一种掩护，你须要做的就是把你之前第一此安装宝塔面板体现的
  

• 你就能乐成访问啦
  

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

第四步：将数据库摆设好

添加数据库 假如你的数据库名和我的不一样，那记得在第五步的时间举行恰当更改

• 云云，就能看到了
  

留意

记取你设置的数据库暗码，这个关系到后续的后端摆设
数据库导入失败

• 有这两句方便项目当地运行，但项目摆设的时间就用不到了
  

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

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

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

项目打成jar包

• 可以看到jar包在target下面
  

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

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

末了实行效果

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

• 利用下列下令
  

1. java -jar SelfStudyRoom-0.0.1-SNAPSHOT.jar

复制代码

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

• 接下来，上传jar包到服务器上面，然后开始举行摆设
  

利用Linux下令来上传jar包

• 一样寻常会将jar包上传到opt文件夹下面，在opt文件夹下添加一个文件夹，然后上传应用步调，接下来我们就来利用
  

到相应文件夹

1. cd /opt

复制代码

创建文件夹

1. mkdir application

复制代码

进入文件夹

1. cd application

复制代码

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

启动jar包

1. java -jar SelfStudyRoom-0.0.1-SNAPSHOT.jar

复制代码

因没有安装java导致报错

办理办法

1. sudo yum install java-11-openjdk-devel

复制代码

• 是打 y 然后回车
  

下图为安装乐成的状态

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

• jar包运行乐成
  

别的相干设置

在背景运行

为了在关闭终端后仍旧保持应用步调运行，你可以利用 nohup 大概 screen 等工具来在背景运行 JAR 包。
利用 nohup 下令：

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

复制代码

• output.log：生存应用步调的日记输出。
  
• &：表现将历程放到背景运行。
  

查察背景运行日记

1. tail -f output.log

复制代码

查察应用步调运行状态

1. ps -ef | grep java

复制代码

大概查察端口（留意端口）

1. sudo netstat -tuln | grep 9090

复制代码

访问应用步调

1. http://your-server-ip:9090

复制代码

• 留意，须要在腾讯云放开端口，而且利用http来访问，而不是https访问
  

• 以上是访问效果。到了这一步，你可以不止拿你电脑可以访问，特长机访问也是一样。去看看你的云服务器运行的服务吧，感受一放学编程反馈的高兴😄
  
• 博主很喜好编程，就是由于步调的天下里很纯粹。只有逻辑，对就是对，错就是错，有本领就做的出来。步调员的天下也比力纯粹，开源精神。这种精神在无论多先辈的生产力配景、多高尚的人文社会都不会掉队。偶然候你遇到大佬大概重难点，你好言两句，形貌清楚，大佬也会给你看看bug，传履历。
  

第六步：利用Nginx上线项现在端

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

• 先去下载Nginx
  

1. https://nginx.org/en/download.html

复制代码

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

利用VSCode打开项目文件

1. npm run build

复制代码

• 运行这个下令
  

• 运行后天生dist文件夹
  

更换

• 然后重启nginx服务
  

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

办理其他标题

• 但这里上线尚有些标题,比如革新后会
  
• 
  
  

2.         location / {
3.             root   E:\dist;
4.             index  index.html index.htm;
5.             try_files $uri $uri/ /index.html;
6.         }

复制代码

上线前的项目范例分辨与上线前的项目更改

项目范例一（本项目）

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

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

项目范例二（非本项目）

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

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

• 然后就是将Nginx上传、修改要运行的地方啦，小搭档们可以自己动手试一试。不看继承看教程，来查验自己是否学进去了.
  
• 我利用分隔线 给须要自己实践的小搭档
  

---

分隔线
分隔线
分隔线
分隔线

• 下面就是教程啦
  

---

项目上传

• 项目上传到/var目次下
  

• 将打包的文件都上传
  

• 上面如许就是上传乐成了
  
• 输入nginx -v 来查察当地nginx版本(博主一开始还以为没有安装)
  

1. /var/dist

复制代码

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

安装nginx

1. sudo dnf install nginx

复制代码

提示不能安装

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

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

• 按ESC 然后输入wq
  

• 就发现可以或许安装啦
  

1. sudo dnf install nginx

复制代码

设置Nginx

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

1. service nginx start

复制代码

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

   你好,我是Qiuner. 为资助别人少走弯路而写博客 这是我的 github https://github.com/Qiuner⭐ gitee https://gitee.com/Qiuner 🌹
  假如本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^) 。想看更多 那就点个关注吧 我会努力带来风趣的内容 😎。
  代码都在github或gitee上，如有须要可以去上面自行下载。记得给我点星星哦
  承接毕设辅导，代码开辟等
  假如你遇到了标题，自己没法办理，可以去我掘金品评区问。私信看不完，CSDN品评区大概会漏看 掘金账号  掘金账号
       更多专栏:   

• 📊 一图读懂系列
  
• 📝 一文读懂系列
  
• ⚽ Uniapp
  
• 🌟 一连更新
  
• 🤩 Vue项目实战
  
• 🚀 JavaWeb
  
• 🎨 计划模式
  
• 📡 盘算机网络
  
• 🎯 人生履历
  
• 🔍 软件测试
  

  掘金账号 CSDN账号
    感谢订阅专栏 三连文章