🐈

Vercel+Vercel+Route53でStaging環境を構築

2023/02/21に公開

TL;DR

  • Next.js をホスティングしている Vercel に Route53 で取得した独自ドメインを追加し、Staging 環境を構築する手順を紹介します。
  • main ブランチを Production 環境、release ブランチを Staging 環境としています。

以下は利用した Next.js のプロジェクトです。

https://github.com/hayato94087/vercel-staging-sample

前提

Route53 でドメインを取得済みとします。Route53 でドメインを取得する方法は以下を参照ください。

https://zenn.dev/hayato94087/articles/f03773b87a9837

Route53 で取得したドメインを Production 環境に設定済みとします。Route53 で取得したドメインを Production 環境に設定する方法は以下を参照ください。

https://zenn.dev/hayato94087/articles/07e1d7c34d1bb6

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 環境で表示するコンテンツを準備されていることを確認します。

terminal
$ git checkout main

以下が Production 環境に表示するコンテンツです。

src/page/index.tsx
import { NextPage } from 'next';

const Home: NextPage = () => {
  return (
    <>
      <h1>Production</h1>
    </>
  );
};

export default Home;

releaseブランチ

Vercel の Staging 環境で表示するコンテンツを準備されていることを確認します。

terminal
$ git checkout main

以下が Staging 環境に表示するコンテンツです。

src/page/index.tsx
import { NextPage } from 'next';

const Home: NextPage = () => {
  return (
    <>
      <h1>Staging</h1>
    </>
  );
};

export default Home;

Production環境・Staging環境への反映

リポジトリにコンテンツをプッシュし、コンテンツを Production 環境、Staging 環境を反映させます。ブランチを更新することで、Staging 環境が反映されます。

terminal
$ 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 の環境を作成する方法を紹介しました。

参考

https://zenn.dev/keitakn/articles/nextjs-vercel-create-staging

Discussion

ログインするとコメントできます