firebase-toolsのインストールとfirebase init (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)
★前回の記事
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
以下のような文字が表示されます。燃えてます。
Firebaseのどの機能を使うのか聞かれるので、DatabaseとHostingを選択してください。上下キーで選択し、スペースキーでON/OFFを切り替えてください。選択できたらEnterキーを押します。
どのFirebaseプロジェクトとひもづけるか聞かれますので、前回作成したtodo-sampleを選択します。
データベースの設定ファイルの名前を聞かれます。デフォルトのdatabase.rules.jsonを使うので、何も入力せずEnterキーを押します。
公開するファイルのルートディレクトリを聞かれますので、build と入力します。
シングルページアプリケーションかどうか聞かれますので、y を入力します。
build/index.html がすでに存在している場合、上書きするか聞かれますが、Nを選択して上書きされないようにしてください。
これでfirebaseの設定ファイルが作成されました。
todo-sample
|_ database.rules.json
|_ firebase.json
|_ .firebaserc
続いて、firebase.jsonのhosting直下に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です。画像はアクセスした後、動作確認をしている時のものです。
真っ白なページが表示される場合は、firebase.jsonの中身を確認してください。
"public": “public”,
になっていませんか？”public": “build”,に直しましょう。
まだfirebaseと全く接続していないので、次回以降で接続していきます。
開発中はfirebaseのhosting機能ではなく、create-react-appの開発用サーバ(webpack-dev-server)を使います。ソースコードの変更を即座に反映させるのと、エラーを画面に表示させるためです。
# サーバを起動する $ yarn start # http://localhost:3000/ でアプリが立ち上がる
以上でfirebaseの設定ファイルの作成は完了です。
★次回の記事
★目次
