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.2Web服务器Nginx二、下载项目源码仓库地址https://gitee.com/y_project/RuoYi-Vuegitclone https://gitee.com/y_project/RuoYi-Vue.git三、准备MySQL数据库1、创建数据库CREATE DATABASEry-vueCHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;2、创建专用用户并授权在MySQL中执行CREATEUSERruoyilocalhostIDENTIFIED BYruoyi123;GRANT ALL PRIVILEGES ONry-vue.* TOruoyilocalhost;FLUSH PRIVILEGES;3、导入sql文件项目中有两个 SQL 文件ry_20260417.sql若依主业务表 、quartz.sql定时任务表两个文件都导入上面创建的ry-vue数据库把文件上传到服务器目录/data/ruoyi/sql/ry_20260417.sql /data/ruoyi/sql/quartz.sql导入 SQLmysql-uruoyi-pry-vue/data/ruoyi/sql/ry_20260417.sql mysql-uruoyi-pry-vue/data/ruoyi/sql/quartz.sql4、检查数据库表登录数据库mysql-uruoyi-p选择数据库USE ry-vue;查看表SHOW TABLES;看到以上内容说明数据库已成功导入四、修改后端数据库配置1、修改MySQL连接信息MySQL数据库配置文件ruoyi-admin/src/main/resources/application-druid.yml配置说明127.0.0.1MySQL 在当前服务器3306MySQL 端口ry-vue数据库名称ruoyi数据库用户名数据库密码ruoyi1232、修改Redis连接信息Redis配置文件ruoyi-admin/src/main/resources/application.yml五、修改文件上传路径后端上传目录配置为 Linux 路径六、打包后端并部署1、打包后端在项目根目录进行打包根目录是包含pom.xml的目录我们直接在 IDEA 的 Maven 面板中双击【package】成功后应看到BUILD SUCCESS生成文件通常在ruoyi-admin/target/ruoyi-admin.jar2、上传jar包到服务器我们将ruoyi-admin.jar上传到服务器的/data/ruoyi/backend/ruoyi-admin.jar3、手动启动后端测试cd/data/ruoyi/backendjava-jarruoyi-admin.jar测试后端curlhttp://127.0.0.1:8080#正常返回欢迎使用RuoYi后台管理框架当前版本v3.9.2请通过前端地址访问。这说明Java 、Spring Boot 、MySQL 连接、Redis 连接、后端端口都正常#停止前台进程Ctrl C4、配置 systemd 后台服务创建服务文件vim/etc/systemd/system/ruoyi.service写入[Unit]DescriptionRuoYi BackendAfternetwork.target mysql.service redis-server.service[Service]UserrootWorkingDirectory/data/ruoyi/backendExecStart/usr/bin/java-Xms256m-Xmx1024m-jar/data/ruoyi/backend/ruoyi-admin.jarRestartalwaysRestartSec5[Install]WantedBymulti-user.target保存后执行systemctl daemon-reload systemctlenableruoyi systemctl start ruoyi systemctl status ruoyi当前后端已经设置为后台运行、开机自启了。七、打包前端并部署1、打包前端进入前端目录\RuoYi-Vue\ruoyi-ui执行以下指令npminstall#安装依赖npmrun build:prod#执行打包预计返回 DONE Build complete. The dist directory is ready to be deployed.打包完成后会生成dist文件夹2、上传前端文件服务器创建目录mkdir-p/data/ruoyi/www/ruoyi将本地dist文件夹中的内容全部上传到该目录下八、配置NGINX修改nginx.conf写入以下内容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; }重载 Nginxnginx-tnginx-sreload九、浏览器访问在浏览器中访问 http://服务器IP 成功打开若依登录界面并且成功登录