【GitLab/CD】前端 CD
前端 CD（持续部署） + Nginx 服务器 + Docker 部署 的整体流程
🏗️ 全局架构
flowchart LRDev[开发 push 代码到 GitLab] --> CI[GitLab CI: 构建前端产物]CI --> Image[构建 Docker 镜像]Image --> Registry[推送到镜像仓库(内置 GitLab Registry/阿里云/AWS ECR)]Registry --> Server[服务器 docker pull 拉取镜像]Server --> Container[容器运行 Nginx 服务]Container --> User[用户访问网站]
一句话说明：
持续部署 = CI 产物 → 打包成 Docker 镜像 → Nginx 容器托管静态资源。
project/
├─ Dockerfile
├─ nginx.conf
└─ .gitlab-ci.yml
相关配置
🧱 第一步：Dockerfile
Dockerfile 负责：
- 构建前端代码（stage1）
- 用 Nginx 运行（stage2）
Dockerfile
# ===== Build Stage =====
FROM node:18 AS build
WORKDIR /appCOPY package.json package-lock.json ./
RUN npm ciCOPY . .
RUN npm run build# ===== Run Stage =====
FROM nginx:stable-alpine
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist /usr/share/nginx/htmlEXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
重点：使用两阶段构建避免把 node_modules 打包到最终镜像。
🧱 第二步：Nginx 配置
nginx.conf
server {listen 80;server_name _;root /usr/share/nginx/html;index index.html;# 前端 history 模式（Vue/React/SPA 必备）location / {try_files $uri $uri/ /index.html;}
}
🧱 第三步：GitLab CI/CD 配置（自动构建 + 自动部署）
.gitlab-ci.yml
stages:- build- deployvariables:# 镜像名：GitLab 内置 RegistryIMAGE_TAG: $CI_REGISTRY_IMAGE:$CI_COMMIT_SHAcache:paths:- node_modules/# -------- CI: 构建镜像 --------
build:stage: buildimage: docker:latestservices:- docker:dindscript:- docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY- docker build -t $IMAGE_TAG .- docker push $IMAGE_TAGonly:- master# -------- CD: 部署到服务器 --------
deploy:stage: deployimage: alpine:latestbefore_script:- apk add --no-cache openssh-client- mkdir -p ~/.ssh- echo "$SSH_PRIVATE_KEY" | tr -d '\r' > ~/.ssh/id_rsa- chmod 600 ~/.ssh/id_rsascript:- ssh -o StrictHostKeyChecking=no $SERVER_USER@$SERVER_HOST "docker pull $IMAGE_TAG && docker stop web || true && docker rm web || true && docker run -d --name web -p 80:80 $IMAGE_TAG"only:- master
CI/CD Secrets（在 GitLab 设置）
GitLab → Project → Settings → CI/CD → Variables
| 变量名 | 用途 |
|---|---|
SSH_PRIVATE_KEY | Runner 通过 SSH 登录服务器 |
SERVER_HOST | 部署服务器 IP |
SERVER_USER | ssh 登录用户名 |
CI_REGISTRY_USER | GitLab 自动提供，用于镜像推送 |
CI_REGISTRY_PASSWORD | GitLab 自动提供，用于镜像推送 |
🖥️ 服务器操作（一次性）
✅ 安装 docker
curl -fsSL https://get.docker.com | bash
✅ 允许 docker 开机启动
systemctl enable docker
systemctl start docker
✅ 为 GitLab CI 提供 SSH 权限（复制公钥到服务器）
cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys
🔄 部署流程（自动化）
本地 push：
git push origin master
GitLab Pipeline 自动执行：
- CI：构建、编译、生成静态资源
- CI：构建 Docker 镜像 & push 到镜像仓库
- CD：服务器 docker pull 拉新镜像
- CD：重启容器 → 新版本上线 ✅
完全不用手动登录服务器。