Next.js × Vercel における複数の環境の作り方

Next.js × Vercel の組み合わせで開発を行っているのですが、テスト環境および環境変数の持ち方が予想よりも遥かに簡単だったので備忘録がてら。

Dev 環境の作成方法

Vercel の初期状態は本番環境しか作成されません、当たり前ですが。

そのため master ブランチの内容がそのまま本番環境に反映されてしまい、とくにリリース後の開発が困難です。

ですが、Vercel では簡単にテスト環境を作成できます。

以下、テスト環境のことは Vercel の命名に従い Preview 環境と呼びます。

1. リモートリポジトリに develop ブランチを作成する（ブランチ名はなんでも OK です）
2. Vercel 内で対象のプロジェクトを開き Settings → Domains と開きます
3. プレビュー環境用のドメインを追加します
4. 追加したドメインの設定を開き Git Branch に develop と入力し保存します

ドメイン周りの設定が反映されたら Preview 環境の完成です！簡単すぎてびびる！

なお DNS レコード周りについても Vercel が丁寧に説明してくれるので、まったく迷うことはありませんでした。

各環境用の環境変数の持ち方

Vercel を使用した場合、以下の 3 つの環境が存在することになります。

上記の環境ごとに環境変数を振り分けることは日常茶飯事だと思うのですが、Vercel ではそれすらも Vercel 上で管理が可能です。

1. Vercel 内で対象のプロジェクトを開き Settings → Environment Variables と開きます
2. 各環境変数ごとに環境を割り当てる

ローカル環境で扱う環境変数をウェブ上で扱うのがユニークですね。

ただしこのままではローカル環境から環境変数へアクセスすることはできません、ローカル環境にに .env ファイルを作成する必要があります。

で、Vercel では npm パッケージを使用して .env ファイルをダウンロードすることが可能です、すごすぎる。

1. npm i -g vercel で vercel コマンドを cli 上で扱えるようにします
2. vercel login でローカル環境から Vercel にログインします
3. vercel link で対応するプロジェクトを紐付けます
4. vercel env pull で .env ファイルをダウンロードします

環境変数については vercel コマンドで追加したり修正することも可能です、利便性がエグすぎる…。

自分もまだ細かいことは調べきれていないので、詳細は 公式サイト で確認して頂ければと。

で、書いといてなんですが、多分 Preview 環境はドメインを準備しなくても作成できると思います。

ただ今のところやり方が分からなかったので、もし知っている方がおられましたらぜひ教えてください。

とはいえ CORS の関係もありますし、ほとんどのケースでサブドメインあたりが使われるとは思いますが。

あと Vercel の利便性はほんとエグいですね。

シンプルながら ux が洗練されていて、かゆいところに手が届きますし、すごすぎる。