ᕕ( ᐛ )ᕗ DawnStar's Blog

在这篇文章，我将从头把一个Springboot Vue3项目打包、部署到腾讯云服务器，操作系统是Ubuntu。 在这个过程中，需要安装tmux（用于终端复用，也就是相当于多开几个屏），Vim（编辑器），JDK17，Nginx（前端部署在Nginx服务器上），MySQL，Redis（缓存数据库）。 其中会用到两个软件，puTTY（用于登录云服务器），FileZilla（用于从当前电脑向云服务器上传文件）。

1 安装tmux,Vim

sudo apt update
sudo apt install tmux
sudo apt install vim

常用命令可以参考：

东方既白：Linux基础3-tmux和vim0 赞同 · 0 评论文章

2 安装JDK17

apt-cache search openjdk               // 查找apt中JDK版本
sudo apt-get install openjdk-17-jdk    // 安装JDK17
java --version                         // 检查JDK是否安装成功
sudo update-alternatives --config java // 查看JDK安装到什么地方，配置环境时使用


//-------------------------------------------
// 以下可选，用于设置环境变量
sudo vim /etc/profile
// 在/etc/profile文件的末尾添加以下内容
JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64      // 根据上面查看到的路径
PATH=$PATH:$HOME/bin:$JAVA_HOME/bin
export JAVA_HOME
export JRE_HOME
export PATH

3 安装Redis（没使用到则跳过）

sudo apt install redis-server           // 安装
sudo systemctl status redis-server      // 检查服务的状态  active(running)

4 安装MySQL

sudo apt install mysql-server          // 安装
mysql --version                        // 确定mysql版本为8.0.xx

img

MySQL版本8.0.36

sudo passwd                           // 设置密码

img

设置密码

img

使用密码登录，发现权限不足

解决办法：

$ sudo mysql -u root # I had to use "sudo" since is new installation

mysql> USE mysql;
mysql> UPDATE user SET plugin='mysql_native_password' WHERE User='root';
mysql> FLUSH PRIVILEGES;
mysql> alter user 'root'@'localhost' identified with mysql_native_password by '密码';
mysql> exit;

$ service mysql restart

img

成功解决

5 安装Nginx

sudo apt install nginx             // 安装
sudo systemctl status nginx        // 检测是否在运行

nginx部分命令

systemctl start nginx              // 启动
systemctl stop nginx               // 停止
systemctl quit nginx               // 退出
systemctl restart nginx            // 重启
systemctl reload nginx             // 重新加载 当你修改配置文件后可以使用此命令，使修改生效
systemctl status nginx             // 查看服务状态

img

输入IP，可看到此页面，说明安装成功

该HTML页面在服务器的/var/www/html目录下，之后会用到。

img

源文件位置

现在，我们已经安装好所有环境，准备开始部署项目。

6 部署后端

点击package完成打包。打包之前记得修改需要修改的配置信息。

img

添加图片注释，不超过 140 字（可选）

img

添加图片注释，不超过 140 字（可选）

img

添加图片注释，不超过 140 字（可选）

使用FileZilla将得到的Jar包传到服务器。

img

先连接服务器，找到文件夹，从左面拖到右面即可

运行后端：

java -jar  xxxxx.jar

img

后端启动成功

7 数据库建表

7.1 IDEA生成数据库脚本

img

依次点击

img

右上角复制

7.2 服务器建库，运行脚本

mysql -u root -p               // 连接数据库
    
create database repair;
use dawnblog;
// 执行数据库脚本
// 粘贴，回车
exit;

8 部署前端

8.1 打包

我们使用Vue UI，任务->build，完成前端的打包。

img

打包

img

打包后的文件，在dist目录下

8.2 上传

img

将整个dist文件夹上传到服务器

8.3 移动文件夹位置

sudo mv ~/dist /var/www                    // 移到/var/www目录下
sudo rm -rf /var/www/html                  // 删除原来的html文件夹
sudo mv /var/www/dist /var/www/html        // 改文件名
systemctl restart nginx                    // 重启nginx

img

此时访问，可能会出现404

解决办法：

cd /etc/nginx/sites-enabled/
sudo vim default

try_files  $uri $uri/ /index.html;

// -----------------------------------
location /api {
    rewrite ^/api/(.*)$ /$1 break;
    proxy_pass http://111.111.11.111:8080;
}

img

#注释掉红色箭头所指的一行，添加蓝色箭头一行
systemctl reload nginx           // 重新加载配置

img

添加图片注释，不超过 140 字（可选）

部署成功！