Photosynthesic blog

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

2019-01-09

Firebaseはじめました。

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

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

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

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

スポンサーリンク

Nuxt.jsをインストール

まずは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.jsonpublicを該当の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 を参照しましょう。

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter