Vercelの初期設定とGitHub連携・自動デプロイの手順

結論

Vercel + GitHub連携の設定は、Vercelのダッシュボードでリポジトリを選ぶだけで完了する。設定後はmainへのプッシュが自動デプロイに繋がり、Pull Requestを開くたびにプレビュー用のURLが自動生成される。開発からデプロイまでのフローが最もシンプルになる構成だ。

Vercelを使う理由

個人開発でサイトを公開する選択肢は複数あるが、Vercelが選ばれやすい理由は3つある。

自動デプロイ：GitHub連携後は、コードをプッシュするだけでビルド・デプロイが走る。FTPでファイルをアップロードする旧来の作業は不要で、コードを書いた数分後にはサイトに反映される。

プレビューURL：mainブランチ以外（featureブランチ）へのプッシュやPull Requestを開くと、本番環境とは別の一時的なプレビューURLが自動生成される。本番に影響せずに変更を確認できる。

CDNによる配信：Vercelはアップロードしたファイルをグローバルなエッジネットワークで配信する。ユーザーに最も近いサーバーから届くため、表示速度が速くなる。

アカウント作成とGitHub連携

1. Vercelのアカウント作成

vercel.comにアクセスし、「Sign Up」を選ぶ。GitHubアカウントでのサインインが最も便利だ。

Sign Up → Continue with GitHub

GitHubとの連携許可を求める画面が表示されるので、「Authorize Vercel」を選択する。

2. プロジェクトのインポート

VercelのダッシュボードでAdd New → Projectを選ぶ。

GitHubリポジトリの一覧が表示されるので、デプロイしたいリポジトリを選んで「Import」を押す。リポジトリが表示されない場合は、「Adjust GitHub App Permissions」でリポジトリへのアクセス権限を追加する。

3. ビルド設定の確認

Astroのプロジェクトであれば、Vercelが自動的にフレームワークを認識してビルド設定を埋める。

設定項目	Astroの場合
Framework Preset	Astro
Build Command	npm run build
Output Directory	dist
Install Command	npm install

多くの場合そのまま「Deploy」を押せばよい。カスタムの設定が必要な場合はここで変更できる。

4. デプロイ

「Deploy」を押すとビルドが始まる。ログがリアルタイムで表示され、完了すると公開URLが表示される。URLはhttps://リポジトリ名.vercel.appの形式になる。

自動デプロイの動き

連携が完了すると、次のような自動化が動くようになる。

mainへのプッシュ → 本番デプロイ：

git add .
git commit -m "記事を追加"
git push origin main

このコマンドを実行するだけで、数分後にサイトが更新される。

ブランチへのプッシュ → プレビューURL生成：

git checkout -b feature/new-design
git push origin feature/new-design

https://プロジェクト名-random.vercel.appのようなURLが生成され、変更をプレビューできる。

環境変数の設定

Supabaseの接続情報やAPIキーなど、コードに直接書けない設定値は環境変数として管理する。

Vercelのダッシュボードでプロジェクトを選択し、Settings → Environment Variablesに移動する。

Name: SUPABASE_URL
Value: https://xxxx.supabase.co

Name: SUPABASE_ANON_KEY
Value: eyJhbGci...

Productionに設定した環境変数は本番環境だけで使われ、Preview・Developmentに設定した変数は開発・プレビュー環境で使われる。

ローカル開発で同じ環境変数を使うには、プロジェクトのルートに.envファイルを作成する。

SUPABASE_URL=https://xxxx.supabase.co
SUPABASE_ANON_KEY=eyJhbGci...

.envファイルはGitに含めない（.gitignoreに追加する）。

ビルドログの確認とトラブルシューティング

デプロイが失敗したときは、VercelダッシュボードのDeploymentsタブでビルドログを確認できる。

よくある失敗の原因：

エラーの症状	原因	対処
Type error: 'xxx' is required	frontmatterの必須フィールドが未定義	記事のfrontmatterを修正
Cannot find module 'xxx'	パッケージが未インストール	package.jsonに依存を追加してコミット
Environment variable not found	Vercelに環境変数が未設定	Settings → Environment Variablesで追加
ビルドタイムアウト	処理が重すぎる	画像処理・サイトマップ生成の最適化

Vercel CLIの使い方（オプション）

ダッシュボードを使わずにターミナルからデプロイしたい場合は、Vercel CLIが使える。

npm i -g vercel
vercel login
vercel    # 現在のディレクトリをデプロイ
vercel --prod    # 本番環境にデプロイ

プロジェクトのプレビューを本番にプロモートしたり、デプロイ前のローカルプレビューを確認したりするときに便利だ。

独自ドメインの設定についてはVercelに独自ドメインを設定する手順を参照してほしい。Astroのプロジェクト作成から始めたい場合はAstroで爆速ブログ・メディアを作る入門もあわせて確認してほしい。

まとめ

VercelのGitHub連携は、リポジトリをインポートするだけで完成する。設定後は「コードを書いてプッシュする」という行為がそのままデプロイになる。環境変数の管理・プレビューURL・エラーログのダッシュボード表示も充実しており、個人開発のホスティング先として最初の選択肢に置いて問題ない。