RuoYi-Vue3项目部署与运维

【免费下载链接】RuoYi-Vue3 🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统 【免费下载链接】RuoYi-Vue3 项目地址: https://gitcode.com/yangzongzhuan/RuoYi-Vue3

本文详细介绍了RuoYi-Vue3项目的环境配置、Docker部署、CI/CD集成、监控日志管理以及性能调优与安全加固等内容。从开发与生产环境的不同配置，到通过Docker实现容器化部署，再到结合GitHub Actions或Jenkins实现自动化CI/CD流程，全面覆盖了项目部署与运维的各个环节。此外，还深入讲解了系统的监控日志功能和性能安全优化策略，为项目的高效稳定运行提供了完整解决方案。

开发环境与生产环境配置

在RuoYi-Vue3项目中，开发环境与生产环境的配置是通过Vite的环境变量和配置文件实现的。以下将详细介绍如何配置和管理这两种环境，以确保项目在不同阶段的高效运行。

环境变量配置

RuoYi-Vue3使用Vite作为构建工具，环境变量通过.env文件管理。项目根目录下通常包含以下文件：

  • .env：默认环境变量文件
  • .env.development：开发环境变量文件
  • .env.production：生产环境变量文件
示例配置
# .env.development
VITE_APP_TITLE = RuoYi-Vue3 (开发环境)
VITE_APP_BASE_API = /dev-api

# .env.production
VITE_APP_TITLE = RuoYi-Vue3
VITE_APP_BASE_API = /prod-api
关键变量说明
变量名 说明 开发环境值 生产环境值
VITE_APP_TITLE 应用标题 RuoYi-Vue3 (开发环境) RuoYi-Vue3
VITE_APP_BASE_API API基础路径 /dev-api /prod-api

代码中的使用

在代码中，可以通过import.meta.env访问这些环境变量。例如：

// 获取应用标题
const title = import.meta.env.VITE_APP_TITLE;

// 获取API基础路径
const baseUrl = import.meta.env.VITE_APP_BASE_API;

构建命令

Vite提供了不同的构建命令来区分环境：

# 开发环境启动
yarn dev

# 生产环境构建
yarn build:prod

# 测试环境构建
yarn build:stage

动态配置示例

以下是一个动态配置API请求的示例：

// src/utils/request.js
import axios from "axios";

const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 5000,
});

export default service;

流程图：环境切换流程

mermaid

注意事项

  1. 敏感信息：避免在.env文件中存储敏感信息（如数据库密码），建议使用服务器环境变量。
  2. 变量命名：环境变量必须以VITE_开头，否则Vite不会将其暴露给客户端代码。
  3. 缓存问题：修改环境变量后，可能需要重启开发服务器或重新构建。

通过以上配置，可以轻松管理RuoYi-Vue3项目的开发与生产环境，确保代码在不同环境中的一致性和可靠性。

Docker部署与CI/CD集成

RuoYi-Vue3作为一个现代化的前后端分离项目，支持通过Docker容器化部署，并可以轻松集成到CI/CD流程中，实现自动化构建、测试和部署。以下将详细介绍如何通过Docker部署RuoYi-Vue3，并结合CI/CD工具（如GitHub Actions或Jenkins）实现持续集成与持续交付。

Docker部署

1. 构建Docker镜像

首先，确保项目根目录下已准备好Dockerfile文件。以下是一个典型的Dockerfile示例：

# 使用官方Node镜像作为构建环境
FROM node:16-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 使用Nginx作为运行时环境
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
2. 构建并运行容器

执行以下命令构建Docker镜像并运行容器：

# 构建镜像
docker build -t ruoyi-vue3 .

# 运行容器
docker run -d -p 8080:80 --name ruoyi-vue3-container ruoyi-vue3
3. 验证部署

访问http://localhost:8080，确认应用正常运行。

CI/CD集成

1. GitHub Actions

以下是一个简单的GitHub Actions工作流示例，用于自动化构建和部署：

name: CI/CD Pipeline

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Build Docker image
        run: docker build -t ruoyi-vue3 .
      - name: Log in to container registry
        run: echo "${{ secrets.REGISTRY_TOKEN }}" | docker login -u ${{ secrets.REGISTRY_USERNAME }} --password-stdin
      - name: Push Docker image
        run: |
          docker tag ruoyi-vue3 ${{ secrets.REGISTRY_USERNAME }}/ruoyi-vue3:latest
          docker push ${{ secrets.REGISTRY_USERNAME }}/ruoyi-vue3:latest
      - name: Deploy to server
        run: |
          ssh ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} "docker pull ${{ secrets.REGISTRY_USERNAME }}/ruoyi-vue3:latest && docker stop ruoyi-vue3-container || true && docker rm ruoyi-vue3-container || true && docker run -d -p 8080:80 --name ruoyi-vue3-container ${{ secrets.REGISTRY_USERNAME }}/ruoyi-vue3:latest"
2. Jenkins

若使用Jenkins，可以配置以下步骤：

  1. 拉取代码：从Git仓库拉取最新代码。
  2. 构建镜像：执行docker build命令。
  3. 推送镜像：将镜像推送到容器仓库。
  4. 部署到服务器：通过SSH连接到目标服务器，拉取镜像并运行容器。

流程图示例

以下是一个简化的CI/CD流程示意图：

mermaid

表格：CI/CD工具对比

工具 优点 缺点
GitHub Actions 与GitHub无缝集成，配置简单 仅适用于GitHub项目
Jenkins 支持多种插件，高度可定制 配置复杂，需额外维护服务器

通过以上步骤，您可以轻松实现RuoYi-Vue3的Docker化部署和CI/CD集成，提升开发和运维效率。

监控与日志管理

在RuoYi-Vue3项目中，监控与日志管理是系统运维的重要组成部分，涵盖了登录日志、操作日志、定时任务日志等多个模块。通过这些功能，管理员可以实时监控系统运行状态，及时发现并解决问题。以下将详细介绍这些功能的实现与使用方法。

1. 登录日志管理

登录日志模块记录了用户的登录行为，包括登录时间、登录地点、登录IP等信息。通过分析这些数据，可以识别异常登录行为，提升系统安全性。

核心功能
  • 查看登录记录：支持按时间、IP等条件筛选日志。
  • 批量删除：可清理过期或无用的日志记录。
  • 解锁用户：对于因多次失败登录被锁定的用户，管理员可手动解锁。
代码示例
<el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
<el-table-column label="登录时间" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
  <template #default="scope">
    <span>{{ parseTime(scope.row.loginTime) }}</span>
  </template>
</el-table-column>
流程图

mermaid

2. 操作日志管理

操作日志模块记录了用户的操作行为，如增删改查等。通过分析操作日志，可以追踪用户行为，便于审计和问题排查。

核心功能
  • 日志查询：支持按操作类型、时间范围等条件筛选。
  • 日志导出：可将日志导出为Excel文件。
  • 日志清理：支持批量删除或清理过期日志。
表格示例
字段名 描述 类型
operId 日志ID 数字
operTime 操作时间 日期时间
operUrl 操作URL 字符串
operParam 操作参数 字符串
代码示例
<el-dialog title="操作日志详细" v-model="open" width="800px" append-to-body>
  <el-form :model="form" label-width="100px">
    <el-form-item label="操作模块">{{ form.title }}</el-form-item>
    <el-form-item label="请求方式">{{ form.requestMethod }}</el-form-item>
  </el-form>
</el-dialog>

3. 定时任务日志

定时任务日志模块记录了系统定时任务的执行情况，包括任务名称、执行时间、执行结果等。通过分析这些日志，可以优化任务调度策略。

核心功能
  • 任务执行记录：查看任务的执行状态（成功/失败）。
  • 任务详情：查看任务的详细执行日志。
  • 日志导出：支持将任务日志导出为Excel文件。
状态图

mermaid

代码示例
<el-dialog title="调度日志详细" v-model="open" width="700px" append-to-body>
  <el-form :model="form" label-width="100px">
    <el-form-item label="任务名称">{{ form.jobName }}</el-form-item>
    <el-form-item label="执行结果">{{ form.status === '0' ? '成功' : '失败' }}</el-form-item>
  </el-form>
</el-dialog>

4. 在线用户监控

在线用户模块实时显示当前登录系统的用户信息，包括登录IP、登录时间等。管理员可通过此功能强制下线异常用户。

核心功能
  • 实时监控：显示当前在线用户列表。
  • 强制下线：可手动踢出指定用户。
代码示例
<el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
<el-table-column label="登录时间" align="center" prop="loginTime" width="180">
  <template #default="scope">
    <span>{{ parseTime(scope.row.loginTime) }}</span>
  </template>
</el-table-column>

通过以上功能，RuoYi-Vue3项目提供了全面的监控与日志管理能力，帮助管理员高效运维系统。

性能调优与安全加固

RuoYi-Vue3 是一个基于 SpringBoot 和 Vue3 的前后端分离快速开发框架，其高性能和安全性是项目运维中的关键点。本节将详细介绍如何通过性能调优和安全加固来提升 RuoYi-Vue3 的稳定性和安全性。

性能调优

1. 前端性能优化

RuoYi-Vue3 使用 Vite 作为构建工具，其天然支持按需加载和快速热更新。以下是一些前端性能优化的建议：

  • 代码拆分与懒加载
    通过动态导入 (import()) 实现路由懒加载，减少首屏加载时间。

    // 示例：动态导入路由组件
const User = () => import('@/views/system/user/index.vue');

  • 缓存策略
    利用浏览器缓存机制，对静态资源（如 JS、CSS、图片）设置合适的缓存头。

    mermaid

  • 减少 HTTP 请求
    合并小型静态资源文件，使用雪碧图或内联关键 CSS/JS。

2. 后端性能优化

  • 数据库查询优化
    使用索引、分页查询和缓存（如 Redis）减少数据库压力。

    -- 示例：为常用查询字段添加索引
CREATE INDEX idx_user_name ON sys_user(user_name);

  • 接口响应优化
    启用 Gzip 压缩，减少传输数据量。

    # 在 application.yml 中配置
server:
  compression:
    enabled: true
    mime-types: text/html,text/css,application/javascript

安全加固

1. 认证与授权

RuoYi-Vue3 内置了基于 Token 的认证机制，以下是一些安全加固建议：

  • 强密码策略
    强制用户使用复杂密码，并定期更换。

    // 示例：密码复杂度校验
const validatePassword = (password) => {
  return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(password);
};

  • 权限控制
    使用 @/directive/permission 实现细粒度的前端权限控制。

    <template>
  <button v-hasPermi="['system:user:edit']">编辑用户</button>
</template>
2. 防止常见攻击

  • XSS 防护
    使用 DOMPurify 对用户输入进行过滤。

    import DOMPurify from 'dompurify';
const clean = DOMPurify.sanitize(userInput);

  • CSRF 防护
    启用 CSRF Token 校验。

    # 在 application.yml 中配置
security:
  csrf:
    enabled: true
3. 日志与监控

  • 操作日志记录
    记录用户关键操作，便于审计。

    // 示例：记录操作日志
@Log(title = "用户管理", businessType = BusinessType.UPDATE)
public void updateUser(User user) {
  // 业务逻辑
}

  • 服务监控
    使用 RuoYi 内置的监控功能，实时查看系统状态。

    mermaid

通过以上措施，可以显著提升 RuoYi-Vue3 的性能和安全性，确保系统稳定运行。

【免费下载链接】RuoYi-Vue3 🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统 【免费下载链接】RuoYi-Vue3 项目地址: https://gitcode.com/yangzongzhuan/RuoYi-Vue3

Logo
EazyDevelop社区

一站式 AI 云服务平台

更多推荐

cover

5分钟搞定！MySQL/PostgreSQL 到 Elasticsearch 的实时同步

avatar EazyDevelop社区
cover

两小时，我搭了一套销售提成计算系统

avatar EazyDevelop社区
cover

零代码时代：如何利用聚合API平台快速构建你的专属AI Agent

avatar EazyDevelop社区