前端Docker从构建到部署的CI/CD实践完全流程

FROM node:18
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
CMD ["npx", "serve", "-s", "dist", "-l", "3000"]

# ============================================
# Stage 1: 构建阶段
# ============================================
FROM node:18-alpine AS builder

WORKDIR /app

# 利用 Docker layer cache，先复制依赖描述文件
COPY package.json package-lock.json ./

# npm ci 比 npm install 更快且更严格（要求 package-lock.json 一致）
RUN npm ci --only=production && \
    cp -R node_modules /tmp/node_modules

# 然后安装全部依赖用于构建
RUN npm ci

# 复制源码
COPY . .

# 构建（以 KMS 的 web 端为例）
ARG BUILD_ENV=production
ENV NODE_ENV=$BUILD_ENV
RUN npm run build:web

# ============================================
# Stage 2: 运行阶段
# ============================================
FROM nginx:1.25-alpine

# 安装 curl 用于健康检查
RUN apk add --no-cache curl

# 复制构建产物
COPY --from=builder /app/packages/web/dist /usr/share/nginx/html

# 复制 Nginx 配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 复制启动脚本（用于运行时注入环境变量）
COPY docker-entrypoint.sh /docker-entrypoint.sh
RUN chmod +x /docker-entrypoint.sh

EXPOSE 80

HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
  CMD curl -f http://localhost/health || exit 1

ENTRYPOINT ["/docker-entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

node_modules
.git
.gitlab-ci.yml
Dockerfile
docker-compose*.yml
README.md
.husky
coverage
dist
*.log
.env.local
.env.*.local
storybook-static

RUN npm ci --only=production && \
    cp -R node_modules /tmp/node_modules
RUN npm ci

# .gitlab-ci.yml
# KMS Frontend CI/CD Pipeline

# ============================================
# 全局变量
# ============================================
variables:
  DOCKER_REGISTRY: registry.kms.example.com
  IMAGE_NAME: kms-frontend-web
  # DOCKER_AUTH_CONFIG 在 GitLab CI Variables 中配置，不要写在这里

# ============================================
# Stage 定义
# ============================================
stages:
  - lint
  - test
  - build
  - deploy
  - review
  - cleanup

# ============================================
# 全局缓存：node_modules
# ============================================
.node_cache: &node_cache
  cache:
    key:
      files:
        - package-lock.json
    paths:
      - node_modules/
    policy: pull-push

# ============================================
# Stage 1: Lint
# ============================================
lint:
  stage: lint
  image: node:18-alpine
  <<: *node_cache
  before_script:
    - npm ci
  script:
    - npm run lint
    - npm run type-check
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
    - if: $CI_COMMIT_BRANCH == "main"
    - if: $CI_COMMIT_BRANCH =~ /^release\//
  tags:
    - docker

# ============================================
# Stage 2: Test
# ============================================
unit-test:
  stage: test
  image: node:18-alpine
  <<: *node_cache
  before_script:
    - npm ci
  script:
    - npm run test -- --coverage
  coverage: /All files[^|]*\|[^|]*\s+([\d.]+)/
  artifacts:
    when: always
    reports:
      junit: junit.xml
      coverage_report:
        coverage_format: cobertura
        path: coverage/cobertura-coverage.xml
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
    - if: $CI_COMMIT_BRANCH == "main"
  tags:
    - docker

# ============================================
# Stage 3: Build Docker Image
# ============================================
build:
  stage: build
  image: docker:24
  services:
    - docker:24-dind
  variables:
    DOCKER_TLS_CERTDIR: "/certs"
  before_script:
    - echo "$CI_REGISTRY_PASSWORD" | docker login $DOCKER_REGISTRY -u $CI_REGISTRY_USER --password-stdin
  script:
    # 用 CI_COMMIT_SHORT_SHA 作为 tag，保证可追溯
    - docker build
        --build-arg BUILD_ENV=$CI_ENVIRONMENT_NAME
        -t $DOCKER_REGISTRY/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA
        -t $DOCKER_REGISTRY/$IMAGE_NAME:latest
        .
    - docker push $DOCKER_REGISTRY/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA
    - docker push $DOCKER_REGISTRY/$IMAGE_NAME:latest
  rules:
    - if: $CI_COMMIT_BRANCH == "main"
    - if: $CI_COMMIT_BRANCH =~ /^release\//
  tags:
    - docker

# ============================================
# Stage 4: Deploy
# ============================================
deploy-staging:
  stage: deploy
  image: alpine:3.18
  before_script:
    - apk add --no-cache openssh-client docker-compose
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" | base64 -d > ~/.ssh/id_rsa
    - chmod 600 ~/.ssh/id_rsa
    - ssh-keyscan -H $STAGING_HOST >> ~/.ssh/known_hosts
  script:
    - scp docker-compose.staging.yml $STAGING_USER@$STAGING_HOST:/opt/kms/docker-compose.yml
    - scp nginx.conf $STAGING_USER@$STAGING_HOST:/opt/kms/nginx.conf
    - ssh $STAGING_USER@$STAGING_HOST "
        cd /opt/kms &&
        echo '$CI_REGISTRY_PASSWORD' | docker login $DOCKER_REGISTRY -u $CI_REGISTRY_USER --password-stdin &&
        export IMAGE_TAG=$CI_COMMIT_SHORT_SHA &&
        docker compose pull &&
        docker compose up -d --remove-orphans
      "
  environment:
    name: staging
    url: https://staging.kms.example.com
  rules:
    - if: $CI_COMMIT_BRANCH == "main"
  tags:
    - docker

deploy-production:
  stage: deploy
  image: alpine:3.18
  before_script:
    - apk add --no-cache openssh-client docker-compose
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" | base64 -d > ~/.ssh/id_rsa
    - chmod 600 ~/.ssh/id_rsa
    - ssh-keyscan -H $PRODUCTION_HOST >> ~/.ssh/known_hosts
  script:
    - scp docker-compose.prod.yml $PRODUCTION_USER@$PRODUCTION_HOST:/opt/kms/docker-compose.yml
    - scp nginx.conf $PRODUCTION_USER@$PRODUCTION_HOST:/opt/kms/nginx.conf
    - ssh $PRODUCTION_USER@$PRODUCTION_HOST "
        cd /opt/kms &&
        echo '$CI_REGISTRY_PASSWORD' | docker login $DOCKER_REGISTRY -u $CI_REGISTRY_USER --password-stdin &&
        export IMAGE_TAG=$CI_COMMIT_SHORT_SHA &&
        docker compose pull &&
        docker compose up -d --remove-orphans
      "
  environment:
    name: production
    url: https://kms.example.com
  rules:
    - if: $CI_COMMIT_BRANCH == "main"
      when: manual              # 生产环境必须手动触发
  tags:
    - docker

# ============================================
# Stage 5: MR Review 环境
# ============================================
review:
  stage: review
  image: alpine:3.18
  before_script:
    - apk add --no-cache openssh-client
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" | base64 -d > ~/.ssh/id_rsa
    - chmod 600 ~/.ssh/id_rsa
    - ssh-keyscan -H $REVIEW_HOST >> ~/.ssh/known_hosts
  script:
    - ssh $REVIEW_USER@$REVIEW_HOST "
        docker run -d --rm
          --name kms-review-$CI_MERGE_REQUEST_IID
          -p 0:80
          $DOCKER_REGISTRY/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA
      "
    # 获取动态分配的端口
    - REVIEW_PORT=$(ssh $REVIEW_USER@$REVIEW_HOST "docker port kms-review-$CI_MERGE_REQUEST_IID 80 | cut -d: -f2")
  environment:
    name: review/$CI_MERGE_REQUEST_IID
    url: http://$REVIEW_HOST:$REVIEW_PORT
    on_stop: stop-review
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
  tags:
    - docker

stop-review:
  stage: cleanup
  image: alpine:3.18
  before_script:
    - apk add --no-cache openssh-client
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" | base64 -d > ~/.ssh/id_rsa
    - chmod 600 ~/.ssh/id_rsa
    - ssh-keyscan -H $REVIEW_HOST >> ~/.ssh/known_hosts
  script:
    - ssh $REVIEW_USER@$REVIEW_HOST "docker stop kms-review-$CI_MERGE_REQUEST_IID || true"
  environment:
    name: review/$CI_MERGE_REQUEST_IID
    action: stop
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
      when: manual
  tags:
    - docker

cache:
  key:
    files:
      - package-lock.json

server {
    listen 80;
    server_name _;

    # 根目录
    root /usr/share/nginx/html;
    index index.html;

    # ============================================
    # Gzip 压缩
    # ============================================
    gzip on;
    gzip_vary on;
    gzip_comp_level 6;
    gzip_min_length 1024;
    gzip_proxied any;
    gzip_types
        text/plain
        text/css
        text/javascript
        application/javascript
        application/json
        application/xml
        image/svg+xml
        font/ttf
        font/woff
        font/woff2;

    # ============================================
    # 安全头
    # ============================================
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;

    # ============================================
    # 日志格式
    # ============================================
    log_format main '$remote_addr - $remote_user [$time_local] '
                    '"$request" $status $body_bytes_sent '
                    '"$http_referer" "$http_user_agent" '
                    'rt=$request_time';

    access_log /var/log/nginx/access.log main;
    error_log /var/log/nginx/error.log warn;

    # ============================================
    # 健康检查端点
    # ============================================
    location /health {
        access_log off;
        return 200 "OK";
        add_header Content-Type text/plain;
    }

    # ============================================
    # 静态资源（带 hash 的文件名）
    # 设置一年的强缓存，因为文件内容变了 hash 就变了
    # ============================================
    location ~* \.(js|css|woff2?|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # ============================================
    # 图片和 SVG
    # ============================================
    location ~* \.(png|jpg|jpeg|gif|svg|ico)$ {
        expires 30d;
        add_header Cache-Control "public";
    }

    # ============================================
    # index.html 禁止缓存
    # 确保每次部署后用户拿到的都是最新版本
    # ============================================
    location = /index.html {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
    }

    # ============================================
    # SPA 路由兜底：所有路径都 fallback 到 index.html
    # ============================================
    location / {
        try_files $uri $uri/ /index.html;
    }
}

#!/bin/sh
set -e

# 从环境变量读取 API 地址，注入到 index.html 的 <meta> 标签中
# 前端代码从 meta 标签读取配置，而不是硬编码

API_BASE_URL="${API_BASE_URL:-http://localhost:5001}"
SENTRY_DSN="${SENTRY_DSN:-}"
FEATURE_FLAGS="${FEATURE_FLAGS:-}"

HTML_FILE="/usr/share/nginx/html/index.html"

# 生成配置注入脚本（内联在 HTML 中）
CONFIG_SCRIPT="<script>window.__KMS_CONFIG__={apiBaseUrl:\"$API_BASE_URL\",sentryDsn:\"$SENTRY_DSN\",featureFlags:\"$FEATURE_FLAGS\"};</script>"

# 注入到 <head> 的第一个 <script> 之前
sed -i "s|<script|$CONFIG_SCRIPT<script|" "$HTML_FILE"

# 启动 Nginx
exec "$@"

// src/config/runtime.ts
interface KMSConfig {
  apiBaseUrl: string;
  sentryDsn: string;
  featureFlags: string;
}

declare global {
  interface Window {
    __KMS_CONFIG__?: Partial<KMSConfig>;
  }
}

const defaultConfig: KMSConfig = {
  apiBaseUrl: 'http://localhost:5001',
  sentryDsn: '',
  featureFlags: '',
};

export function getRuntimeConfig(): KMSConfig {
  return {
    ...defaultConfig,
    ...window.__KMS_CONFIG__,
  };
}

# docker-compose.prod.yml
version: '3.8'

services:
  kms-web:
    image: registry.kms.example.com/kms-frontend-web:${IMAGE_TAG:-latest}
    ports:
      - "80:80"
    environment:
      - API_BASE_URL=https://api.kms.example.com
      - SENTRY_DSN=https://abc123@sentry.io/456
      - FEATURE_FLAGS=newDashboard:on,export:on
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost/health"]
      interval: 30s
      timeout: 3s
      retries: 3
      start_period: 10s
    restart: unless-stopped

# docker-compose.prod.yml（补充 deploy 配置）
version: '3.8'

services:
  kms-web:
    image: registry.kms.example.com/kms-frontend-web:${IMAGE_TAG:-latest}
    ports:
      - "80:80"
    environment:
      - API_BASE_URL=https://api.kms.example.com
    deploy:
      mode: replicated
      replicas: 3
      update_config:
        parallelism: 1        # 每次更新 1 个副本
        delay: 10s            # 每批之间等待 10 秒，等新容器 Ready
        failure_action: rollback  # 更新失败自动回滚
        max_failure_ratio: 0.3    # 超过 30% 的容器更新失败就触发回滚
        order: start-first    # 先启动新容器，再停止旧容器
      rollback_config:
        parallelism: 1
        delay: 5s
        failure_action: pause
      restart_policy:
        condition: on-failure
        delay: 5s
        max_attempts: 3
        window: 120s

  # Nginx 做反向代理和负载均衡
  nginx-lb:
    image: nginx:1.25-alpine
    ports:
      - "443:443"
    volumes:
      - ./nginx-lb.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - kms-web

# 在服务器上查看最近的镜像版本
docker image ls registry.kms.example.com/kms-frontend-web --format '{{.Tag}}' | head -10

# 回滚到指定版本
export IMAGE_TAG=a3f2b1c  # 这个 Tag 就是 CI_COMMIT_SHORT_SHA
docker compose up -d --remove-orphans

# 查看回滚后的容器状态
docker compose ps

# nginx-lb.conf — 灰度发布版
upstream kms_web {
    # 稳定版本
    server kms-web-stable:80 weight=90;

    # 灰度版本（只接收 10% 流量）
    server kms-web-canary:80 weight=10;
}

server {
    listen 443 ssl http2;
    server_name kms.example.com;

    location / {
        proxy_pass http://kms_web;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

// webpack.config.ts
devtool: process.env.NODE_ENV === 'production'
  ? false           // 生产环境不生成 source map
  : 'eval-source-map'  // 开发环境用快速 source map

COPY --from=builder /app/packages/web/dist /usr/share/nginx/html
RUN find /usr/share/nginx/html -name "*.map" -type f -delete

COPY --from=builder /app/dist /usr/share/nginx/html

COPY --from=builder /app/packages/web/dist /usr/share/nginx/html

RUN test -f /usr/share/nginx/html/index.html || \
    (echo "ERROR: index.html not found in nginx html dir" && exit 1)

build:
  stage: build
  image: docker:24
  services:
    - docker:24-dind
  before_script:
    - echo "$CI_REGISTRY_PASSWORD" | docker login $DOCKER_REGISTRY -u $CI_REGISTRY_USER --password-stdin
    # 拉取上一次的镜像作为 layer cache
    - docker pull $DOCKER_REGISTRY/$IMAGE_NAME:latest || true
  script:
    - docker build
        --cache-from $DOCKER_REGISTRY/$IMAGE_NAME:latest
        --build-arg BUILD_ENV=$CI_ENVIRONMENT_NAME
        -t $DOCKER_REGISTRY/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA
        -t $DOCKER_REGISTRY/$IMAGE_NAME:latest
        .

location / {
    try_files $uri /index.html;
}

location / {
    try_files $uri $uri/ /index.html;
}

services:
  kms-web:
    env_file:
      - .env.staging
    environment:
      - ENVIRONMENT=staging

services:
  kms-web:
    # 不再使用 env_file
    environment:
      - ENVIRONMENT=staging
      - API_BASE_URL=${API_BASE_URL}
      - SENTRY_DSN=${SENTRY_DSN}