mcpField
N
netlify-deploy

netlify-deploy

github.com/mengtoクラウド・DevOps7.1k64 回インストール4 日前に更新
リポジトリ

netlify-deploy について

netlify-deployは、Netlify CLIでWebプロジェクトをNetlifyにデプロイするスキルです。認証、サイトの連携や作成、プレビューまたは本番環境へのデプロイを案内します。

主な機能

  1. 01Netlify CLIの認証確認
  2. 02プロジェクト設定とフレームワークの検出
  3. 03Netlifyサイトの連携または作成
  4. 04プレビューまたは本番環境へのデプロイ

活用シーン

  1. 01公開前のWebプロジェクトのプレビュー
  2. 02プロジェクトの本番URLへの公開

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mengto/skills --skill netlify-deploy

インストール後、Claude Code で/netlify-deployを入力して読み込まれたか確認します。

同梱ファイルassets/netlify-small.svg

詳細

Netlify デプロイ用スキル

プロジェクトの設定とデプロイコンテキストをインテリジェントに検出し、Netlify CLI を使用してウェブプロジェクトを Netlify にデプロイします。

概要

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

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

前提条件

  • Netlify CLI:npx 経由でインストールします(グローバルインストールは不要です)
  • 認証:有効なログインセッションがある Netlify アカウント
  • プロジェクト:現在のディレクトリに有効なウェブプロジェクトがあること
  • サンドボックスによってデプロイのネットワーク呼び出しがブロックされる場合は、network-enabled shell permissions で再実行してください。
  • デプロイには数分かかることがあります。適切なタイムアウト値を使用してください。

認証パターン

このスキルでは、事前認証済みの 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 のプロンプトで、ビルドコマンドと公開ディレクトリを確認します → 依存関係がインストールされていることを確認します → ビルドログで具体的なエラーを確認します

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

トラブルシューティング

ネットワークアクセスの昇格

ネットワークの問題(タイムアウト、DNS エラー、接続のリセット)が原因でデプロイに失敗した場合は、権限を昇格してデプロイを再実行します(network-enabled shell permissions を使用します)。サンドボックスのネットワーク設定によって外部へのリクエストがブロックされる場合、デプロイには昇格したネットワークアクセスが必要です。

ユーザーへの案内例:

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 を使用します

リファレンス

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

コメント