Back to Details

edge-deployment

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Edge Deployment

Edge Deployment

Part of Agent Skills™ by googleadsagent.ai™
Agent Skills™ 的一部分，由 googleadsagent.ai™ 推出

Description

描述

Edge Deployment automates the deployment of frontend applications to Vercel and Cloudflare with auto-detection of 40+ frameworks, intelligent build configuration, and environment-specific settings. The agent identifies the framework, configures the build pipeline, sets up environment variables, and deploys with zero manual configuration for standard projects.
Modern edge platforms eliminate the need for traditional server provisioning. This skill encodes the deployment patterns for both static (SSG) and server-rendered (SSR) applications across Vercel and Cloudflare Pages/Workers. The agent selects the optimal deployment strategy based on the framework's rendering capabilities, the project's data requirements, and the target platform's runtime constraints.
The skill handles the full deployment lifecycle: initial setup, preview deployments for pull requests, production deployments on merge, custom domain configuration, and environment variable management. It understands the differences between Vercel's serverless functions and Cloudflare Workers' edge runtime, routing to the appropriate platform based on project needs.
Edge Deployment 可将前端应用自动部署到 Vercel 和 Cloudflare，自动检测 40 多种框架，并智能配置构建流程和针对不同环境的设置。该 Agent 会识别框架、配置构建流水线、设置环境变量，并对标准项目实现零手动配置部署。
现代边缘平台无需再配置传统服务器。此 skill 涵盖 Vercel 和 Cloudflare Pages/Workers 上静态（SSG）与服务端渲染（SSR）应用的部署模式。该 Agent 会根据框架的渲染能力、项目的数据需求以及目标平台的运行时限制，选择最优部署策略。
此 skill 负责完整的部署生命周期：初始设置、为 Pull Request 创建预览部署、在代码合并后进行生产部署、自定义域名配置以及环境变量管理。它能够识别 Vercel Serverless Functions 与 Cloudflare Workers 边缘运行时之间的差异，并根据项目需求选择合适的平台。

Use When

使用场景

  • Deploying a new frontend project for the first time
  • Configuring CI/CD for preview and production deployments
  • Migrating between deployment platforms (Vercel to Cloudflare or vice versa)
  • Setting up custom domains and SSL certificates
  • Configuring environment variables for different deployment stages
  • Optimizing build settings for faster deploys
  • 首次部署新的前端项目
  • 配置用于预览和生产部署的 CI/CD
  • 在部署平台之间迁移（从 Vercel 迁移到 Cloudflare，或反之）
  • 配置自定义域名和 SSL 证书
  • 为不同部署阶段配置环境变量
  • 优化构建设置，加快部署速度

How It Works

工作原理

mermaid
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]
Framework detection examines 
package.json
dependencies, config files, and directory structure. The agent maps each framework to its optimal build command, output directory, and runtime configuration.
mermaid
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 将每个框架映射到对应的最优构建命令、输出目录和运行时配置。

Implementation

实现

Vercel Deployment

Vercel 部署

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

Deploy to Vercel

Deploy to Vercel

npx vercel --prod
npx vercel --prod

Preview deployment

Preview deployment

npx vercel
npx vercel

Set environment variable

Set environment variable

npx vercel env add DATABASE_URL production
undefined
npx vercel env add DATABASE_URL production
undefined

Cloudflare Pages Deployment

Cloudflare Pages 部署

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

Deploy to Cloudflare Pages

Deploy to Cloudflare Pages

npx wrangler pages deploy ./dist --project-name=my-app
npx wrangler pages deploy ./dist --project-name=my-app

Preview deployment

Preview deployment

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

GitHub Actions CI/CD

GitHub Actions CI/CD

yaml
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 }}
yaml
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 }}

Best Practices

最佳实践

  • Use preview deployments for every PR to catch issues before production
  • Store secrets in the platform's encrypted environment variable system, never in code
  • Pin framework and runtime versions to avoid build drift between environments
  • Configure caching headers at the edge for static assets (1 year for hashed files)
  • Use platform-specific adapters (e.g., 
    @sveltejs/adapter-cloudflare
    ) for SSR
  • Monitor build times and set alerts for regressions above your baseline
  • 为每个 PR 使用预览部署，以便在进入生产环境前发现问题
  • 将密钥存储在平台的加密环境变量系统中，切勿存储在代码中
  • 固定框架和运行时版本，避免不同环境之间出现构建漂移
  • 在边缘端为静态资源配置缓存标头（带哈希的文件缓存 1 年）
  • SSR 使用平台专用适配器（例如 
    @sveltejs/adapter-cloudflare
    ）
  • 监控构建时间，并为构建时长超过基线的情况设置警报

Platform Compatibility

平台兼容性

PlatformSupportNotes
CursorFullShell tool for CLI deploys
VS CodeFullVercel/CF extensions available
WindsurfFullDeployment workflow support
Claude CodeFullCLI-based deployments
ClineFullTerminal integration
aiderPartialConfig file generation only
平台支持情况备注
Cursor完整支持用于 CLI 部署的 Shell 工具
VS Code完整支持提供 Vercel/CF 扩展
Windsurf完整支持支持部署工作流
Claude Code完整支持基于 CLI 的部署
Cline完整支持终端集成
aider部分支持仅支持生成配置文件

Related Skills

相关 Skill

  • React Best Practices
  • Web Design Guidelines
  • CI/CD Pipelines
  • Cloudflare Workers
  • React 最佳实践
  • Web 设计指南
  • CI/CD 流水线
  • Cloudflare Workers

Keywords

关键词

edge-deployment
vercel
cloudflare-pages
ci-cd
framework-detection
static-deployment
ssr-deployment
preview-deployment
© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License
edge-deployment
vercel
cloudflare-pages
ci-cd
framework-detection
static-deployment
ssr-deployment
preview-deployment
© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License