web-deploy

web-deploy

目的

このスキルは、Cloudflare Pages/Workers、Vercel、Netlify、Docker、GitHub Actions の CI/CD パイプラインなどのプラットフォームへのウェブアプリケーションのデプロイを自動化します。設定、ビルド、環境との連携を処理しながら、コードのコミットから本番環境へのデプロイまでのプロセスを効率化することに重点を置いています。

使用するタイミング

静的サイト、サーバーレス関数、コンテナー化されたアプリをデプロイする際に、このスキルを使用してください。頻繁な更新に対応する CI/CD の設定、プロジェクトのクラウドプラットフォームへの移行、GitHub のイベントに応じたデプロイの自動化に利用できます。バージョン管理やクラウドサービスを含むウェブ開発のワークフローに適しています。

主な機能

• Git 連携または CLI を使用して、静的サイトを Cloudflare Pages にデプロイします。
• API または Wrangler CLI を使用して、Cloudflare Workers へのサーバーレスデプロイを処理します。
• CLI コマンドと環境変数を使用して、Vercel へのデプロイを自動化します。
• API または CLI を使用して、サイトのビルドとデプロイ向けに Netlify を設定します。
• Docker でアプリケーションをコンテナー化し、GitHub Actions で CI/CD をオーケストレーションします。
• ビルド手順、テスト、デプロイのトリガーを含むパイプラインを管理します。

使用パターン

デプロイをワークフローに統合するには、次のパターンに従ってください。

• 新しいプロジェクトでは、プラットフォーム固有の設定ファイル（例：Vercel 用の vercel.json）を使って初期化します。
• CI/CD では、GitHub Actions のワークフローを使用して、プルリクエストまたはマージ時にデプロイをトリガーします。
• 認証用の $CLOUDFLARE_API_TOKEN など、シークレットには環境変数を使用します。
• 例 1：React アプリを Vercel にデプロイする場合—リポジトリをクローンし、プロジェクトのルートで npx vercel を実行してオプションを選択し、変更をプッシュします。
• 例 2：Docker 化したアプリの CI/CD を設定する場合—Docker イメージをビルドし、API 呼び出しで Netlify にデプロイする手順を記述した .github/workflows/deploy.yml ファイルを作成します。

一般的なコマンド/API

タスクには、次のコマンドと API をそのまま使用してください。

• Cloudflare Pages：npx wrangler pages deploy ./build --project-name=my-site を実行してビルドフォルダーをデプロイします。API エンドポイント：POST https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments、JSON ボディは {"files": [...]}、認証には $CLOUDFLARE_API_TOKEN を使用します。
• Vercel：プロジェクトディレクトリから npx vercel deploy --prod を実行します。vercel.json の設定：{"version": 2, "builds": [{"src": "package.json", "use": "@vercel/node"}]}、認証には $VERCEL_TOKEN を使用します。
• Netlify：コマンド：netlify deploy --dir=build --prod。API：POST https://api.netlify.com/api/v1/sites/{site_id}/deploys、フォームデータを使用し、`$NETLIFY_ACCESS_TOKEN` で認証します。
• Docker：docker build -t my-app:latest . でイメージをビルドします。レジストリへのプッシュ：docker push my-repo/my-app:latest。
• GitHub Actions：YAML ファイルで、次を使用します：run: echo "::set-env name=GITHUB_TOKEN::${{ secrets.GITHUB_TOKEN }}" に続けて run: gh workflow run deploy.yml。コード例：

  jobs:
    build:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v2
        - run: docker build . -t my-app
  

• CI/CD では、.github/workflows/main.yml に on: [push, pull_request] を追加して、ワークフローのトリガーを設定します。

統合に関する注意

CI/CD 設定で環境変数を設定して統合します。例：GitHub Actions に env: { API_KEY: ${{ secrets.SERVICE_API_KEY }} } を追加します。複数のプラットフォームを使う場合は、設定ファイル（例：netlify.toml と vercel.json）を分けたモノレポを使用します。GitHub とは、JSON ペイロードを指定して https://api.github.com/repos/{owner}/{repo}/hooks に POST し、Webhook を追加して連携します。docker tag my-app:latest registry.example.com/my-app:1.0 のように、デプロイ用の Docker イメージに正しくタグが付いていることを確認してください。API 連携では、X-RateLimit-Remaining などのレスポンスヘッダーを確認して、レート制限に対応します。

エラー処理

終了コードとログを確認してエラーを処理します。CLI コマンドの場合は、スクリプトで try-catch を使用します（例：Bash では if ! npx vercel deploy; then echo "Deployment failed"; exit 1; fi）。よくある問題：認証エラー—$CLOUDFLARE_API_TOKEN などの環境変数が設定されていることを確認します。export CLOUDFLARE_API_TOKEN=your_key を実行して解決します。API エラーの場合は、レスポンスを解析します（例：ステータスコードが 429 の場合は、待ってから再試行します）。GitHub Actions では、重要でないステップに continue-on-error: true を使用し、その後で出力を確認します。エラーログの記録例：

try {
  await fetch('https://api.cloudflare.com/...', { headers: { Authorization: `Bearer ${process.env.CLOUDFLARE_API_TOKEN}` } });
} catch (error) {
  console.error('API error:', error.message);
}

npx vercel deploy --debug のように詳細モードを有効にして、デプロイをデバッグします。

グラフの関係

• クラスター web-dev に関連します（例：web-build や api-integration などのスキルとノードを共有します）。
• タグを介して接続されています：deployment（ci-cd スキルにリンク）、ci-cd（github-actions ツールに接続）、cloudflare（web-hosting スキルに関連付け）、web（frontend-dev の機能に関連付け）。