买了云服务器不会用？写了网站不会部署？超详细springboot+vue前后端项目部署教程来啦

大家好！我是未来村村长，就是那个“请你跟我这样做，我就跟你这样做！”的村长👨‍🌾！

未来村村长

11776人浏览 · 2022-03-30 16:52:41

未来村村长 · 2022-03-30 16:52:41 发布

大家好！我是未来村村长，就是那个“请你跟我这样做，我就跟你这样做！”的村长👨‍🌾！

||Project Experience||

||Project Experience||系列文章重点讲述在项目搭建中的经验分享，会推出关于类似Maven、git等工具的使用，还会总结一些项目经验或者分享项目源码等，望能通过不断积累，成长为一名“大佬”！

一、Windows试运行

前提条件，你已经到腾讯云或者阿里云购买了服务器，并且你设置好了密码【腾讯云默认账户为root】，这是用来通过主机ip地址（公网IP）远程连接的。如果你不知道怎么买，我只能告诉你去官网支付宝支付或者微信支付即可。

1、打包springboot，通过Maven的package工具，将项目打包为jar包

在这里插入图片描述

2、在命令提示符找到对应文件夹,通过命令启动jar包

java -jar back_76pl-0.0.1-SNAPSHOT.jar

在这里插入图片描述

启动VUE项目，检测后端是否运行成功，成功后我们开始为我们的云服务器部署环境。

二、环境配置

1、Xshell、Xftp连接服务器

（1）Xshell

通过新建会话进行连接，直接通过文件-新建连接-【主机】输入公网ip地址-通过passward连接，登录即可，我们假定虚拟机为新安装虚拟机，还未配置任何环境，若已经配置JDK、mysql、Tomcat的直接快进到部署springboot项目。

在这里插入图片描述

（2）Xftp

同上，我们通过文件-新建连接-【主机】输入公网ip地址-通过passward连接，即可连接。

在这里插入图片描述

2、配置JDK

（1）在usr/local目录下新建java文件夹,并进入

cd /usr/local
mkdir java
cd java

在这里插入图片描述

（2）下载jdk

我们可以到清华大学的镜像网站下载对应的JDK，这里下载的是JDK8.

https://mirrors.tuna.tsinghua.edu.cn/AdoptOpenJDK/8/jdk/x64/linux/

在这里插入图片描述

我们将下载的文件，通过Xftp传送到之前创建的usr/local/java文件夹（直接拉就好了），并进行解压

tar xzf OpenJDK8U-jdk_x64_linux_hotspot_8u322b06.tar.gz -C /usr/local/java

在这里插入图片描述

解压完成后，我们可以看到jdk所在的文件夹,复制好文件夹名字：jdk8u322-b06，用于环境配置

（3）配置环境变量

通过以下指令进入环境变量的配置，按i进行输入

vim /etc/profile

下滑到文档最后，粘贴以下环境

export JAVA_HOME=/usr/local/java/jdk8u322-b06
export CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib 
export PATH=$JAVA_HOME/bin:$PATH

在这里插入图片描述

然后按下Esc，输入:wq推出文档，输入以下命令使环境生效

source /etc/profile

java -version

在这里插入图片描述

显示上图java版本信息，就说明JDK环境部署成功啦。

3、配置mysql

（1）建立文件夹

cd /usr/local
mkdir mysql

（2）使用yum下载mysql

地址：https://dev.mysql.com/downloads/repo/yum/

【作者使用的是CentOs8.2，其它版本linux建议去搜索对应的教程】将下载的文件通过Xftp传入刚才创建的usr/local/mysql文件夹下

在这里插入图片描述

（3）安装mysql

在终端进入 MySQL rpm 包所在的目录，执行下面命令：

yum localinstall mysql80-community-release-el8-3.noarch.rpm

在这里插入图片描述

然后我们通过以下命令安装mysql-community-server

yum install mysql-community-server

在这里插入图片描述

我们可以看到报错【Unable to find a match: mysql-community-server】，遇到错误不要慌，可能你遇到的和我不一样，但是CSDN以下总能解决，如果碰到这个错误，我们可以通过以下两个命令，重新进行安装。

yum module disable mysql
yum install mysql-community-server

（4）启动并配置mysql

1.修改密码

我们通过以下命令启动mysql

/bin/systemctl start mysqld.service
service mysqld status

在这里插入图片描述

通过以下命令显示mysql设定的随机密码

grep 'temporary password' /var/log/mysqld.log

在这里插入图片描述

登录mysql并修改密码

mysql -u root -p

在这里插入图片描述

ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';

在这里插入图片描述

我们发现修改密码报错了，因为123456太简单了，不符合mysql8的加密策略,现在我们要通过以下命令修改其加密策略

先设置一个符合规定的密码：
ALTER USER 'root'@'localhost' IDENTIFIED BY 'Root_21root';
修改密码长度：
set global validate_password.length=1; //（长度）
修改密码等级：
set global validate_password.policy=0; //（等级）
最后再进行自己密码的设定
ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';

在此，我们通过exit退出，使用新密码进入

2.开启远程访问

通过以下命令授权远程访问

create user 'root'@'%' identified with mysql_native_password by '123456'; 
grant all privileges on *.* to 'root'@'%' with grant option; 
flush privileges;

通过以下命令修改时区

set global time_zone='+8:00';

我们先在本地通过native、dbever等数据库可视化操作工具进行远程数据库的连接，连接不上可能是防火墙未开启3306端口，我们可以exit退出mysql，在root目录下通过以下命令开放3306端口，也可以在腾讯云（阿里云）操作面板打开相应端口。我的可以连接，你们的自己看看吧，这样我们的数据库就配置完毕啦！

在这里插入图片描述

firewall-cmd --aone=public --add-port=3306/tcp --permanent
systemctl restart firewalld.service
firewall-cmd --reload

4、Tomcat配置

我们到官网去下载Tmocat8.0的tar.gz压缩包:https://tomcat.apache.org/download-80.cgi

在这里插入图片描述

还是老套路，在usr/local下建立文件夹tamcat，然后通过Xftp将下载好的压缩文件放入该文件夹，通过以下命令进行解压

tar -zxvf apache-tomcat-8.5.77.tar.gz

我们就可以到Tomcat的bin目录下启动tomcat了

./startup.sh//启动
./shutdown.sh//关闭

在这里插入图片描述

Tomcat启动成功，我们在本地通过公网去访问以下，我们使用套接字：IP地址:端口号访问。出现Tomcat的下图首页即代表我们成功了

在这里插入图片描述

现在就可以去部署后端项目了。

附：Could not contact [localhost:8005] (base port [8005] and offset [0]). Tomcat may not be running.错误解决

我们通过以下指令查看端口占用情况。

netstat -lnpt

在这里插入图片描述

如果8005端口没有启动，那执行tomcat的启动或关闭都会报错。

我们通过编辑/usr/local/java/jdk8u322-b06/jre/lib/security/java.security的参数来解决该报错

/usr/local/java/jdk8u322-b06/jre/lib/security/java.security

securerandom.source=file:/dev/random//改正前
securerandom.source=file:/dev/urandom//改正后

我们通过killall java来关闭所有java运行程序，然后重新启动，发现可以启动成功。

在这里插入图片描述

三、springboot后端部署

1、打包

还记得我们最初打包的jar吗，那个不能直接传到云服务启动，因为我们还没有修改数据库的地址，我们要先修改地址，然后重新package，除此还要在云服务器中的mysql建立相同的数据库表，该步可以通过native等sql数据库操作工具进行远程操作。

在这里插入图片描述

最好再次在本地进行启动，防止发生错误，运行成功后就可以进行项目打包了。我们把jar包通过Xftp传到云服务器，然后进行启动。

在这里插入图片描述

2、部署

我们可以在usr/local/目录下新建一个jar文件夹，在存放我们的后端程序。

在这里插入图片描述

然后切换到该目录进行jar的启动,只要配置了JDK环境，就可以一次编译，到处运行了，在这里是不是深有体会。

java -jar back_76pl-0.0.1-SNAPSHOT.jar

在这里插入图片描述

但是我们是直接通过java启动的，而关闭xshell后会关闭调该命令终端。我们需要让jar在后台运行，我们通过以下命令使其在后台运行

nohup java -jar back_76pl-0.0.1-SNAPSHOT.jar >nohup.out &

nohup：加在一个命令的最前面，表示不挂断的运行命令。
&：加在一个命令的最后面，表示这个命令放在后台执行。

输入jobs查看正在后台运行的作业

jobs

在这里插入图片描述

这样，我们的jar就能在云服务器后台运行了，tomcat也会存在类似问题，我们需要修改连接属性，我们进入Xshell取消X11转移即可。

在这里插入图片描述

四、VUE前端部署

1、打包

同理，打包之前我们需要去改变每一个axios请求路径的IP地址为云服务器的公网IP地址。同样现在本地启动项目，查看是否运行成功。

我们在Vue项目所在文件夹中输入以下指令进行打包，在打包前我们要确保我们的图片和文件路径名或文件名中不能含有中文，不然后导致文件丢失，不能完全打包。

npm run build

在这里插入图片描述

2、部署

我们通过Xftp，直接将dist文件复制到/usr/local/tomcat/apache-tomcat-8.5.77/webapps目录下，然后将ROOT删除，将dist重命名为ROOT，启动Tomcat，便可以直接通过IP访问了（默认为8080端口）。

在这里插入图片描述

3、刷新报错

这样部署以后，虽然可以通过公网IP:8080进行访问，但是我们会发现点击刷新以后，会出现404NotFound错误。

在webapp里面的项目所在统计目录下，新建一个WEB-INF文件夹，添加web.xml文件，在里面添加内容：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    version="3.1" metadata-complete="true">
    <display-name>Router for Tomcat</display-name>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

在这里插入图片描述

这样访问页面时进行刷新就不会404 Not Found啦！

五、通过域名访问

如果你没有购买域名，那可以直接通过公网IP地址访问：

在这里插入图片描述

但是我购买了域名，我们来配置以下域名与服务器地址绑定，这里使用的腾讯云。

进入【我的域名-解析】

在这里插入图片描述

点击【快速添加解析】

在这里插入图片描述

点击确定，即可，但是解析以后我们要通过www.76pl.com:8080来访问我的网站，如何去掉:8080呢。因为HTTP默认访问地址为80，HTTPS默认访问地址为433。我们这里将Tomcat的端口地址改为80即可。

我们进入文件夹/usr/local/tomcat/apache-tomcat-8.5.77/conf，找到server.xml文件，进入修改。

vim server.xml

在这里插入图片描述

点击ESC，:wq进行保存，这样我们就可以直接通过域名访问我的网站，就不用加8080啦。

在这里插入图片描述

六、最后

未来村村长个人博客：www.76pl.com，后续将推出网站源码以及编写过程！！！

👨‍🌾点个关注，在未来村不会迷路👩‍🌾

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^