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

相关推荐
Varpb41 分钟前
【vue】【环境配置】项目无法npm run serve,显示node版本过低
前端·vue.js·npm
Minyy111 小时前
Vue3指令(二)--v-text、v-html数据渲染,计算属性
前端·javascript·vue.js·前端框架·vue·html
工业互联网专业3 小时前
基于springboot+vue的机场乘客服务系统
java·vue.js·spring boot·毕业设计·源码·课程设计·机场乘客服务系统
inksci3 小时前
Vue 3 打开 el-dialog 时使 el-input 获取焦点
前端·javascript·vue.js
绝美焦栖6 小时前
vue复杂数据类型多层嵌套的监听
前端·javascript·vue.js
.生产的驴7 小时前
Vue3 加快页面加载速度 使用CDN外部库的加载 提升页面打开速度 服务器分发
运维·服务器·前端·vue.js·分布式·前端框架·vue
我是Superman丶10 小时前
【技巧】前端VUE用中文方法名调用没效果的问题
前端·javascript·vue.js
斯~内克10 小时前
Vue 3 中 watch 的使用与深入理解
前端·javascript·vue.js
松树戈14 小时前
plus-ui&RuoYi-Vue-Plus 基于pgSql本地运行实践
前端·vue.js·spring boot·ui