Vite 容器化与 Docker 构建：多阶段构建、层缓存与镜像优化

# ---- 阶段 1：构建 ----
FROM node:20-alpine AS builder
WORKDIR /app
# 依赖安装（见第 3 节缓存技巧）
COPY pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile
# 复制源码 + 构建
COPY . .
RUN pnpm build        # 产出 dist/

# ---- 阶段 2：运行（只含产物 + 静态服务器）----
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

# 好：锁文件先 COPY，层缓存命中时跳过 install
COPY pnpm-lock.yaml package.json ./
RUN pnpm install --frozen-lockfile     # 锁文件没变 → 这层缓存命中
COPY . .                               # 源码变更只影响这层开始

层缓存逻辑：
COPY pnpm-lock.yaml → install → COPY . → build
   │ 锁文件没变         │ 缓存命中    │ 源码变了   │ 缓存失效
   ▼                    ▼             ▼            ▼
 复用                  复用         重新复制     重新构建

FROM node:20-alpine AS builder
WORKDIR /app
# 1. 只复制依赖声明，最大化缓存
COPY pnpm-lock.yaml package.json ./
RUN pnpm install --frozen-lockfile
# 2. 复制源码（此层会随源码变更失效）
COPY . .
# 3. 环境变量：用 ARG 注入 VITE_ 前缀变量
ARG VITE_API_URL
ENV VITE_API_URL=$VITE_API_URL
# 4. 构建（用缓存挂载加速）
RUN --mount=type=cache,target=/app/node_modules/.cache \
    pnpm build

# 推荐：nginx:alpine
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 非 root 用户运行（安全）
USER nginx

server {
  listen 80;
  root /usr/share/nginx/html;

  # 静态资源缓存（带 hash 的产物名可长缓存）
  location /assets/ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

  # SPA 回退：找不到文件的路径 → index.html
  location / {
    try_files $uri $uri/ /index.html;
  }
}

try_files 逻辑：
/           → index.html
/assets/x.js → 直接返回文件
/about      → 无此文件 → /index.html（前端路由接管）

方案 1：GitHub Actions + BuildKit 内联缓存
方案 2：远程缓存（registry）— 每次 push 的层可被复用

# GitHub Actions（示例）
- name: Build
  uses: docker/build-push-action@v6
  with:
    push: true
    tags: ghcr.io/team/app:${{ github.sha }}
    cache-from: type=registry,ref=ghcr.io/team/app-cache
    cache-to: type=registry,ref=ghcr.io/team/app-cache,mode=max

体积优化清单：
□ 多阶段构建（不把 Node 带进运行镜像）
□ 使用 alpine 基镜像（体积小、安全更新快）
□ .dockerignore 排除无关文件
□ pnpm 只装生产依赖（构建后 prune）
□ 产物压缩（gzip/brotli 预压缩，nginx 直接喂）
□ 清理缓存（pnpm store 用 --mount=type=cache 隔离）

# 预压缩产物：nginx 直接提供 .gz/.br，节省 CPU
RUN --mount=type=cache,target=/root/.cache \
    pnpm build && \
    (cd dist && for f in assets/*.js assets/*.css; do gzip -9 -k "$f"; done)

安全清单：
□ 非 root 运行（USER nginx / node）
□ 只安装生产依赖（无构建工具）
□ 镜像内容审计（不含密钥/源码 map）
□ 漏洞扫描（trivy / docker scan）
□ 基础镜像定期更新（拉取安全修复）

多环境：
□ 同一镜像，多 tag（:prod / :staging / :test）
□ 运行时环境变量（注入 API 地址），构建期 ARG 尽量少

# 多环境 tag 管理
docker build -t app:staging -t app:prod .
docker push app:staging && docker push app:prod