Vercel+Vercel+Route53でStaging環境を構築
TL;DR
- Next.js をホスティングしている Vercel に Route53 で取得した独自ドメインを追加し、Staging 環境を構築する手順を紹介します。
- main ブランチを Production 環境、release ブランチを Staging 環境としています。
以下は利用した Next.js のプロジェクトです。
前提
Route53 でドメインを取得済みとします。Route53 でドメインを取得する方法は以下を参照ください。
Route53 で取得したドメインを Production 環境に設定済みとします。Route53 で取得したドメインを Production 環境に設定する方法は以下を参照ください。
GitHub のリポジトリで、release ブランチが Staging 環境、main ブランチが Production 環境となるように、今回は環境を構築します。
VercelにStaging環境のURLを設定
以下の手順で、Vercel に Staging 環境の URL を設定します。
Vercel プロジェクトを選択します。
「Settings」をクリックします。
「Domains」をクリックします。
以下の通り処理します。
- ドメイン名を入力しました。
- ドメイン名は「staging.next-study-ak3la.com」としました。
- 「staging」は Staging 環境を表すために付けました。
- 「Add」をクリックします。
以下の通り処理します。
- Route53 にレコードがないためエラーになります。
- 「Edit」をクリックします。
以下の通り処理します。
- 「Git Branch」に「release」を入力します。
- 「release」と入力することで、release ブランチに書き込まれた内容が staging 環境として反映されます。
- 「Save」をクリックします。
以下に記載の内容を Route53 のレコードに追加します。
Route53にレコードを作成
以下の手順で、Staging 環境用のレコードを Route53 に作成します。
AWS マネジメントコンソールにログインします。
以下の手順で、Route53 のダッシュボードの画面に移動します。
- 「Route53」を検索ボックスに入力します。
- 「Route53」をクリックします。
- 「ホストゾーン」をクリックします。
- 「ホストゾーン名」をクリックします。
- 「レコードを作成」をクリックします。
- レコード名、レコードタイプ、値を入力します。
- 「レコードを作成」をクリックします。
- レコードが作成されました。
Vercel の設定画面に戻ります。
Vercelの設定確認
先程、登録した内容にエラーが出ていないか確認します。
エラーが解消されていることを確認しました。
Next.jsのプロジェクト確認
以下のようなプロジェクトが Vercel に作成されていることを確認します。
mainブランチ
Vercel の Production 環境で表示するコンテンツを準備されていることを確認します。
$ git checkout main
以下が Production 環境に表示するコンテンツです。
import { NextPage } from 'next';
const Home: NextPage = () => {
return (
<>
<h1>Production</h1>
</>
);
};
export default Home;
releaseブランチ
Vercel の Staging 環境で表示するコンテンツを準備されていることを確認します。
$ git checkout main
以下が Staging 環境に表示するコンテンツです。
import { NextPage } from 'next';
const Home: NextPage = () => {
return (
<>
<h1>Staging</h1>
</>
);
};
export default Home;
Production環境・Staging環境への反映
リポジトリにコンテンツをプッシュし、コンテンツを Production 環境、Staging 環境を反映させます。ブランチを更新することで、Staging 環境が反映されます。
$ git push origin main
$ git push origin release
結果を確認
Production 環境の URL を確認します。
- next-study-ak3la.com にアクセスします。
- Production と表示されていれば、成功です。
Staging 環境の URL を確認します。
- staging.next-study-ak3la.com にアクセスします。
- Staging と表示されていれば、成功です。
まとめ
本記事では、Vercel で Production と Staging の環境を作成する方法を紹介しました。
参考
Discussion