Vercelにステージング環境を構築する方法の簡単なメモです。

ステージング環境とは

最終的なテストのために、できるだけ本番に近い状態でデプロイした環境と理解しています。

問題点

• メールを送信するアプリでは、実際にメールを送信しますが、宛先だけはテスト用のアドレスとしたかったりしました。このためには、テスト用の環境変数でそれを設定したいと思いました。
• 認証もおこなった上での動作を見たかったのですが、developブランチへのpushやRenovateによるプルリクエストで自動的にデプロイされるpreviewでは、URLがランダムなため、Auth0での認証を使う設定がわかりませんでした。

方法

1. 独自ドメインを取得する(Google Domains等）
2. VercelのSettingsのDomainsで、本番用(production)のドメインとdevelopブランチのドメインを追加する（下図の二番目と三番目）。
   • developブランチのドメインをステージング環境と位置づけます。
   • 任意のブランチを割り当てることもできます。
   • ドメインをVercelで使うための設定をします。
     • Google Domainsを用いた場合だと、マイドメインから該当するドメインの管理画面のDNSでカスタムレコードを設定します（設定すべき値はVercelが教えてくれます）。
3. 同じ画面で独自ドメインを当てる前の本番用ドメインから独自ドメインを当てた後のドメインへのリダイレクトを設定する（下図の一番上）
4. VercelのSettingsのEnvironment Variablesより、productionとpreview/developのそれぞれ用の環境変数を設定する。