Next.js + Vercelでステージング環境を構築
概要
Vercelでホスティングしているアプリケーションに独自ドメインを追加してステージング環境を構築するための手順を解説します。
この記事を書こうと思った動機
VercelはコミットごとにPreview環境のURLを作成してくれますが、固定ドメインでの開発環境やステージング環境が必要なケースも多々あるので、やり方をまとめてました。
対象読者
- Vercelを利用したことがある人
- Next.jsの知識がある人
前提条件
独自ドメインを所持していて利用できる状態になっている必要があります。
この記事では exmple.com というドメインのホストゾーンがAWSのRoute 53上に作成されている前提で話を進めます。
具体的な手順
以下に具体的な手順を示します。
Vercel側で独自ドメインを作成
Project Settings → Domainsから独自ドメインを作成する。
stg-frontend.exmple.com とします。
このままだとProduction環境として扱われてしまうので、Git Brunchを staging に指定します。
この設定を行なうことでPreview環境として扱われるようになります。
Route 53 にCNAMEレコードを追加
Vercelの指示に従い、以下のようにCNAMEレコードを追加します。
レコード名: stg-frontend
レコードタイプ: CNAME
値: cname.vercel-dns.com
Terraformを利用している場合は下記のようになります。
resource "aws_route53_record" "stg_frontend" {
name = "stg-frontend"
type = "CNAME"
zone_id = "hosted zone id を措定"
ttl = "5"
records = ["cname.vercel-dns.com"]
}
成功すると以下の状態になり https://stg-frontend.exmple.com でアクセスできるようになります。
Production、Stagingそれぞれに環境変数の追加
各環境ごとに環境変数を持たせる事ができるか確認します。
Project Settings → Environment Variablesから環境変数を追加します。
STAGEという環境変数を Production, Preview に追加します。
Preview を選択する際に staging brunchを指定します。
これによって追加したステージング環境のみ値を変えることが可能になります。
環境ごとに環境変数の値が変わっているか確認
追加した環境変数 STAGE が以下のように各環境ごとで異なることが確認できます。
プレビュー環境
ステージング環境（今回作成した独自ドメイン）
本番環境
注意事項
VercelのPreview環境は通常であれば、x-robots-tag: noindex というHTTPヘッダーが自動で追加されます。
これによって検索エンジンでの検索結果から除外されておりSEO的なリスクに対して対策が行なわれています。
しかし今回作成したステージング環境のように独自ドメインのPreview環境は x-robots-tag: noindex が付与されないので、独自に対策を行なう必要があります。
- HTTPヘッダー
x-robots-tag: noindexを自分で付与する - Production環境以外は何らかの手段でアクセス制限をかける
アクセス制限に関してはSEOの問題以外にもセキュリティ要件的にステージング環境はIP制限などで関係者以外の人間以外はアクセス不可としている組織が多いと思います。
Vercelは追加料金を支払えば パスワードによるアクセス制限 を行なうことができます。
しかし月額150$の追加料金が必要です。
その為 nextjs-basic-auth などを使って自前でベーシック認証を導入するのが現実的かと思いますが、このpackageは現在、Next.js 11系だとVercel上で動作しませんでした。
https://github.com/jchiatt/nextjs-basic-auth/issues/6 が解決すれば正常動作するようになると思いますが、それまでは何らかの手段でアクセス制限を行なう必要があります。
個人的には nextjs-basic-auth を使った方法がシンプルだと思ったので、https://github.com/jchiatt/nextjs-basic-auth/issues/6 が解決することが一番望ましいと思っています。
もしも長期間解決しないようであれば nextjs-basic-auth を参考に別packageの作成なども検討しようと思います。
2021年10月31日 追記
Next.js 12がリリースされたことにより Middleware を利用できるようになりました。
ベーシック認証を利用する場合は Middleware を利用することをオススメします。
あとがき
Next.jsを使っている場合は現状Vercelがもっとも無難な選択だと思っていますが、本番環境以外の環境のアクセス制限周りがもう少し充実してくれると嬉しいなと感じています。
以上になります。最後まで読んでいただきありがとうございました。
Discussion