#おさらい
前回の記事でAuth0の登録はできたので、今回はNuxtとAuth0を使用してフロント側を作成します。
この記事の内容はこちらのリポジトリで管理しています。
#構成イメージ
NuxtからAuth0を経由してgoogleでユーザ認証を行います。
Nuxtの準備
実行環境
Google Chrome 67.0.3396.8
MacOS High Sierra 10.13.5
Yarn 1.7.0
Vue-cli 2.9.6
Nuxt.js 1.0.0
Nuxtの新しいプロジェクトを作成
vue-cliを使用してNuxtの新しいプロジェクトを作ります。
vue-cliをinstall
yarn global add vue-cli@2.9.6
Nuxtプロジェクトを作成。
今回は~/study-auth0 というディレクトリを作成し、その配下で開発を進めていくことにします。
プロジェクト名はnuxt-auth0としました。
実行コマンド抜粋
vue init nuxt-community/starter-template nuxt-auth0
cd nuxt-auth0
yarn install
yarn dev
実際に実行したターミナルの内容
~/study-auth0 ❯❯❯ yarn global add vue-cli@2.9.6 ✘ 130
yarn global v1.7.0
[1/4] 🔍 Resolving packages...
⠁ (node:4183) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Installed "vue-cli@2.9.6" with binaries:
- vue
- vue-init
- vue-list
✨ Done in 6.09s.
~/study-auth0 ❯❯❯ vue init nuxt-community/starter-template nuxt-auth0
? Project name nuxt-auth0 #プロジェクト名
? Project description Nuxt.js & auth0 demo #プロジェクトの概要説明
? Author t******-t******** <t.*.********@gmail.com> #作成者と作成者の連絡先
vue-cli · Generated "nuxt-auth0".
To get started:
cd nuxt-auth0
npm install # Or yarn
npm run dev
~/study-auth0 ❯❯❯ cd nuxt-auth0
~/s/nuxt-auth0 ❯❯❯ yarn install
yarn install v1.7.0
info No lockfile found.
[1/4] 🔍 Resolving packages...
⠁ (node:4228) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
warning nuxt > postcss-cssnext@3.1.0: 'postcss-cssnext' has been deprecated in favor of 'postcss-preset-env'. Read more at https://moox.io/blog/deprecating-cssnext/
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
✨ Done in 20.23s.
~/s/nuxt-auth0 ❯❯❯
~/s/nuxt-auth0 ❯❯❯ yarn dev ✘ 130
yarn run v1.7.0
$ nuxt
nuxt:build App root: /Users/****************/study-auth0/nuxt-auth0 +0ms
nuxt:build Generating /Users/**************/study-auth0/nuxt-auth0/.nuxt files... +2ms
nuxt:build Generating files... +23ms
nuxt:build Generating routes... +9ms
nuxt:build Building files... +26ms
nuxt:build Adding webpack middleware... +727ms
████████████████████ 100%
Build completed in 3.453s
DONE Compiled successfully in -7542ms 18:13:57
OPEN http://localhost:3000
ここまで実行するとNuxtのdevサーバがport:3000で起動します。
http://localhost:3000/ にアクセスすると以下の画面を確認できます。
#起動ポートの変更とSPAモードの追加
port:3000はRailsなどのアプリケーションと重複して少々都合が悪いため、package.jsonを修正し、
起動ポートを3333に変更しました。
package.jsonを修正
"scripts": {
"dev": "HOST=0.0.0.0 PORT=3333 nuxt", //起動ポートを3333に修正
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
}
SPAモードの設定を追加
今回はSSRは使う予定がないので、SPAモードを指定し静的ビルドの設定をしておきます。
nuxt.config.js
module.exports = {
mode: 'spa',
これで、ポート番号の変更と静的ビルドの準備が整いました。
長くなってしまったので続きは別記事にゆずります。
次回はNuxtにauth0を組込みを行います