gitlab+portainer 实现Ruoyi Vue后端CI/CD

1. 场景

最近整了一个Ruoyi Vue 项目,需要实现CICD,经过一番坎坷,最终达成,现将技术要点和踩坑呈现。

项目结构如下:

2. 项目配置

项目中需要配置两个文件:.gitlab-ci.yml,Dockerfile,都放在项目的根目录下,

注意: REGISTRY_URL: "harbor.xxxx.com/ics" 指向具体的仓库中的地址.

2.1 .gitlab-ci.yml

内容如下

bash 复制代码
stages:
  - build
  - package

variables:
  # 镜像名称和标签(根据需求修改)
  IMAGE_NAME: "ics-java"
  IMAGE_TAG: "$CI_COMMIT_SHORT_SHA"  # 使用 Git 提交哈希作为标签
  # 目标仓库地址(示例为 GitLab 内置仓库,私有仓库需替换)
  REGISTRY_URL: "harbor.xxxx.com/ics"

# 缓存 Maven 依赖加速构建
cache:
  paths:
    - .m2/repository

# 阶段 1:Maven 打包和测试
build:
  stage: build
  script:
    - mvn package
  artifacts:
    paths:
      - ics-server/target/*.jar  # 传递 JAR 文件到后续阶段

# 阶段 2:构建和推送 Docker 镜像
docker-build:
  stage: package
  # image: docker:20.10
  # services:
  #   - docker:20.10-dind  # 启用 Docker-in-Docker
  script:
    # 1. 登录镜像仓库(支持 GitLab 内置仓库或第三方仓库)
    # 服务器的 docker 始终是登录状态,下面一行就不需要了
    # - echo "$DOCKER_PASSWORD" | docker login --username "$DOCKER_USERNAME" --password-stdin "$DOCKER_REGISTRY"
    # 2. 构建镜像(使用多阶段 Dockerfile)
    - docker build -t "$REGISTRY_URL/$IMAGE_NAME:$IMAGE_TAG" .
    # 3. 推送镜像
    - docker push "$REGISTRY_URL/$IMAGE_NAME:$IMAGE_TAG"
    # 可选:额外推送 latest 标签
    - docker tag "$REGISTRY_URL/$IMAGE_NAME:$IMAGE_TAG" "$REGISTRY_URL/$IMAGE_NAME:latest"
    - docker push "$REGISTRY_URL/$IMAGE_NAME:latest"
  # 仅 main 分支或标签触发
  rules:
    - if: $CI_COMMIT_BRANCH == "master"
2.2 Dockerfile 内容

这里一定不要在Dockerfile 中对项目进行打包操作,Docker 会让你手动配置 COPY结构化的依赖pom.xml,Ruoyi 后端恰好是个多模块的树状结构,这很难,后续可能还有其他问题,请勿踩坑。

在.gitlab-ci.yml 中配置项目打包即可。

bash 复制代码
# 运行时阶段/这里有改动
FROM eclipse-temurin:8-jre
WORKDIR /app
COPY ics-server/target/*.jar ics-java.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "ics-java.jar"]

3. gitlab 仓库端

3.1 在这里配置 .gitlab-ci.yml 中的变量,变量可以继承。
3.2 构建成后的效果图

4. harbor.com 镜像仓库端

需要先新建一个项目:

推送成功效果和命令

5. Portainer 端

5.1 stack 配置 docker-compose
5.2 拉取镜像

注意镜像地址:

5.3 启动镜像,运行容器

具体的镜像与容器的操作在下面这个页面

如果 restart 没有反应,可以先 stop再remove,再去stack 中点击 update 按钮即可:

相关推荐
迅速的自行车11 小时前
从一段模板说起
前端·javascript·vue.js
千维百策66613 小时前
AI 编码智能体平台如何提升研发效能:从 CI 修复到工程工作流自动化
人工智能·ci/cd·自动化
阿奇__16 小时前
uniapp微信小程序图片上传含回显组件(拍照,相册)
前端·javascript·vue.js
前端甜糖17 小时前
前端如何实现在线预览office常见文件功能?
前端·vue.js
ljs64827395118 小时前
智慧商城(Smart Mall):基于 Spring Boot + Vue 3 的现代化电商平台实战
linux·vue.js·spring boot·后端
析数塔18 小时前
2026前端框架深度解析:React Compiler、Angular Zoneless、Vue 3.5重写游戏规则
前端·vue.js·react.js
paopaokaka_luck1 天前
英语单词学习系统的设计与实现(基于艾宾浩斯遗忘曲线的智能复习机制、语音朗读、多题型测试与错题自动收录、Echarts图形化分析)
vue.js·spring boot·后端·echarts
Momo__1 天前
Vite 8.1 打包开发模式——10000 组件冷启动 15 倍,"No Bundle Dev" 七年后被自己终结
前端·vue.js·vite
HUMHSX1 天前
Vue 组件通信核心知识点梳理
javascript·vue.js·ecmascript
妙码生花1 天前
从 PHP 到 AI + Golang,程序员自救转型手记(二十六):icon 组件封装
前端·vue.js·typescript