nuxt.js+Firebaseで認証ページを作る②

nuxt.jsインストール編

前回に続いて
今回は、nuxt.jsのインストールとfirebaseのプラグイン導入をやっていきましょう。

今回のシリーズの全リンクはこちら↓

nuxt.js+Firebaseで認証ページを作る① (Firebase準備編)
nuxt.js+Firebaseで認証ページを作る② (nuxt.jsインストール編)
nuxt.js+Firebaseで認証ページを作る③ (pages&layouts準備編)
nuxt.js+Firebaseで認証ページを作る④ (認証機能実装編)

早速nuxtをインストールしよう

それでは早速、nuxt.jsをインストールしていきます。
まずは、ターミナルを開いて
任意のディレクトリへ移動して
下記を実行しましょう。

npx create-nuxt-app < 任意のアプリ名 >

npx create-nuxt-appの後、任意のアプリ名を入力して下さい。
ここでは、「sample」としておきます。

nuxtの設定項目は、こんな感じです。
https://i.imgur.com/JNhU05H.png

特にどの設定も好きな設定で良いですが。
今回はCMSを想定しています。
CMSなどwebサイト側にSEOの配慮をする必要があるwebサービスを作る場合は
サーバーサイドレンダリング(SSR)が必要となるので
choose rendering modeという項目はUniversalとします。

また、今回のチュートリアルでは、UI Frameworkを
Vuetifyで進めていくので
choose UI framework の箇所もVuetifyを選択しましょう。
nuxtの設定を全て選択したらEnterを押しましょう。

インストールが終わると下の画像のような構成でnuxtアプリが構築されているかと思います。
それでは、ひとまず確認のため、アプリを開発モードで起動してみましょう。
https://i.imgur.com/4seW6hx.png

cd sample
npm run dev

ブラウザを開いて
localhost:3000
にアクセスしましょう。

nuxt.jsはUI FrameworkにVuetifyを選択すると
最初からかなりそこそこなUIのアプリが出来上がっています。

Vuetifyは非常に簡単にリッチなUIのアプリを作れてしまうので
オススメです。
最近、2.0.0系がリリースされ、これまで以上に便利なUIが増えています。
https://i.imgur.com/oLwxUYK.png

firebaseのプラグインを導入しよう。

それでは、続いてfirebaseのnodeモジュールをインストールして
firebaseプラグインを作成していきましょう。

先ほど、npm run devでnuxtのサーバーが起動しているので一回、「control + c」で終了させます。
nuxtのサーバーが終了したら下記を実行しましょう。

npm i firebase

次に、pluginsディレクトリにfirebase.jsというプラグインファイルを作成します。

touch plugins/firebase.js

作成できたらfirebase.jsをVSCodeなどのエディタで開き
下記のようにモジュールを読み込み
firebaseの初期化コードを書いてやりましょう。

import firebase from 'firebase/app'
import 'firebase/auth'

if (!firebase.apps.length) {
  firebase.initializeApp()
}


さて、この「firebase.initializeApp()」ですが
このメソッドの引数に渡してやる必要があるのが
前回Firebaseのアプリ追加画面に表示されていた。
apiキーなどの設定情報です。

firebaseのプラグインを利用するためにはこの設定情報が必要となります。

firebaseコンソールにアクセスしてapiキーなどの設定情報を取得しよう。

それでは、ブラウザでfirebaseコンソールへアクセスして
firebaseの設定情報を取得しましょう。

コンソールにアクセスしたら前回作成したプロジェクトをクリックしましょう。
https://i.imgur.com/LPvmVZg.png


Firebaseの管理画面に入ったら
サイドナビ上部の歯車のアイコンをクリックします。
https://i.imgur.com/7QotY2M.png


下画像のようにメニューが表示されるので「プロジェクトの設定」をクリックします。
「Settings」というページへ移動したら
そのページの一番下までスクロールしましょう。
https://i.imgur.com/Rrr1Zz4.png


すると、前回アプリ追加画面に表示されていた。
設定情報が見つかると思います。
https://i.imgur.com/uyXR0eM.png


こちらの画像と同じ範囲をコピーして先ほどの
firebase.initializeApp()メソッドの引数のところに
ペーストしてやります。
https://i.imgur.com/lyxzv0e.png

↓

import firebase from 'firebase/app'
import 'firebase/auth'

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: <your config code>,
    authDomain: <your config code>,
    databaseURL: <your config code>,
    projectId: <your config code>,
    storageBucket: "",
    messagingSenderId: <your config code>,
    appId: <your config code>
  })
}

これで、firebaseモジュールの初期化ができましたので
最後に、firebaseモジュールのauthメソッドを
storeなどの別のjsファイルにインポートできるように
モジュールをエクスポートしておいてやりましょう。

import firebase from 'firebase/app'
import 'firebase/auth'

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: <your config code>,
    authDomain: <your config code>,
    databaseURL: <your config code>,
    projectId: <your config code>,
    storageBucket: "",
    messagingSenderId: <your config code>,
    appId: <your config code>
  })
}

export const fireAuth = firebase.auth()

まとめ

以上、
今回は、nuxtのインストールとfirebaseのプラグイン導入をやっていきました。
前回と比べるとだいぶ薄い内容にはなってしまいましたが
実装の手順、工程としてキリが良いので
今回はここまでにしておきましょう。

次回は、認証画面に必要な最低限のページとレイアウトファイルを作成していきます。