【GitLab/CD】前端 CD

前端 CD（持续部署） + Nginx 服务器 + Docker 部署的整体流程

🏗️ 全局架构

flowchart LR Dev[开发 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

dockerfile 复制代码

# ===== Build Stage =====
FROM node:18 AS build
WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci

COPY . .
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/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

重点：使用两阶段构建避免把 node_modules 打包到最终镜像。

🧱 第二步：Nginx 配置

nginx.conf

nginx 复制代码

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

yaml 复制代码

stages:
  - build
  - deploy

variables:
  # 镜像名：GitLab 内置 Registry
  IMAGE_TAG: $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA

cache:
  paths:
    - node_modules/

# -------- CI: 构建镜像 --------
build:
  stage: build
  image: docker:latest
  services:
    - docker:dind
  script:
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
    - docker build -t $IMAGE_TAG .
    - docker push $IMAGE_TAG
  only:
    - master

# -------- CD: 部署到服务器 --------
deploy:
  stage: deploy
  image: alpine:latest
  before_script:
    - apk add --no-cache openssh-client
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" | tr -d '\r' > ~/.ssh/id_rsa
    - chmod 600 ~/.ssh/id_rsa
  script:
    - 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

bash 复制代码

curl -fsSL https://get.docker.com | bash

✅ 允许 docker 开机启动

bash 复制代码

systemctl enable docker
systemctl start docker

✅ 为 GitLab CI 提供 SSH 权限（复制公钥到服务器）

bash 复制代码

cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys

🔄 部署流程（自动化）

本地 push：

bash 复制代码

git push origin master

GitLab Pipeline 自动执行：

CI：构建、编译、生成静态资源
CI：构建 Docker 镜像 & push 到镜像仓库
CD：服务器 docker pull 拉新镜像
CD：重启容器 → 新版本上线 ✅

完全不用手动登录服务器。