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 CLI