はじめに
Githubにある既存リポジトリをVercelへデプロイする方法、その際の注意事項について記載します。
目次
🧷 既存リポジトリのデプロイ手順
1. Vercel と GitHubの連携
まず、Vercel のダッシュボードにアクセスし、GitHub でログインします。
2. プロジェクトのインポート
- ダッシュボードの 「Add New...」 ボタンをクリックし、「Project」 を選択
- 「Import Git Repository」 というセクションが表示されるので、デプロイしたいリポジトリを選択して 「Import」 をクリック
- 目的のリポジトリが見当たらない場合は、「Configure GitHub App」 などのリンクから、Vercel がアクセスできるリポジトリの権限を調整ください。
💡 上記Import Git Repositoryセクションで対象リポジトリが見当たらない場合は一度、GitHub の Settings > Applications > Vercel の Configure > Repository access の設定をご確認ください。
Only select repositoriesの設定になっている場合は、All repositories へ変更し再度、Vercel側のImport Git Repositoryセクションでリポジトリ検索してみてください。
3. プロジェクトの設定（Build & Deployment）
インポート画面に進むと、以下の設定項目が表示されます。
-
Root Directory：
package.jsonがリポジトリのルートにある場合は変更不要 - Build and Output Settings：通常は自動設定のままで動作する。
-
Environment Variables：
.envファイルに記述しているような環境変数（APIキーなど）がある場合は、ここで入力 -
Framework Preset：
Next.js,Nuxt,Vite,Create React Appなど、Vercel がプロジェクトの構成ファイルを読み取って自動判別してくれます。
基本はそのままで OK
4. デプロイの実行
設定が完了したら 「Deploy」 ボタンを押します。数分でビルドが完了し、公開用の URL が発行されます。
💡 デプロイは成功するがNOT FOUNRとなる場合
対象のVercelプロジェクト > Deployments > DeploymentsIDクリック > Source > Output をご確認ください。
Outputでは、アプリケーションのルートファイル(初めに読み込まれるファイル)が示されている必要があります。
なので、もしここにindex.jsやindex.htmlがなければ一度、Project Settings > Build and Deployment > Framework Settings > Output Directory が正しいか確認してみてください。
srcやpublicフォルダにルートファイルがある場合は、添付の.だとNOT FOUNRになる可能性があります。
上記Project Settingsで誤りがある場合は修正後、CurrentコミットをRedeployして、変更分を反映させてください。
🧷 デプロイ後の挙動
Vercel の大きな特徴は、Git との自動同期です。
- Main ブランチへの Push：今後、ローカルで作業して
git pushするたびに、Vercel が自動的に新しいコミットを検知して再デプロイ（Production Deployment）を行います。 - プルリクエスト：他のブランチから PR を作成すると、そのブランチ専用のプレビュー環境（Preview Deployment） が自動生成されます。
💡 もし CLI で行いたい場合、ブラウザを使わずターミナルからコマンド一発でデプロイすることも可能
-
npm i -g vercelで CLI をインストール - プロジェクトのルートディレクトリで vercel コマンドを実行
- 対話形式の質問に答えるだけでデプロイが完了