GitHub × Vercel連携の設定 — 自動デプロイ環境を構築する

はじめに

コードを書いて、GitHubにプッシュして、さらにサーバーにアップロードして…というのは手間がかかります。GitHub × Vercelを連携しておくと、GitHubにプッシュするだけで自動的にサイトが公開される環境を作れます。

この記事では、その連携方法と仕組みについてご紹介します。

連携すると何が起きるのか

一度設定すれば、あとは意識することなくGitHubにプッシュするたびに自動でサイトが更新されます。

連携の設定手順

前提条件

• GitHubアカウントを持っている
• Vercelアカウントを持っている（GitHubアカウントでサインアップ可能）
• GitHubにリポジトリが作成済み

ステップ1: Vercelにログイン

Vercelのダッシュボード（vercel.com）にログインします。GitHubアカウントでサインアップしていれば、すでに連携の準備ができています。

ステップ2: 新しいプロジェクトを作成

「Add New」→「Project」を選択します。

ステップ3: GitHubリポジトリを選択

連携したいGitHubリポジトリの一覧が表示されるので、対象のリポジトリを選択して「Import」します。

ステップ4: 設定を確認してデプロイ

プロジェクト名やビルド設定を確認し、「Deploy」ボタンを押します。多くの場合、自動検出された設定のままで問題ありません。

連携後の動作

連携が完了すると、以下のような動作になります。

特に便利なのは、ブランチごとにプレビュー環境が自動生成される点です。「この変更、本番に出す前に確認したい」というときに、わざわざ別の環境を用意する必要がありません。

環境変数の設定

APIキーやシークレットキーなど、コードに直接書きたくない情報は、Vercelの環境変数として設定できます。

Vercelのプロジェクト設定画面から「Environment Variables」を選び、必要な変数を追加します。

例:
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgres://...

Claude Codeで「この環境変数を使って」と指示すれば、コード内で参照する形で実装してくれます。

設定がわからないときは

連携の設定や環境変数の設定でつまずいたときは、いくつかの方法があります。

Claude Codeに聞く

「Vercelの環境変数の設定方法をファイルに書き出して」と指示すれば、手順をテキストで出力してくれます。

Vercelのドキュメントを参照

Vercelの公式ドキュメントは充実しています。設定画面から「Docs」リンクで該当ページに飛べることも多いです。

ChatGPTに聞く

「VercelとGitHubの連携で〇〇がうまくいかない」と聞けば、解決策を提案してくれることが多いです。

よくあるトラブル

ビルドが失敗する

ローカルでは動くのにVercelでビルドが失敗する場合、以下を確認します。

• Node.jsのバージョン: Vercelのプロジェクト設定でバージョンを指定できます
• 環境変数: ローカルにあってVercelにない環境変数がないか確認
• 依存関係: package.jsonに必要なパッケージが入っているか確認

Claude Codeにエラーログを見せて「このエラーの原因を教えて」と聞くのも有効です。

デプロイされない

GitHubにプッシュしてもデプロイが始まらない場合、VercelのダッシュボードでWebhookの設定を確認します。「Settings」→「Git」から確認できます。

まとめ

• GitHub × Vercelを連携すると、プッシュするだけで自動デプロイ
• ブランチごとにプレビュー環境が自動生成されて便利
• 設定は一度だけ、あとは意識せずに使える
• 困ったときはClaude CodeやChatGPTに相談

一度設定してしまえば、「コードを書く → GitHubにプッシュ → サイトが更新される」という流れが自動化されます。最初の設定だけ頑張れば、あとは楽になります。