Firebase / quickstart-js の試し方 #JavaScript

Firebase とは、サーバを実装しなくてもネットワークアプリが作れるように色々な部品を提供してくれる物だが、とりあえず試用してみるために、既存の Firebase アプリの実行方法とデプロイ方法についてまとめる。ここでは以下に記載のあるとおり作業する。

サーバ側に Firebase プロジェクトを作成する

Firebase Console でサーバ側に自分のプロジェクトを作成する。

Project name, Project ID, Country/region を適当に入れる。
- CREATE PROEJCT
Authentication > SIGN-IN METHOD で使いたいログイン方法を enable
- Facebook や Twitter には
  - API ID / secret などが必要
  - Whitelist URL の設定が必要

localhost で起動する。

サンプルをclone してプロジェクトに移動。

git clone git@github.com:firebase/quickstart-js.git
cd quickstart-js/auth

firebase-tools のインストール

$ npm install -g firebase-tools

ログイン。コマンドラインからブラウザを開いてログインするとは面白い！

$ firebase login

firebase use --add でカレントディレクトリのプロジェクトを追加。

$ firebase use --add
? Which project do you want to add? friendlychat-xxxx (先程作ったサーバ上のプロジェクトを選択)
? What alias do you want to use for this project? (e.g. staging) staging (とりあえず staging とタイプする)
$ firebase serve

ローカルでアプリを起動。

firebase serve

http://localhost:5000/ で起動する。

この quickstart-js/auth サンプルでは、script タグで firebase SDK を読み込んでいる。npm を使う場合は npm install firebase のようにする。

Firebase の「プロジェクト」とは?

Firebase では「プロジェクト」を二つの意味で使うのでややこしい。

Project directory: firebase.json のあるディレクトリの事。ローカルで開発中の物を指す。firebase init コマンドで作成する。
Firebase project: Firebase Console で作成したアプリの事。リモートのプロジェクト。

一つの Project directory (ローカル側) に複数の Firebase project (リモート側) を紐付ける事が出来る。紐付けする時に alias という名前を付ける。上はでは staging という alias を設定した。alias は開発環境と本番環境を切り替える時に使える。

特に現在選択中の Firebase project (alias) を active project と呼ぶ。

alias は firebase use コマンドで管理して、.firebaserc ファイルに保存される。

アプリを Google の提供するサーバにデプロイする。

Firebase は各プロジェクトごとにホスティングサーバを用意してくれるので、そこにアプリをデプロイ出来る。デプロイは

$ firebase deploy

するだけ、ホスティング URL は Firebase Console > Hosting > Domain に出てくる。

`firebase serve` や `firebase deploy` の環境の特徴。

firebase serve による開発サーバや firebase deploy による Firebase ホスティングを使わなくてもアプリの開発は出来る。ただ、これらの Firebase 環境を使うと Reserved URLs というのが使えるようになり、firebase 認証情報をソースに書く必要が無くなってちょっと嬉しい。

例えば、普通は firebase の apiKey 等をソースコードに書く必要があるが、Reserved URLs の /__/firebase/init.json を使うと初期化コードは以下のように書ける。

const initialize = async () => {
    const response = await fetch('/__/firebase/init.json');
    const json = await response.json();
    firebase.initializeApp(json);
    return;
};

自分のアプリを作るには

順番が前後するが、公式サイトでは Add Firebase to your JavaScript Project にアプリ開発のチュートリアルがある。ここでは昔ながらの script タグで読み込む方法がメインで書かれていて紛らわしい。全然今風に npm install firebase で開発する事も出来る。

開発は firebase コマンドを使わないでも出来るが、Firebase ホスティングにデプロイしたくなったら

$ firebase init

で現在のディレクトリに Firebase プロジェクトを作る。このコマンドはホスティングのデプロイする以外に色んな事が出来るらしいが、ここでは Hosting だけを選ぶ。

Which Firebase CLI features do you want to setup for this folder?
- Hosting だけを選んだ。
Select a default Firebase project for this directory
- あらかじめ Firebase Console で作ったプロジェクトを選ぶ。
What do you want to use as your public directory
- デプロイしたいディレクトリを書く。たとえば create-react-app を使ってる人なら build。
Configure as a single-page app (rewrite all urls to /index.html)
- これを有効にすると、どの URL にアクセスしても index.html を返すらしい。
- なんか良くわからないので N にした。
File build/index.html already exists. Overwrite?
- これを Y にするとサンプル HTML が出来る。
- webpack の人はどうせ上書きされるのでどっちでも良い。

設定は以下のファイルに書き込まれる。

firebase.json : プロジェクトの設定。どのディレクトリをホスティングするか等。
.firebaserc : このディレクトリと Firebase サーバを結びつける alias が記述されている。firebase init や firebase use で作られる。

設定が済むと

$ firebase deploy

で Firebase のホスティングにデプロイされる。

firebase CLI

firebase login
- firebase コマンドを使うアカウントにログインする。
- トークンなどの接続情報は ~/.config/configstore/firebase-tools.json に保存される。
  - 設定の保存には https://www.npmjs.com/package/configstore が使われている。
- ソース: https://github.com/firebase/firebase-tools/blob/master/src/commands/login.ts#L60
firebase login
- ログアウトする。
- ~/.config/configstore/firebase-tools.json から接続情報を削除する。
firebase login:ci
- 新規にログインした後、refresh token を configstore ではなく標準出力に出す。
- firebase CLI で使うには
  - 環境変数 FIREBASE_TOKEN に保存する。
  - --token (TOKEN) のようにオプションを指定する。
- やってみると FIREBASE_TOKEN も --token も deprecated 警告が出る。GOOGLE_APPLICATION_CREDENTIALS というのを使って欲しいらしい。
- GOOGLE_APPLICATION_CREDENTIALS の使い方はこちらに追加で書いた Firebase CLI と GOOGLE_APPLICATION_CREDENTIALS - Qiita
firebase use
- alias の設定を行う。設定は .firebaserc に保存される。
- firebase use: 設定済 alias の表示
- firebase use (alias 名または Project ID): active project を alias の中から選択する。
  - 設定は configstore に保存される。
- firebase use --clear: active alias を未選択にする。
  - 設定は configstore に保存される。
- firebase use --unalias (alias 名): alias を削除する。設定は .firebaserc に保存される。
firebase serve
- ローカルで動かす。ローカルで動かすだけでも firebase login 必要。
firebase deploy
- Project directory を active project にデプロイする。

参考

Firebase CLI

Firebase / quickstart-js の試し方