手动部署RuoYi前后端分离项目

2022-10-10 本文已影响0人 simplehych

RuoYi文档地址：http://doc.ruoyi.vip
前后端不分离项目地址：https://gitee.com/y_project/RuoYi（前端代码位于 src/main/resources/templates）
前后端分离项目地址：https://gitee.com/y_project/RuoYi-Vue （此前端代码位于 /ruoyi-ui 为vue2版本，vue3版本前端地址：https://github.com/yangzongzhuan/RuoYi-Vue3）

1. 后端项目

1.1 环境准备

JDK、MySQL、Redis、Maven

1.2 运行

创建数据库ry-vue并导入数据脚本ry_2021xxxx.sql，quartz.sql
打开项目运行com.ruoyi.RuoYiApplication.java，出现 (♥◠‿◠)ﾉﾞ若依启动成功 ლ(´ڡლ)ﾞ ` 表示启动成功。
验证 http://localhost:8080

配置文件位于：src/main/resources/application.yml (application-druid.yml)

其中如下地址需要注意：

# src/main/resources/application.yml
# 文件路径 示例（ Windows配置D:/ruoyi/uploadPath，Linux配置 /home/ruoyi/uploadPath）
  profile: /home/ruoyi/uploadPath

# src/main/resources/logback.xml
<!-- 日志存放路径 -->
<property name="log.path" value="/home/ruoyi/logs" />

1.3 打包

执行 /bin/package.bat 脚本或 mvn clean package -Dmaven.test.skip=true 命令
生成包位置 /ruoyi-admin/target/ruoyi-admin.jar

主模块 ruoyi-admin，依赖其他模块，如ruoyi-framework、ruoyi-common等，打包时其他模块同理打出jar包供主模块依赖

可修改打包方式为 war/jar，位置 /ruoyi-admin/pom.xml文件中的 <packaging>jar</packaging>

1.4 部署运行

上传至服务器目标位置
执行命令运行 java -jar ruoyi-admin.jar
验证，服务器终端 curl 127.0.0.1:8080 或浏览器打开服务器对应地址+端口验证，注意端口占用，默认是8080端口

2. 前端项目

2.1 环境准备

Node、Nginx（部署使用）

2.2 运行

yarn install
yarn dev

根据执行日志提示对应的网址打开验证，默认地址是http://localhost:80，默认账户/密码 admin/admin123

2.3 打包

yarn build:prod
生成位置 /dist 文件夹，里面就是构建打包好的文件，通常是 .js 、.css、index.html 等静态文件。

打包配置位于 /vite.config.js 或 /vue.config.js，依赖打包工具不同
其中如下配置需要注意：

// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
    base: VITE_APP_ENV === 'production' ? '/' : '/',

2.4 部署

放置服务器上，请求地址的端口和后端项目端口不一致，导致接口请求失败

使用Nginx 服务器转发

配置/usr/local/etc/nginx/nginx.conf

http {
    
    server {
        listen     80; # 1 设置 Nginx 监听的端口
        #root /your_custom_directory; # 2 此处定义Nginx的根路径，或下方也可

        location / {
            root   /your_custom_directory; # 2 同上
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        
        location /prod-api/ { # 3 对 域名+/prod-api/ 的请求进行转发
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8080/; # 4 转发到目标地址
        }
    }

    # 其他监听配置
    server {
        listen 8080;
        ...
    }
}

将打包生成的 dist 文件夹放到配置的 /your_custom_directory 的目录下（可额外新建子目录）
验证，注意请求Nginx的端口，在请求接口 /prod-api 就会转到目标地址，否则会请求不到

java 项目 8080
前端项目用 Nginx 的目录下然后转发到8080端口
本地可以修改 Nginx 的 location 的根目录
前端访问地址统一用 Nginx 的端口，这样 vue项目请求接口就能请求到java项目了

自动部署

使用Jenkins实现打包、发布、部署
同时使用docker镜像+Registry（harbor）
k8s 编排容器
https://blog.csdn.net/weixin_54202028/article/details/125989942

Springboot整合MongoDB的Docker开发，其它应用也类似

微软Docker微服务开发流程
『中级篇』 Docker Bridge详解（26）
『中级篇』 docker容器之间的Link（27）