18. SpringBoot+Vue项目部署上线

10109 字约 21 分钟读完2845 次阅读更新于 2026/5/3

学生优惠：
https://cloud.tencent.com/act/campus?from=19070

新人优惠：
https://cloud.tencent.com/act/pro/promotion-cvm?from=21290
image.png

怎么进入自己的服务器
image.png
image.png

root
Aa123456

下载 X-shell 和 Xftp 注意：必须从这个页面下载安装的才可以免费使用。
https://www.xshell.com/zh/free-for-home-school/

x-shell 创建链接
image.png
image.png

部署前准备

110.42.217.126

vue

新建文件 .env.development** **

VUE_APP_BASEURL='http://localhost:9090'

.env.production

VUE_APP_BASEURL='http://:9090'

main.js 设置全局变量$baseUrl

Vue.prototype.$baseUrl=process.env.VUE_APP_BASEURL

request.js

const request = axios.create({
    baseURL: process.env.VUE_APP_BASEURL,   // 后端的接口地址
    timeout: 30000
})

文件上传地址修改、导出地址修改，vue 工程全局搜索 localhost:9090 替换成 $baseUrl

:action="$baseUrl + '/file/upload'"
:action="$baseUrl + '/user/import'"

:action="$baseUrl + '/file/upload'"

打包
npm run build
image.png

SpringBoot

打包
mvn clean package

image.png

服务器

部署 java

创建文件夹：mkdir -p /home/server/honey2024
上传 jar 包到服务器 /home/server/honey2024/java 目录
设置 application.yml 覆盖

添加 启动和停止脚本
cd /home/server/honey2024/java
vi start.sh

NAME=springboot-0.0.1-SNAPSHOT.jar
nohup java -jar $NAME > server.log 2>&1 &
echo 'start success'

image.png
vi stop.sh

PORT=9090
pid=`netstat -tnlp | grep $PORT | grep -v grep | awk '{print $7}' | awk -F/ '{print $1}'`
if [ ${pid} ]; then
    kill -9 $pid
    echo "kill $PORT"
else
    echo 'stop sucess!'
fi

赋权 chmod +x *
image.png

去除脚本文件里的特殊符号（可选）

sed -i 's/\r//' start.sh
sed -i 's/\r//' stop.sh

完成后的目录文件：
image.png

部署 vue

上传 dist 文件夹到 /home/server/honey2024/vue
image.png

安装软件
从微信粉丝群获取软件安装包 然后上传到服务器的/tmp 目录下
软件：nginx、jdk、mysql
image.png

安装 jdk1.8

tar -zxvf /tmp/jdk-8u371-linux-x64.tar.gz -C /usr/local/
mv /usr/local/jdk1.8.0_371 /usr/local/java

vi /etc/profile

export JAVA_HOME=/usr/local/java
export PATH=$JAVA_HOME/bin:$PATH

source /etc/profile

# 验证
java -version

image.png

安装 nginx

安装库文件

#安装gcc
yum install gcc-c++

#安装PCRE pcre-devel
yum install -y pcre pcre-devel

#安装zlib
yum install -y zlib zlib-devel

#安装Open SSL
yum install -y openssl openssl-devel

解压、编译 nginx 并安装

mkdir /usr/local/nginx
tar -zxvf /tmp/nginx-1.24.0.tar.gz -C /usr/local/nginx

cd /usr/local/nginx/nginx-1.24.0
# 编译安装
./configure --with-http_stub_status_module --with-http_ssl_module
make && make install

image.png
nginx 命令

cd /usr/local/nginx/sbin
./nginx     # 启动

ps -ef | grep nginx  # 查看
./nginx -s stop      # 停止
./nginx -s reload    # 重启

ps -ef | grep nginx
image.png

访问：http://110.42.217.126/
image.png
nginx 配置

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   /home/server/honey2024/vue/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

配置完之后记得重启 nginx
执行命令重启：
**cd /usr/local/nginx/sbin **
./nginx -s reload

在 Manager 的 mouted 函数里加上这个判断即可 防止用户在未登录的情况下进入首页

mounted() {   // 页面加载完成之后触发
  if (!this.user.id) {   // 当前的浏览器没有用户信息
    this.$router.push('/login')
  }
},

改完之后，重新打包 vue 并上传到服务器。

安装 mysql

linux 系统会自动携带一个数据库，我们需要把它给卸载掉
通过以下代码可以查看 mariadb 并卸载

rpm -qa | grep mariadb
yum remove -y mariadb-connector-c-3.1.11-2.oc8.1.x86_64
yum remove -y mariadb-connector-c-config-3.1.11-2.oc8.1.noarch

下载 mysql 并 上传到 /tmp 目录
安装 mysql 命令：

mkdir /data/mysql
tar -zxvf /tmp/mysql-5.7.42-el7-x86_64.tar.gz -C /usr/local
mv /usr/local/mysql-5.7.42-el7-x86_64 /usr/local/mysql

# 添加用户组
groupadd mysql
useradd -r -g mysql mysql
chown -R mysql.mysql /usr/local/mysql
chown -R mysql.mysql /data/mysql


cd /usr/local/mysql
/usr/local/mysql/bin/mysqld --user=mysql --basedir=/usr/local/mysql/ --datadir=/data/mysql --initialize

#  将mysql加入到服务中
cp /usr/local/mysql/support-files/mysql.server /etc/init.d/mysql

# mysql快捷方式
ln -s  /usr/local/mysql/bin/mysql /usr/bin
ln -s /usr/lib64/libtinfo.so.6.1 /usr/lib64/libtinfo.so.5
ln -s /usr/lib64/libncurses.so.6.1 /usr/lib64/libncurses.so.5

image.png
记住临时密码 osGMitUO<56.

配置 mysql 配置文件 my.cnf
vi /etc/my.cnf

[mysqld]
datadir=/data/mysql
basedir=/usr/local/mysql
socket=/tmp/mysql.sock
user=mysql
port=3306
character-set-server=utf8
# 取消密码验证
# skip-grant-tables
# # Disabling symbolic-links is recommended to prevent assorted security risks
symbolic-links=0
[mysqld_safe]
log-error=/var/log/mysqld.log
pid-file=/var/run/mysqld/mysqld.pid

启动 mysql： **service mysql start **
image.png
开机启动: **chkconfig mysql on **
登录 mysql： **mysql -uroot -p **
输入临时密码进入 mysql

修改密码并设置权限：

SET PASSWORD = PASSWORD('123456');

use mysql;
update user set host ='%'where user ='root' and host ='localhost';
flush privileges;
exit;

使用 Navicat 连接 mysql
image.png
防火墙设置一下：
image.png

新建数据库：honey2024，导入数据库脚本。
image.png

启动后台程序

修改 application.yml 里面的 ip 为服务器的公网 IP
启动程序：

cd /home/server/honey2024/java
./start.sh

实时查看日志：tail -100f server.log
image.png

设置防火墙端口 9090
image.png

至此，全部完成，恭喜你！

浏览器访问：
http://121.4.123.248/
注册账号即可访问，管理员账号：admin admin
（测试服务器，谢绝压测）