Tailwind Logo

Auth0 を追加した Next.js App Router のアプリを Vercel に展開する

Next.jsVercel

公開日: 2024-06-24

前回作成をしたアプリはローカルで動作していました。今回はローカルではなく Vercel に展開してログインできるように進めていきます。

Vercel に展開する

まず最初に、Vercel の管理画面に移動して New Project で作成していたリポジトリを選択します。

auth0deployvercel01.png

環境変数に関しては、ローカルで利用していた .env の値をひとまずそのまま展開します。localhost を指定している AUTH0_BASE_URL は展開後に URL を決めてから変更していきます。

auth0deployvercel02.png

しばらくすると展開が完了してサイトが立ち上がります。

auth0deployvercel03.png

Vercel に展開ができました。ここから微調整をしていきます。

プロジェクトの調整

環境変数の変更

展開をした Vercel のプロジェクトで設定している Domain に関して、使いたいドメイン名に変更をして( vercel.app だと DNS を変更しなくてもよいためテストではおすすめ)、サイトの FQDN を確定します。

このドメインの設定を、環境変数の AUTH0_BASE_URL に設定をして、環境変数が変わったので redeploy を実行して値を反映させます。

変更後、ログインをしようとすると、以下の画面が表示されるようになります。

auth0deployvercel05.png

Autho のアプリケーションの設定

上記のエラー画面は、Auth0 で作成をしたアプリケーションに対して、Vercel に展開したドメインが記載されていないためエラーになっている状況です。

この設定は Auth0 の管理画面の Applications から作成をしたアプリケーションを選択して、Application URIs の項目を変更します。複数記載することができるため、今回は以下のように記載しました。

auth0deployvercel06.png

設定を変更して、しばらくすると有効になります。有効になってログイン画面が表示さえるようになったの、以下の画面です。

auth0deployvercel07.png

まとめ

ローカルでテストをした Next.js のプロジェクトをそのまま Vercel に展開をして、同じアカウントでログインができました。本来であれば、本番環境と開発環境は分ける形の運用をするべきですが、今回は開発環境での検証ということで、同じアカウントでログインできるようにした形です。

関連タグ