Agent Skill 站点 Vercel 部署进阶：CI/CD + 预览 + 域名管理

基础部署之后

基础部署（vercel deploy）只是起点。生产级站点需要：自动化部署、预览环境、多域名管理、性能优化。

步骤 1：配置 GitHub Actions 自动部署

# .github/workflows/deploy.yml
name: Deploy to Vercel

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run tests
        run: npm test
      
      - name: Deploy to Vercel (Production)
        if: github.event_name == 'push'
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'
      
      - name: Deploy to Vercel (Preview)
        if: github.event_name == 'pull_request'
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}

步骤 2：PR 预览环境

Vercel 自动为每个 PR 创建预览部署。在 PR 评论中添加部署链接：

- name: Comment preview URL
  if: github.event_name == 'pull_request'
  uses: actions/github-script@v7
  with:
    script: |
      github.rest.issues.createComment({
        issue_number: context.issue.number,
        owner: context.repo.owner,
        repo: context.repo.repo,
        body: '🚀 Preview: ${{ steps.deploy.outputs.url }}'
      })

步骤 3：多域名管理

# 添加主域名
vercel domains add agentskil.qzz.io

# 添加备用域名
vercel domains add agentskill.com

# 在 vercel.json 中配置重定向

{
  "redirects": [
    {
      "source": "/:path*",
      "has": [{"type": "host", "value": "agentskill.com"}],
      "destination": "https://agentskil.qzz.io/:path*",
      "permanent": true
    }
  ]
}

步骤 4：Edge Functions 优化

// middleware.ts - 添加缓存头
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()
  
  // 静态资源长期缓存
  if (request.nextUrl.pathname.startsWith('/_next/static/')) {
    response.headers.set('Cache-Control', 'public, max-age=31536000, immutable')
  }
  
  // API 路由短期缓存
  if (request.nextUrl.pathname.startsWith('/api/')) {
    response.headers.set('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300')
  }
  
  return response
}

步骤 5：监控与告警

# Vercel Analytics（内置）
npm install @vercel/analytics

# 在 layout.tsx 中引入
import { Analytics } from '@vercel/analytics/react'

注意事项

• VERCEL_TOKEN 等密钥必须在 GitHub Secrets 中配置，不要写在代码里
• PR 预览环境默认是公开的，敏感项目需在 Vercel 设置中开启密码保护
• Edge Functions 有 50MB 限制和 30 秒超时
• 多域名时注意 SEO——设置规范域名（canonical URL）避免重复内容