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 按钮即可:

相关推荐
我命由我1234532 分钟前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
海天胜景37 分钟前
vue3 当前页面方法暴露
前端·javascript·vue.js
天天向上10242 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
裁二尺秋风2 小时前
CI/CD — DevOps概念之实现k8s持续交付持续集成(一)
ci/cd·kubernetes·devops
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
写不出来就跑路3 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
1undefined24 小时前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
paopaokaka_luck4 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
用户3802258598245 小时前
vue3源码解析:依赖收集
前端·vue.js