Nuxt.js + Auth0 + Spring Boot で作る認証付きSPA 【 vol.2 Nuxt準備編 】

#おさらい
[前回の記事でAuth0の登録はできた](https://qiita.com/mijinco0612/items/ffd60bf52c4b4ea3a35a)ので、今回はNuxtとAuth0を使用してフロント側を作成します。
この記事の内容は[こちらのリポジトリ](https://github.com/mijinco0612/Nuxt-auth0)で管理しています。

#構成イメージ
![Untitled.png](https://qiita-image-store.s3.amazonaws.com/0/82787/f31eaacd-58c3-60ae-cef2-316af6d765cf.png)

NuxtからAuth0を経由してgoogleでユーザ認証を行います。


# Nuxtの準備


```bash:実行環境
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**としました。


```bash:実行コマンド抜粋
vue init nuxt-community/starter-template nuxt-auth0
cd nuxt-auth0
yarn install
yarn dev
```

```bash:実際に実行したターミナルの内容
~/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/ にアクセスすると以下の画面を確認できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/82787/30e1b141-b5ec-4e6a-6576-703da03b3354.png)


#[起動ポートの変更とSPAモードの追加](https://github.com/mijinco0612-self-improvement/Nuxt-auth0/commit/399104a78da8723a294456b67478fa2827e1b27f)
port:3000はRailsなどのアプリケーションと重複して少々都合が悪いため、package.jsonを修正し、
起動ポートを3333に変更しました。

```javascript: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モードの設定を追加](https://github.com/mijinco0612-self-improvement/Nuxt-auth0/commit/57268f52e5143d7ea73dc5a3e3bfc4fa16479b75)
今回はSSRは使う予定がないので、SPAモードを指定し静的ビルドの設定をしておきます。

```javascript:nuxt.config.js
module.exports = {
  mode: 'spa',
```

これで、ポート番号の変更と静的ビルドの準備が整いました。

長くなってしまったので続きは別記事にゆずります。
[次回はNuxtにauth0を組込みを行います](https://qiita.com/mijinco0612/items/3adc49357ef619fd5c3c)

#参考資料
https://qiita.com/massa142/items/7de17b214cefb5b9a1d6