こんにちは、アプリケーションサービス部ディベロップメントサービス1課の外崎です。
今回は、Vercelのビルドコマンド設定、環境変数の設定、ブランチのカスタマイズについて詳しく解説します。
入門編はこちらをご覧ください：Vercel入門
Vercelのビルドコマンド
Vercelは、フレームワークに基づいてBuild Commandを自動的に設定します。フレームワークによって、ビルドコマンドはプロジェクトのpackage.jsonファイルを参照します。
デフォルトのビルドコマンド
Next.jsプロジェクトの場合、Vercelは自動的に以下のビルドコマンドを使用します：
next build
カスタマイズ方法
vercel.jsonファイルをプロジェクトのルートディレクトリに配置し、ビルドコマンドをカスタマイズすることができます。
例1: next buildをビルドコマンドとして使用する場合：
{ "buildCommand": "next build" }
例2：npm run custom-buildをビルドコマンドとして使用する場合：
{ "buildCommand": "npm run custom-build" }
この設定により、npm run custom-buildがビルドプロセス中に実行されます。custom-buildスクリプトはpackage.json内で定義します：
{ "scripts": { "custom-build": "next build && echo 'Custom build command executed!'" } }
詳細なビルド設定の情報は、ビルドの構成をご覧ください。
vercel.jsonに関する情報は、vercel.json を使用したプロジェクトの設定をご覧ください。
環境変数の設定
設定方法
Environment Variablesセクションを選択:
プロジェクトの設定ページに移動します。「Environment Variables」セクションを開きます。
環境（開発、プレビュー、本番）を選択:
設定する環境を選択します。
環境変数のキーと値を入力:
キー（名前）と値を入力します。例：
API_KEYとその値。 入力後、「Save」ボタンをクリックして設定を保存します。確認:
環境変数が正しく設定されているか確認します。
envファイルの利用
Vercelでは、.envファイルを使用して環境変数を設定することもできます。「Import .env」ボタンをクリックして、.envファイルをアップロードします。
.env.productionファイルの例：
NEXT_PUBLIC_API=http://sample.com NEXTAUTH_SECRET=example
詳細は、環境変数をご覧ください。
Production Branchの設定
Vercelでは、Production Branch（本番ブランチ）を設定することで、本番環境へのデプロイを特定のブランチからのみ行うことができます。
設定方法
Gitセクションを選択:
プロジェクトの設定ページに移動します。「Git」セクションを開きます。
Production Branchの設定:
「Production Branch」フィールドに本番環境用のブランチ名を入力します（例：
mainまたはmaster、developなど）。設定の保存:
入力後、「Save」ボタンをクリックして設定を保存します。このブランチへのプッシュが本番環境のデプロイメントをトリガーします。
この設定により、本番環境へのデプロイが特定のブランチからのみ行われるようになります。
コードの修正とコミット
- コード修正前:
export default function Page() {
return <h1>Hello, Next.js !</h1>
}
- コード修正後:
export default function Page() {
return <h1>Hello, Next.js Develop!</h1>
}
- 修正を
developブランチにコミット:
git add pages/index.js
git commit -m "fix:pageの修正"
git push origin develop
デプロイの確認
この手順により、developブランチへの変更が自動的にVercelにデプロイされることを確認できます。
