Vue + Spring Boot 前后端分离项目部署笔记（若依 RuoYi-Vue 3.9.2）

一、环境准备

服务器：Ubuntu Server 24.04.4 LTS

系统版本：RuoYi v3.9.2、Spring Boot 4.0.6、Vue 2

后端依赖：OpenJDK 17、Maven 3.0+、MySQL 5.7、Redis 8.10.0

前端依赖：node.js 24.13.0 、npm 11.6.2

Web服务器：Nginx

二、下载项目源码

仓库地址：https://gitee.com/y_project/RuoYi-Vue

bash 复制代码

git clone https://gitee.com/y_project/RuoYi-Vue.git

三、准备MySQL数据库

1、创建数据库

bash 复制代码

CREATE DATABASE `ry-vue`
CHARACTER SET utf8mb4
COLLATE utf8mb4_general_ci;

2、创建专用用户并授权

在MySQL中执行：

bash 复制代码

CREATE USER 'ruoyi'@'localhost' IDENTIFIED BY 'ruoyi123';
GRANT ALL PRIVILEGES ON `ry-vue`.* TO 'ruoyi'@'localhost';
FLUSH PRIVILEGES;

3、导入sql文件

项目中有两个 SQL 文件：ry_20260417.sql若依主业务表、 quartz.sql定时任务表，两个文件都导入上面创建的ry-vue数据库

把文件上传到服务器目录：

bash 复制代码

/data/ruoyi/sql/ry_20260417.sql
/data/ruoyi/sql/quartz.sql

导入 SQL：

bash 复制代码

mysql -uruoyi -p 'ry-vue' < /data/ruoyi/sql/ry_20260417.sql
mysql -uruoyi -p 'ry-vue' < /data/ruoyi/sql/quartz.sql

4、检查数据库表

登录数据库

bash 复制代码

mysql -uruoyi -p

选择数据库：

mysql 复制代码

USE ry-vue;

查看表：

mysql 复制代码

SHOW TABLES;

看到以上内容说明数据库已成功导入！

四、修改后端数据库配置

1、修改MySQL连接信息

MySQL数据库配置文件：ruoyi-admin/src/main/resources/application-druid.yml

配置说明：

127.0.0.1：MySQL 在当前服务器

3306：MySQL 端口

ry-vue：数据库名称

ruoyi：数据库用户名

数据库密码：ruoyi123

2、修改Redis连接信息

Redis配置文件：ruoyi-admin/src/main/resources/application.yml

五、修改文件上传路径

后端上传目录配置为 Linux 路径：

六、打包后端并部署

1、打包后端

在项目根目录进行打包（根目录是包含 pom.xml 的目录），我们直接在 IDEA 的 Maven 面板中双击【package】

成功后应看到：BUILD SUCCESS

生成文件通常在：ruoyi-admin/target/ruoyi-admin.jar

2、上传jar包到服务器

我们将ruoyi-admin.jar上传到服务器的/data/ruoyi/backend/ruoyi-admin.jar

3、手动启动后端测试

bash 复制代码

cd /data/ruoyi/backend
java -jar ruoyi-admin.jar

测试后端：

bash 复制代码

curl http://127.0.0.1:8080
#正常返回：欢迎使用RuoYi后台管理框架，当前版本：v3.9.2，请通过前端地址访问。

这说明Java 、Spring Boot 、MySQL 连接、Redis 连接、后端端口都正常

bash 复制代码

#停止前台进程
Ctrl + C

4、配置 systemd 后台服务

创建服务文件：

bash 复制代码

vim /etc/systemd/system/ruoyi.service

写入：

bash 复制代码

[Unit]
Description=RuoYi Backend
After=network.target mysql.service redis-server.service

[Service]
User=root
WorkingDirectory=/data/ruoyi/backend
ExecStart=/usr/bin/java -Xms256m -Xmx1024m -jar /data/ruoyi/backend/ruoyi-admin.jar
Restart=always
RestartSec=5

[Install]
WantedBy=multi-user.target

保存后执行：

bash 复制代码

systemctl daemon-reload
systemctl enable ruoyi
systemctl start ruoyi
systemctl status ruoyi

当前后端已经设置为后台运行、开机自启了。

七、打包前端并部署

1、打包前端

进入前端目录\RuoYi-Vue\ruoyi-ui，执行以下指令：

bash 复制代码

npm install   #安装依赖

npm run build:prod   #执行打包预计返回： DONE  Build complete. The dist directory is ready to be deployed.

打包完成后会生成dist文件夹

2、上传前端文件

服务器创建目录：

bash 复制代码

mkdir -p /data/ruoyi/www/ruoyi

将本地dist文件夹中的内容全部上传到该目录下

八、配置NGINX

修改nginx.conf，写入以下内容

nginx 复制代码

server {
    listen 80;
    server_name _;  #可以填你的域名

    root /data/ruoyi/www/ruoyi;
    index index.html;

    # Vue 前端页面
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 代理若依后端接口
    location /prod-api/ {
        proxy_pass http://127.0.0.1:8080/;

        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 文件上传大小
    client_max_body_size 100m;
}

重载 Nginx：

bash 复制代码

nginx -t
nginx -s reload

九、浏览器访问

在浏览器中访问 http://服务器IP ，成功打开若依登录界面，并且成功登录