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