部署：静态站 / Nginx / CI 流水线

dist/
├── index.html                # 唯一 HTML 入口，引用下面带 hash 的资源
├── assets/
│   ├── index-Bq3f9x2a.js     # 带 hash 的 JS（hash 规则第 40 篇讲过）
│   ├── index-Ck8d1p4m.css    # 带 hash 的 CSS
│   └── vendor-Dx2e8f7b.js    # 拆出来的第三方库包
└── favicon.ico

server {
    listen 80;
    server_name bookmark.example.com;

    root /var/www/bookmark/dist;    # 指向第 40 篇的构建产物
    index index.html;

    gzip on;                        # 文本压缩：JS/CSS/HTML 体积约砍到 1/3
    gzip_types text/css application/javascript application/json image/svg+xml;
    gzip_min_length 1k;

    # 1) 带 hash 的静态资源：内容不变文件名就不变，放心缓存一年
    location /assets/ {
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # 2) 入口 HTML：绝不能长缓存，否则发布后用户拿不到新版本
    location = /index.html {
        add_header Cache-Control "no-cache";
    }

    # 3) 回退路由：SPA 部署的灵魂
    location / {
        try_files $uri $uri/ /index.html;
    }
}

    # 浏览器只见同源的 /api，跨域问题在这套架构里根本不会发生
    location /api/ {
        proxy_pass http://127.0.0.1:8080/;    # 末尾带斜杠：/api/xxx 转成 /xxx
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

# .env.production —— npm run build 时读取
VITE_API_BASE=/api

# .env.staging —— npm run build -- --mode staging 时读取
VITE_API_BASE=https://staging-api.example.com/api

export const API_BASE = import.meta.env.VITE_API_BASE ?? "/api";

name: deploy

on:
  push:
    branches: [main]            # 合进主干即触发，≈ 你配的 webhook

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20      # 锁 Node 大版本，≈ 锁 JDK
          cache: npm

      - run: npm ci             # 严格按 package-lock.json 安装

      - run: npm run lint
      - run: npm test           # 测试不过不许上线——铁律通用

      - name: 构建（注入目标环境）
        run: npm run build
        env:
          VITE_API_BASE: /api

      - name: 同步产物到服务器
        uses: easingthemes/ssh-deploy@v5
        with:
          SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_KEY }}
          SOURCE: dist/
          TARGET: /var/www/bookmark/dist/
          ARGS: "-avz --delete"

# ── 阶段一：构建层（node_modules 有几百 MB，不进最终镜像） ──
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# ── 阶段二：运行层（Nginx + 静态文件，完事） ──
FROM nginx:1.27-alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80