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

相关推荐
湖边看客1 小时前
antd x6 + vue3
开发语言·javascript·vue.js
Cassie燁2 小时前
element-plus源码解读1——useNamespace
前端·vue.js
询问QQ:276998852 小时前
基于手肘法的kmeans聚类数在Matlab中的精确识别:风电与光伏功率分析
gitlab
一念一花一世界3 小时前
DevOps实战(11) - 使用Arbess+Hadess实现下载制品进行主机部署
ci/cd·jar·devops·arbess·hadess
Cassie燁3 小时前
el-button源码解读1——为什么组件最外层套的是Vue内置组件Component
前端·vue.js
北极糊的狐3 小时前
Vue3 子组件修改父组件传递的对象并同步的方法汇总
前端·javascript·vue.js
一 乐5 小时前
餐厅管理智能点餐系统|基于java+ Springboot的餐厅管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端
北极糊的狐5 小时前
父组件向子组件传参时,传递数组和对象类型的参数的方法
前端·javascript·vue.js
一念一花一世界6 小时前
Arbess零基础学习 - 使用Arbess+soular实现统一认证登录
ci/cd·arbess·统一登录
爱泡脚的鸡腿7 小时前
uni-app D6 实战(小兔鲜)
前端·vue.js