edge-deployment

边缘部署

googleadsagent.ai™ 提供的 Agent Skills™ 项目的一部分

描述

边缘部署可自动将前端应用部署到 Vercel 和 Cloudflare，自动检测 40 多种框架，智能配置构建，并设置特定环境的选项。Agent 会识别框架、配置构建流水线、设置环境变量，并为标准项目实现无需手动配置的部署。

现代边缘平台无需传统的服务器预配。此技能为 Vercel 和 Cloudflare Pages/Workers 上的静态（SSG）和服务端渲染（SSR）应用，编码了相应的部署模式。Agent 会根据框架的渲染能力、项目的数据需求以及目标平台的运行时限制，选择最佳部署策略。

此技能可处理完整的部署生命周期：初始设置、拉取请求的预览部署、合并后的生产部署、自定义域名配置以及环境变量管理。它了解 Vercel 的无服务器函数与 Cloudflare Workers 边缘运行时之间的区别，并根据项目需求选择合适的平台。

使用场景

• 首次部署新的前端项目
• 为预览和生产部署配置 CI/CD
• 在部署平台之间迁移（Vercel 迁移到 Cloudflare，或反之）
• 设置自定义域名和 SSL 证书
• 为不同部署阶段配置环境变量
• 优化构建设置以加快部署

工作原理

graph TD
    A[Project Source] --> B[Detect Framework]
    B --> C{Framework Type}
    C -->|Next.js/Nuxt/SvelteKit| D[SSR Deployment]
    C -->|Astro/Vite/CRA| E[Static Deployment]
    D --> F{Target Platform}
    E --> F
    F -->|Vercel| G[Configure vercel.json]
    F -->|Cloudflare| H[Configure wrangler.jsonc]
    G --> I[Set Build Command + Output Dir]
    H --> I
    I --> J[Configure Env Variables]
    J --> K[Deploy Preview on PR]
    K --> L[Deploy Production on Merge]

框架检测会检查 package.json 中的依赖项、配置文件和目录结构。Agent 会为每种框架匹配最佳构建命令、输出目录和运行时配置。

实现

Vercel 部署

{
  "framework": "nextjs",
  "buildCommand": "next build",
  "outputDirectory": ".next",
  "regions": ["iad1", "sfo1", "lhr1"],
  "env": {
    "DATABASE_URL": "@database-url",
    "API_KEY": "@api-key"
  }
}

# Deploy to Vercel
npx vercel --prod

# Preview deployment
npx vercel

# Set environment variable
npx vercel env add DATABASE_URL production

Cloudflare Pages 部署

// wrangler.jsonc
{
  "name": "my-app",
  "pages_build_output_dir": "./dist",
  "compatibility_date": "2026-04-01",
  "vars": {
    "ENVIRONMENT": "production"
  }
}

# Deploy to Cloudflare Pages
npx wrangler pages deploy ./dist --project-name=my-app

# Preview deployment
npx wrangler pages deploy ./dist --project-name=my-app --branch=feature-x

GitHub Actions CI/CD

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

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: "20" }
      - run: npm ci
      - run: npm run build
      - if: github.event_name == 'push'
        run: npx wrangler pages deploy ./dist --project-name=my-app
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CF_API_TOKEN }}

最佳实践

• 为每个 PR 使用预览部署，在上线前发现问题
• 将密钥存储在平台的加密环境变量系统中，切勿写入代码
• 固定框架和运行时版本，避免不同环境之间的构建差异
• 为静态资源配置边缘缓存标头（哈希文件缓存 1 年）
• 使用特定平台的适配器（例如 @sveltejs/adapter-cloudflare）支持 SSR
• 监控构建时间，并为高于基准的退化设置警报

平台兼容性

平台	支持情况	备注
Cursor	完全支持	使用 Shell 工具进行 CLI 部署
VS Code	完全支持	提供 Vercel/CF 扩展
Windsurf	完全支持	支持部署工作流
Claude Code	完全支持	基于 CLI 的部署
Cline	完全支持	终端集成
aider	部分支持	仅生成配置文件

相关技能

• React 最佳实践
• Web 设计指南
• CI/CD 流水线
• Cloudflare Workers

关键词

edge-deployment vercel cloudflare-pages ci-cd framework-detection static-deployment ssr-deployment preview-deployment

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License