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 小时前
Vue3核心语法进阶(computed与监听)
前端·javascript·vue.js
I'mxx12 小时前
【vue(2)插槽】
javascript·vue.js
花菜会噎住12 小时前
Vue3核心语法基础
前端·javascript·vue.js·前端框架
练习前端两年半14 小时前
Vue3 源码深度剖析:有状态组件的渲染机制与生命周期实现
前端·vue.js
533_16 小时前
[vue3 echarts] echarts 动态数据更新 setInterval
vue.js·echarts
jstart千语17 小时前
【vue】创建响应式数据ref和reactive的区别
前端·javascript·vue.js
盗德17 小时前
Vue渲染引擎的范式革命:从虚拟DOM到Vapor模式
前端·vue.js
Dolphin_海豚19 小时前
vapor 的 IR 是如何被 generate 到 render 函数的
前端·vue.js·vapor
初遇你时动了情19 小时前
JS中defineProperty/Proxy 数据劫持 vue3/vue2双向绑定实现原理,react 实现原理
javascript·vue.js·react.js
Allen正心正念202520 小时前
GitLab 中的分支和标签的定义及操作
gitlab