MCP HubMCP Hub
← Retour aux compétences

deploy-to-vercel

pjt222
Mis à jour 2 days ago
6 vues
17
2
17
Voir sur GitHub
Autregeneral

À propos

Cette compétence déploie des applications Next.js sur Vercel, en gérant la liaison des projets, les variables d'environnement et les configurations de déploiement. Elle est utilisée pour les déploiements initiaux, la mise en place de déploiements de prévisualisation pour les demandes de fusion et la gestion des domaines personnalisés. Les développeurs doivent l'utiliser lorsqu'ils ont besoin d'automatiser l'hébergement Vercel et les workflows CI/CD pour leurs projets Next.js.

Installation rapide

Claude Code

Recommandé
Principal
npx skills add pjt222/agent-almanac -a claude-code
Commande PluginAlternatif
/plugin add https://github.com/pjt222/agent-almanac
Git CloneAlternatif
git clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/deploy-to-vercel

Copiez et collez cette commande dans Claude Code pour installer cette compétence

Documentation

name: deploy-to-vercel description: > Next.jsアプリケーションをVercelにデプロイします。プロジェクトのリンク、 環境変数、プレビューデプロイメント、カスタムドメイン、本番デプロイメントの 設定を扱います。Next.jsアプリを初めてデプロイするとき、プルリクエスト用の プレビューデプロイメントをセットアップするとき、カスタムドメインを設定するとき、 またはVercel本番デプロイメントの環境変数を管理するときに使用します。 locale: ja source_locale: en source_commit: 6f65f316 translator: claude-opus-4-6 translation_date: 2026-03-16 license: MIT allowed-tools: Read Write Edit Bash Grep Glob metadata: author: Philipp Thoss version: "1.0" domain: web-dev complexity: basic language: TypeScript tags: vercel, deployment, nextjs, hosting, ci-cd

Vercelへのデプロイ

Next.jsアプリケーションを本番設定でVercelにデプロイします。

使用タイミング

  • Next.jsアプリを初めてデプロイするとき
  • プルリクエスト用のプレビューデプロイメントをセットアップするとき
  • カスタムドメインを設定するとき
  • 本番環境の環境変数を管理するとき

入力

  • 必須: ローカルで正常にビルドされるNext.jsアプリケーション
  • 必須: GitHubリポジトリ（推奨）またはローカルプロジェクト
  • オプション: カスタムドメイン
  • オプション: 本番用の環境変数

手順

ステップ1: ローカルビルドの確認

npm run build

期待結果： ビルドがエラーなしで成功します。

失敗時： デプロイ前にビルドエラーを修正してください。よくある原因：TypeScriptエラー、依存関係の不足、無効なインポート。

ステップ2: Vercel CLIのインストール

npm install -g vercel

期待結果： vercelコマンドがグローバルに使用可能で、vercel --versionでインストールされたバージョンが表示されます。

失敗時： 権限エラーが発生する場合はsudo npm install -g vercelを使用するか、npmをユーザーローカルプレフィックスを使用するように設定してください。node --versionでNode.jsがインストールされているか確認してください。

ステップ3: リンクとデプロイ

# Vercelにログイン
vercel login

# デプロイ（初回：プロジェクトを作成）
vercel

# プロンプトに従う：
# - Set up and deploy? Y
# - Which scope? (アカウントを選択)
# - Link to existing project? N (新規プロジェクトの場合)
# - Project name: my-app
# - Directory: ./
# - Override settings? N

期待結果： プレビューURLが提供されます（例：https://my-app-xxx.vercel.app）。

失敗時： vercel loginが失敗する場合は、インターネット接続を確認してブラウザベースの認証を試してください。デプロイが失敗する場合は、ビルド出力のエラーを確認してください。Vercelはクリーンな環境を使用するため、すべての依存関係がpackage.jsonに含まれている必要があります。

ステップ4: 環境変数の設定

# 環境変数の追加
vercel env add DATABASE_URL production
vercel env add API_KEY production preview

# 環境変数の一覧表示
vercel env ls

またはVercelダッシュボード経由で設定：Project Settings > Environment Variables。

期待結果： vercel env lsが正しい環境（production、preview、development）に設定された必要なすべての環境変数を表示します。

失敗時： 変数がランタイムに表示されない場合は、対象環境が一致しているか確認してください（productionとpreview）。変数を追加した後は再デプロイしてください。既存のデプロイメントは新しい変数を自動的に取得しません。

ステップ5: 本番デプロイ

vercel --prod

期待結果： 本番URLが使用可能になります（例：https://my-app.vercel.app）。

失敗時： vercel logsまたはVercelダッシュボードでデプロイログを確認してください。よくある問題として、本番環境での環境変数の欠落やローカルセットアップとは異なるビルドコマンドがあります。

ステップ6: 自動デプロイ用のGitHub接続（推奨）

  1. https://vercel.com/new にアクセス
  2. GitHubリポジトリをインポート
  3. Vercelが自動的にデプロイします：
    • mainへのプッシュ → 本番デプロイメント
    • プルリクエスト → プレビューデプロイメント

期待結果： VercelダッシュボードにGitHubリポジトリが接続されて表示され、mainへの以降のプッシュが自動的に本番デプロイメントをトリガーします。

失敗時： リポジトリがインポートリストに表示されない場合は、Vercel GitHubアプリがリポジトリへのアクセス権を持っているか確認してください。GitHub Settings > Applications > Vercelでアクセスを許可してください。

ステップ7: カスタムドメインの設定

vercel domains add my-domain.com

またはダッシュボード経由で：Project Settings > Domains。

Vercelの指示通りにDNSレコードを更新します（通常はCNAMEまたはAレコード）。

期待結果： vercel domains lsにカスタムドメインが設定済みとして表示され、DNS伝播後（最大48時間）にドメインがVercelデプロイメントに解決されます。

失敗時： ドメインに「Invalid Configuration」と表示される場合は、DNSレコードがVercelの指示と完全に一致しているか確認してください。dig my-domain.comまたはオンラインDNSチェッカーを使用して伝播を確認してください。

ステップ8: 設定の最適化

高度な設定のためにvercel.jsonを作成します：

{
  "framework": "nextjs",
  "regions": ["iad1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" }
      ]
    }
  ]
}

期待結果： vercel.jsonがプロジェクトルートに保存され、次のデプロイメントで設定が反映されます（Vercelダッシュボードのビルドログで確認可能）。

失敗時： 設定が無視される場合は、jq . vercel.jsonでvercel.jsonが有効なJSONであるか確認してください。一部の設定がnext.config.tsに移動している可能性があるため、お使いのフレームワークバージョンのVercelドキュメントを確認してください。

バリデーション

  • npm run buildがローカルで成功する
  • プレビューデプロイメントが機能してアクセス可能
  • 本番デプロイメントがアプリケーションを正しく提供する
  • 本番環境で環境変数が使用可能
  • カスタムドメインが解決される（設定した場合）
  • GitHubインテグレーションがプッシュ時にデプロイをトリガーする

よくある落とし穴

  • Vercelでビルド失敗するがローカルでは成功する: Vercelはクリーンな環境を使用します。すべての依存関係がpackage.jsonに含まれており、グローバルにインストールされているだけでないことを確認してください。
  • 環境変数の欠落: 変数は.env.localだけでなくVercelにも追加する必要があります。環境（production、preview、development）ごとに変数セットが分かれています。
  • Node.jsバージョンの不一致: Project SettingsまたはNode.jsのバージョンをpackage.jsonのenginesフィールドに設定してください。
  • 大きなデプロイメント: Vercelにはサイズ制限があります。.vercelignoreを使用して不要なファイルを除外してください。
  • APIルートのタイムアウト: VercelサーバーレスファンクションはHobbyプランで10秒のタイムアウトがあります。最適化するかアップグレードしてください。

関連スキル

  • scaffold-nextjs-app - デプロイするアプリの作成
  • setup-tailwind-typescript - デプロイ前のスタイリング設定
  • configure-git-repository - 自動デプロイインテグレーション用のGitセットアップ

Dépôt GitHub

pjt222/agent-almanac
Chemin: i18n/ja/skills/deploy-to-vercel
0
agentsagentskillsai-assisted-developmentclaude-codeskillsteams

Compétences associées

llamaguard

Autre

LlamaGuard est le modèle de Meta, doté de 7 à 8 milliards de paramètres, conçu pour modérer les entrées et sorties des LLM selon six catégories de sécurité comme la violence et les discours haineux. Il offre une précision de 94 à 95 % et peut être déployé avec vLLM, Hugging Face ou Amazon SageMaker. Utilisez cette compétence pour intégrer facilement le filtrage de contenu et des garde-fous de sécurité dans vos applications d'IA.

Voir la compétence

cost-optimization

Autre

Cette compétence de Claude aide les développeurs à optimiser les coûts du cloud grâce au redimensionnement des ressources, aux stratégies d'étiquetage et à l'analyse des dépenses. Elle fournit un cadre pour réduire les dépenses cloud et mettre en œuvre une gouvernance des coûts sur AWS, Azure et GCP. Utilisez-la lorsque vous devez analyser les coûts d'infrastructure, redimensionner les ressources ou respecter des contraintes budgétaires.

Voir la compétence

quantizing-models-bitsandbytes

Autre

Cette compétence quantifie les LLMs en précision 8 bits ou 4 bits à l'aide de bitsandbytes, permettant une réduction de 50 à 75 % de la mémoire utilisée avec une perte de précision minime. Elle est idéale pour exécuter des modèles plus volumineux sur une mémoire GPU limitée ou pour accélérer l'inférence, prenant en charge des formats comme INT8, NF4 et FP4. La compétence s'intègre à HuggingFace Transformers et permet l'entraînement QLoRA ainsi que l'utilisation d'optimiseurs en 8 bits.

Voir la compétence

dispatching-parallel-agents

Autre

Cette compétence Claude déploie plusieurs agents pour enquêter et résoudre simultanément 3 problèmes indépendants ou plus. Elle est conçue pour des scénarios impliquant des défaillances non liées qui peuvent être résolues sans état partagé ni dépendances. La capacité fondamentale est la résolution de problèmes en parallèle, en assignant un agent par domaine problématique indépendant afin de maximiser l'efficacité.

Voir la compétence