openai-netlify-deploy

Netlify デプロイ用スキル

Netlify CLI を使用して、プロジェクトの設定とデプロイの状況をインテリジェントに検出し、Web プロジェクトを Netlify にデプロイします。

概要

このスキルは、以下の処理を自動化して Netlify へのデプロイを行います。

• Netlify CLI の認証を確認します
• プロジェクトの設定とフレームワークを検出します
• 既存のサイトにリンクするか、新しいサイトを作成します
• 本番環境またはプレビュー環境にデプロイします

前提条件

• Netlify CLI：npx 経由でインストールします（グローバルインストールは不要です）
• 認証：有効なログインセッションがある Netlify アカウント
• プロジェクト：現在のディレクトリに有効な Web プロジェクトがあること
• デプロイには数分かかる場合があります。適切なタイムアウト値を使用してください。

認証パターン

このスキルでは、事前認証済み Netlify CLI の方式を使用します。

1. npx netlify status で認証状態を確認します
2. 認証されていない場合は、npx netlify login を実行するようユーザーに案内します
3. 認証を確立できない場合は、適切に処理して終了します

認証には次のいずれかを使用します。

• ブラウザーを使用した OAuth（優先）：netlify login を実行すると、認証用にブラウザーが開きます
• API キー（代替）：NETLIFY_AUTH_TOKEN 環境変数を設定します

ワークフロー

1. Netlify CLI の認証を確認する

ユーザーが Netlify にログインしているか確認します。

npx netlify status

想定される出力パターン：

• ✅ 認証済み：ログイン中のユーザーのメールアドレスと、サイトのリンク状態が表示されます
• ❌ 未認証：「Not logged into any site」または認証エラーが表示されます

未認証の場合は、ユーザーに以下を案内します。

npx netlify login

OAuth 認証用にブラウザーウィンドウが開きます。ユーザーがログインを完了するまで待ってから、再度 netlify status で確認してください。

代替手段：API キー認証

ブラウザーでの認証が利用できない場合、ユーザーは以下を設定できます。

export NETLIFY_AUTH_TOKEN=your_token_here

トークンは次の場所で生成できます：https://app.netlify.com/user/applications#personal-access-tokens

2. サイトのリンク状態を検出する

netlify status の出力から、以下を判定します。

• リンク済み：サイトはすでに Netlify に接続されています（サイト名／URL が表示されます）
• 未リンク：サイトをリンクするか、作成する必要があります

3. 既存のサイトにリンクするか、新しいサイトを作成する

すでにリンク済みの場合 → 手順 4 に進みます

未リンクの場合は、Git リモートを使ってリンクを試みます。

# Check if project is Git-based
git remote show origin

# If Git-based, extract remote URL
# Format: https://github.com/username/repo or [email protected]:username/repo.git

# Try to link by Git remote
npx netlify link --git-remote-url <REMOTE_URL>

リンクに失敗した場合（Netlify にサイトが存在しない場合）：

# Create new site interactively
npx netlify init

次の手順をユーザーに案内します。

1. チーム／アカウントを選択する
2. サイト名を設定する
3. ビルド設定を構成する
4. 必要に応じて netlify.toml を作成する

4. 依存関係を確認する

デプロイの前に、プロジェクトの依存関係がインストールされていることを確認します。

# For npm projects
npm install

# For other package managers, detect and use appropriate command
# yarn install, pnpm install, etc.

5. Netlify にデプロイする

状況に応じてデプロイの種類を選択します。

プレビュー／ドラフトデプロイ（既存サイトのデフォルト）：

npx netlify deploy

テスト用の一意の URL を持つデプロイプレビューが作成されます。

本番デプロイ（新しいサイト、または明示的に本番環境へデプロイする場合）：

npx netlify deploy --prod

公開中の本番 URL にデプロイされます。

デプロイのプロセス：

1. CLI がビルド設定を検出します（netlify.toml またはユーザーへのプロンプトから）
2. プロジェクトをローカルでビルドします
3. ビルド済みアセットを Netlify にアップロードします
4. デプロイ URL を返します

6. 結果を報告する

デプロイ後、以下をユーザーに報告します。

• デプロイ URL：このデプロイ用の一意の URL
• サイト URL：本番環境の URL（本番デプロイの場合）
• デプロイログ：ログを確認できる Netlify ダッシュボードへのリンク
• 次の手順：サイトまたはダッシュボードを表示するために netlify open を実行するよう提案します

netlify.toml の扱い

netlify.toml ファイルが存在する場合、CLI は自動的にそれを使用します。存在しない場合、CLI は以下の入力を求めます。

• ビルドコマンド：例：npm run build、next build
• 公開ディレクトリ：例：dist、build、.next

一般的なフレームワークのデフォルト設定：

• Next.js：ビルドコマンド npm run build、公開ディレクトリ .next
• React (Vite)：ビルドコマンド npm run build、公開ディレクトリ dist
• 静的 HTML：ビルドコマンドなし、公開ディレクトリは現在のディレクトリ

可能であれば、このスキルは package.json からフレームワークを検出し、適切な設定を提案します。

ワークフロー全体の例

# 1. Check authentication
npx netlify status

# If not authenticated:
npx netlify login

# 2. Link site (if needed)
# Try Git-based linking first
git remote show origin
npx netlify link --git-remote-url https://github.com/user/repo

# If no site exists, create new one:
npx netlify init

# 3. Install dependencies
npm install

# 4. Deploy (preview for testing)
npx netlify deploy

# 5. Deploy to production (when ready)
npx netlify deploy --prod

エラー処理

よくある問題と解決策：

「ログインしていません」 → npx netlify login を実行してください

「サイトがリンクされていません」 → npx netlify link または npx netlify init を実行してください

「ビルドに失敗しました」 → netlify.toml または CLI のプロンプトで、ビルドコマンドと公開ディレクトリを確認してください → 依存関係がインストールされていることを確認してください → ビルドログで具体的なエラーを確認してください

「公開ディレクトリが見つかりません」 → ビルドコマンドが正常に実行されたことを確認してください → 公開ディレクトリのパスが正しいことを確認してください

トラブルシューティング

強化されたネットワークアクセス

ユーザーへの案内例：

The deploy needs escalated network access to deploy to Netlify. I can rerun the command with escalated permissions—want me to proceed?

環境変数

シークレットと設定について：

1. シークレットを Git にコミットしないでください
2. Netlify ダッシュボードで設定します：Site Settings → Environment Variables
3. ビルドでは process.env.VARIABLE_NAME を使ってアクセスします

ヒント

• 本番環境にデプロイする前に、まず netlify deploy（--prod なし）を実行してテストしてください
• netlify open を実行すると、Netlify ダッシュボードでサイトを表示できます
• netlify logs を実行すると、関数のログを確認できます（Netlify Functions を使用している場合）
• Netlify Functions を使ったローカル開発には netlify dev を使用してください

リファレンス

• Netlify CLI ドキュメント：https://docs.netlify.com/cli/get-started/
• netlify.toml リファレンス：https://docs.netlify.com/configure-builds/file-based-configuration/

同梱リファレンス（必要に応じて読み込み）

• CLI コマンド
• デプロイパターン
• netlify.toml ガイド

使用する場合

使用しない場合