jpskill.com
🛠️ 開発・MCP コミュニティ

deploying-to-production

Automate creating a GitHub repository and deploying a web project to Vercel. Use when the user asks to deploy a website/app to production, publish a project, or set up GitHub + Vercel deployment.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o deploying-to-production.zip https://jpskill.com/download/21246.zip && unzip -o deploying-to-production.zip && rm deploying-to-production.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/21246.zip -OutFile "$d\deploying-to-production.zip"; Expand-Archive "$d\deploying-to-production.zip" -DestinationPath $d -Force; ri "$d\deploying-to-production.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して deploying-to-production.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → deploying-to-production フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

本番環境へのデプロイ

ユーザーが「このウェブサイト/アプリをデプロイしてください」などと依頼した場合に、このワークフローを使用します。チェックリストの項目を順番に実行し、ステップを飛ばさないでください。

デプロイワークフロー

  • [ ] ステップ1: ビルドを実行し、エラーがないことを確認する
  • [ ] ステップ2: GitHubリポジトリを作成する
  • [ ] ステップ3: コードをGitHubにプッシュする
  • [ ] ステップ4: Vercelにデプロイする
  • [ ] ステップ5: デプロイを検証する

ステップ1: ビルドを実行する

以下を実行してください。

npm run build

ビルドが失敗した場合は、エラーを読み、問題を修正して再度実行してください。ビルドが成功した場合のみ、次のステップに進んでください。

ステップ2: GitHubリポジトリを作成する

プロジェクトの新しいGitHubリポジトリを作成してください。リポジトリがすでに存在する場合は、再利用するか新しいものを作成するかを確認してください。

ステップ3: コードをGitHubにプッシュする

必要に応じてgitを初期化し、リモートを追加して、デフォルトブランチをプッシュしてください。リポジトリに期待されるコードが含まれていることを確認してください。

ステップ4: Vercelにデプロイする

GitHubリポジトリをVercelにデプロイしてください。デプロイURLを記録してください。

ステップ5: デプロイを検証する

URLを開くか、応答を確認して、ライブデプロイを検証してください。検証が失敗した場合は、診断して再デプロイしてください。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Deploying to Production

Use this workflow when a user says "deploy this website/app" or similar. Follow the checklist in order and do not skip steps.

Deployment Workflow

  • [ ] Step 1: Run build and verify no errors
  • [ ] Step 2: Create GitHub repository
  • [ ] Step 3: Push code to GitHub
  • [ ] Step 4: Deploy to Vercel
  • [ ] Step 5: Verify deployment

Step 1: Run build

Run:

npm run build

If build fails, read the errors, fix issues, and run again. Only proceed when build succeeds.

Step 2: Create GitHub repository

Create a new GitHub repository for the project. If the repo already exists, confirm whether to reuse or create a new one.

Step 3: Push code to GitHub

Initialize git if needed, add remote, and push the default branch. Confirm the repository contains the expected code.

Step 4: Deploy to Vercel

Deploy the GitHub repo to Vercel. Capture the deployment URL.

Step 5: Verify deployment

Verify the live deployment by opening the URL or checking a response. If verification fails, diagnose and redeploy.