Nuxt.jsのAuth0連携サンプルをDockerで動かせるようにしてみた

実行手順、コードの変更点、今後の課題

Takashi Iwamoto
Jul 1 · 5 min read

Nuxt.jsAuth0と連携するサンプルを公開しています。ただ、ローカル実行しかサポートされていなかったり、最新のNuxt.js(現時点で2.8.1)で動かなかったり、少し不便です。そこで、Dockerかつ最新のNuxt.jsで動かせるようforkしてみました

今回の記事では、fork版の実行手順をご紹介します。また、コードの変更点や今後の課題についても触れます。

実行手順

fork版の実行手順は、ざっと下記の流れです。

  1. Auth0の設定
  2. リポジトリのクローン
  3. 設定ファイルの作成
  4. Dockerコンテナの実行

Auth0の設定

まず、Auth0の設定を進めます。アカウントがなければ登録が必要です。

アカウント登録後、Auth0の管理画面を開き、任意のアプリケーションに対して下記の値を設定します。

注:サンプルアプリのURLが http://localhost:3000 であることを前提としています。環境に合わせてお読み替えください。

設定が済んだら、アプリケーションの Domain と Client ID の値をメモしておきます。あとで使うためです。

リポジトリのクローン

次に、fork版のリポジトリをクローンします。

$ git clone https://github.com/vt-iwamoto/nuxt-example-auth0.git
$ cd nuxt-example-auth0

設定ファイルの作成

そして、config.sample.json を元に、config.json を作ります。

$ cat config.sample.json
{
"AUTH0_CLIENT_ID": "",
"AUTH0_CLIENT_DOMAIN": ""
}
$ cp config.sample.json config.json

config.jsonの空文字部分には下記の値を指定します。

Dockerコンテナの実行

あとは、Dockerイメージをビルドしてコンテナを実行するだけです。exec.sh を使うのが手軽です。

$ cat exec.sh
docker build -t nuxt-example-auth0 .
docker run --rm -p 3000:3000 -it nuxt-example-auth0
$ sh exec.sh

サンプルアプリが立ち上がったら、ブラウザで http://localhost:3000/ にアクセスします。下記のようにAuth0でのログイン処理を試せるはずです。

すぐに触ってみたい方のために、Herokuにデプロイ済みです。起動に少し時間がかかるかもしれませんが、お気軽にお試しください。

コードの変更点

コードの変更点のうち、最新のNuxt.jsで動かすために加えたのは下記の2点でした。

  1. package.json の dependencies"core-js": "2.6.9" を追加
  2. nuxt.config.js に mode: 'spa' を追加

1つめは、Nuxt.js 2.5.0 で core-js@2 を明示的にインストールしなければならなくなったことによるものです。

2つめは、SPAモードにしないと、utils/auth.js で window オブジェクトにアクセスしている部分でエラーとなるためです。こちらは経緯が調べきれていません。

他の変更点は、Docker用のコード追加とドキュメント調整くらいです。

今後の課題

最後に、今後の課題をメモしておきます。

もともとは、それなりの規模のアプリをNuxt.jsで作るのが目的でした。ユーザ管理の手間を省くのにAuth0がよさそうだと思い、サンプルを動かそうとしたらダメだったので、とりあえず動かせるようにした次第です。

VELTRA Engineering

Posts from the VELTRA Engineering team. www.veltra.com

Takashi Iwamoto

Written by

An web developer at VELTRA corporation, a member of JAPAN MENSA

VELTRA Engineering

Posts from the VELTRA Engineering team. www.veltra.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade