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

1. 场景

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

具体操作流程和后端大同小异，后端操作参考连接如下：
https://blog.csdn.net/leinminna/article/details/147968082

前端项目结构及需要的文件：

2. 项目

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

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

2.1 .gitlab-ci.yml

内容如下

bash 复制代码

stages:
  - install
  - build
  - package

variables:
  # 镜像名称和标签
  IMAGE_NAME: "ics-web"
  IMAGE_TAG: "$CI_COMMIT_SHORT_SHA" # 使用 Git 提交哈希作为标签
  REGISTRY_URL: "harbor.zhcoal.com/ics" # 私有仓库地址
  NODE_VERSION: "16.20.2" # 指定Node.js版本

# 缓存 node_modules 加速构建
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/
    - dist/

# 阶段1：安装依赖
install_deps:
  stage: install
  image: node:$NODE_VERSION
  script:
    - npm install --registry=https://registry.npmmirror.com --legacy-peer-deps # 使用国内镜像加速
  only:
    - dev
    - master
    - tags
  artifacts:
    paths:
      - node_modules/

# 阶段2：构建生产环境代码
build_prod:
  stage: build
  image: node:$NODE_VERSION
  script:
    - npm run build # 使用更新后的构建命令
  artifacts:
    paths:
      - dist/ # 传递dist目录到后续阶段
  only:
    - dev
    - master
    - tags

# 阶段3：构建和推送Docker镜像
docker_build:
  stage: package
  image: docker:20.10
  services:
    - docker:20.10-dind
  variables:
    DOCKER_BUILDKIT: 1
  before_script:
    - echo "$DOCKER_PASSWORD" | docker login --username "$DOCKER_USERNAME" --password-stdin "$REGISTRY_URL"
  script:
    - mkdir docker-build-context
    - cp -r dist docker-build-context/
    - cp Dockerfile docker-build-context/
    - cp ics.crt docker-build-context/
    - cp ics.key docker-build-context/
    - cp default.conf docker-build-context/
    - cd docker-build-context
    - echo "构建上下文内容:"
    - ls -la
    - docker build -t "$REGISTRY_URL/$IMAGE_NAME:$IMAGE_TAG" .
    - docker push "$REGISTRY_URL/$IMAGE_NAME:$IMAGE_TAG"
    - if [[ "$CI_COMMIT_BRANCH" == "master" ]]; then
      docker tag "$REGISTRY_URL/$IMAGE_NAME:$IMAGE_TAG" "$REGISTRY_URL/$IMAGE_NAME:latest";
      docker push "$REGISTRY_URL/$IMAGE_NAME:latest";
      fi
  rules:
    - if: $CI_COMMIT_BRANCH == "dev" || $CI_COMMIT_BRANCH == "master" || $CI_COMMIT_TAG

2.2 Dockerfile 内容

内容如下

bash 复制代码

FROM nginx
EXPOSE 80 443

COPY ics.crt /etc/nginx/ssl/ics.crt
COPY ics.key /etc/nginx/ssl/ics.key
COPY dist /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d/default.conf

3. 其他同后台配置一样

参考：
https://blog.csdn.net/leinminna/article/details/147968082