firebase-toolsのインストールとfirebase init (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

firebase-toolsのインストールとfirebase initを実行して、プロジェクトにFirebaseの設定ファイルを追加します。

firebase-toolsのインストールとログイン

まず、firebase-tools (firebaseのコマンドラインツール)をインストールします。

$ yarn global add firebase-tools

インストールできたらバージョンを確認します。

$ firebase --version
4.2.1

バージョンが表示されれば、正常にインストールされています。

次に、Googleアカウントでログインします。

$ firebase login

ブラウザが立ち上がり、Googleアカウントの選択画面になります。Firebaseプロジェクトを作成したアカウントを選択してください。

firebase initの実行

前回作成したプロジェクトのルートフォルダに移動してください。その後firebase initコマンドを実行します。 create-react-app を利用したプロジェクトにfirebaseを導入するので、create-react-appのマニュアル (create-react-app/README.md at master · facebook/create-react-app · GitHub) の通りに進めます。

$ cd todo-sample
$ firebase init

以下のような文字が表示されます。燃えてます。

f:id:yucatio:20180924000354p:plain

Firebaseのどの機能を使うのか聞かれるので、DatabaseHostingを選択してください。上下キーで選択し、スペースキーでON/OFFを切り替えてください。選択できたらEnterキーを押します。

f:id:yucatio:20180924100836p:plain

どのFirebaseプロジェクトとひもづけるか聞かれますので、前回作成したtodo-sampleを選択します。

f:id:yucatio:20180924140459p:plain

データベースの設定ファイルの名前を聞かれます。デフォルトのdatabase.rules.jsonを使うので、何も入力せずEnterキーを押します。

f:id:yucatio:20180924124516p:plain

公開するファイルのルートディレクトリを聞かれますので、build と入力します。

f:id:yucatio:20180924124806p:plain

シングルページアプリケーションかどうか聞かれますので、y を入力します。

f:id:yucatio:20180924125750p:plain

build/index.html がすでに存在している場合、上書きするか聞かれますが、Nを選択して上書きされないようにしてください。

f:id:yucatio:20180924130401p:plain

これでfirebaseの設定ファイルが作成されました。

todo-sample
    |_ database.rules.json
    |_ firebase.json
    |_ .firebaserc

続いて、firebase.jsonhosting直下にheaders設定を追加します。これを追加しないと、firebaseにデプロイしたときに、最新のリソースに更新されないそうです。

{
  // 略
  "hosting": {
    "public": "build",
    "headers": [
      {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
    ],
  // 略
  }
}

それでは、ビルドして、fierbaseのエミュレータで表示されるか確かめてみましょう。

$ yarn run build
$ firebase serve

http://localhost:5000/ にアクセスして、React + Reduxのサンプルアプリが表示されればOKです。画像はアクセスした後、動作確認をしている時のものです。

f:id:yucatio:20180923233920p:plain

真っ白なページが表示される場合は、firebase.jsonの中身を確認してください。 "public": “public”, になっていませんか?”public": “build”,に直しましょう。

まだfirebaseと全く接続していないので、次回以降で接続していきます。

開発中はfirebaseのhosting機能ではなく、create-react-appの開発用サーバ(webpack-dev-server)を使います。ソースコードの変更を即座に反映させるのと、エラーを画面に表示させるためです。

# サーバを起動する
$ yarn start
# http://localhost:3000/ でアプリが立ち上がる

以上でfirebaseの設定ファイルの作成は完了です。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com