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

内容如下

stages:- install- build- packagevariables:# 镜像名称和标签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: installimage: node:$NODE_VERSIONscript:- npm install --registry=https://registry.npmmirror.com --legacy-peer-deps # 使用国内镜像加速only:- dev- master- tagsartifacts:paths:- node_modules/# 阶段2：构建生产环境代码
build_prod:stage: buildimage: node:$NODE_VERSIONscript:- npm run build # 使用更新后的构建命令artifacts:paths:- dist/ # 传递dist目录到后续阶段only:- dev- master- tags# 阶段3：构建和推送Docker镜像
docker_build:stage: packageimage: docker:20.10services:- docker:20.10-dindvariables:DOCKER_BUILDKIT: 1before_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" ]]; thendocker tag "$REGISTRY_URL/$IMAGE_NAME:$IMAGE_TAG" "$REGISTRY_URL/$IMAGE_NAME:latest";docker push "$REGISTRY_URL/$IMAGE_NAME:latest";firules:- if: $CI_COMMIT_BRANCH == "dev" || $CI_COMMIT_BRANCH == "master" || $CI_COMMIT_TAG

2.2 Dockerfile 内容

内容如下

FROM nginx
EXPOSE 80 443COPY 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