edge-deployment

エッジデプロイ

googleadsagent.ai™ による Agent Skills™ の一部です

説明

エッジデプロイは、40 以上のフレームワークの自動検出、インテリジェントなビルド構成、環境固有の設定により、フロントエンドアプリケーションの Vercel および Cloudflare へのデプロイを自動化します。エージェントはフレームワークを特定し、ビルドパイプラインを構成して環境変数を設定し、標準的なプロジェクトであれば手動構成なしでデプロイします。

最新のエッジプラットフォームでは、従来のサーバーのプロビジョニングが不要になります。このスキルには、Vercel と Cloudflare Pages/Workers の両方で、静的（SSG）アプリケーションとサーバーレンダリング（SSR）アプリケーションのデプロイパターンが組み込まれています。エージェントは、フレームワークのレンダリング機能、プロジェクトのデータ要件、対象プラットフォームのランタイム制約に基づき、最適なデプロイ戦略を選択します。

このスキルは、初期セットアップ、プルリクエスト用のプレビューデプロイ、マージ時の本番デプロイ、カスタムドメインの構成、環境変数の管理など、デプロイのライフサイクル全体に対応します。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 の依存関係、設定ファイル、ディレクトリ構造を調べます。エージェントは各フレームワークに最適なビルドコマンド、出力ディレクトリ、ランタイム構成を対応付けます。

実装

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 年間）
• SSR にはプラットフォーム固有のアダプター（例：@sveltejs/adapter-cloudflare）を使用します
• ビルド時間を監視し、基準値を超える悪化に対してアラートを設定します

プラットフォームの互換性

プラットフォーム	サポート	備考
Cursor	完全	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