Nuxt.js と Firebase を使ってWebアプリを作ってみる：インストール編

Firebaseはじめました。

こんにちは、みみです。新年なので新しいことを始めたくなる病を発症。

先日のエントリーの通りNuxtはいいぞと思ったので、Firebase と合わせてちょっくらWebアプリを作ってみることに。

FirebaseとはとかNuxtとはとかは、そういう記事がわんさかあるので飛ばして、インストール方法からメモしておきます。

教科書はここ　Firebase を JavaScript プロジェクトに追加する | Firebase。これに書いているとおりにやれば大丈夫です。以下は自分用メモ。

Nuxt.jsをインストール

$ npx create-nuxt-app myapp

myapp がプロジェクト名。ディレクトリの構成の正解がよくわからないけれど、とりあえずFirebaseの一個下にNuxtを入れてみています。

Firebaseをアプリに紐付ける

Firebaseコンソールから新しいプロジェクトを作成。Headerに読み込む代わりに、教科書のNODE.JSのタブのほうを参照。Nuxtではplugins/firebase.jsとか作って以下のように書きます。

import firebase from 'firebase'

if (!firebase.apps.length) {
    firebase.initializeApp({
        apiKey: "<API_KEY>",
        authDomain: "<PROJECT_ID>.firebaseapp.com",
        databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
        storageBucket: "<BUCKET>.appspot.com"
    })
}
export default firebase

「ウェブアプリに Firebase を追加」のスニペットでAPI_KEYとPROJECT_ID、DATABASE_NAME、BUCKETなどを確認してコピペしてきます。

ここの書き方は　【v2対応しました】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する – Qiita　を参照。Authを使いたかったのでこれを真似しましたが使わない場合はif文要らないかな？

Firebaseのインストール

以上でもうFirebaseを利用できるはず。ですが、

ウェブアプリを作成する場合、Firebase JavaScript SDK の一部では、ウェブアプリがローカルファイルシステムからではなく、サーバーから提供されている必要があります。ローカルサーバーを実行するには、次のように Firebase CLI を使用します。
開発用ローカルウェブサーバーを実行する

と書いているのでFirebase CLIをインストールします。

$ npm install -g firebase-tools

としてまず firebase-tools をグローバルにインストール。必要な人はsudoを。

initの前にloginが必要って言われるので、loginしましょう。

$ firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? Y

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=...

Waiting for authentication...

✔  Success! Logged in as YOUR GOOGLE ACOUNT

という感じで、Firebaseが匿名でCLIの使用状況やエラー報告の情報を収集するのを許可しますか？て聞かれるのでY/nで答えて認証画面（ブラウザに飛ぶ）に進みます。認証が終わればlogin完了。

$ firebase init

とすると、このフォルダ用にどのFirebase CLI機能を設定しますか？とか色々インタラクティブモードで聞かれるので答えると、firebase.json、.firebasercなどが作成されていきます。

$ firebase serve

で、ローカルサーバーが立ち上がります。ただし先のインタラクティブモードでエンター連打したりしているとNuxt.jsの方にならないので、対象ディレクトリを変更します。

firebase.json のpublicを該当のNuxtのdistディレクトリに書き換えましょう。

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "YOUR_NUXT_DIR/dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

これで、も一回serveするとNuxt.jsのトップページが出ると思います。

さあ開発開始です。

おまけ：Firebaseでホスト

ついでにデプロイもお試ししてみましょう。以上のファイルをFirebaseでデプロイするには

$ firebase deploy

すると、firebase-project-name.firebaseapp.com で公開できます。

ホストの話は　Firebase Hosting を使ってみる | Firebase　を参照しましょう。