Reactのアプリケーションをfirebaseにデプロイする方法

ReactのアプリケーションをFirebaseにデプロイする方法です。

firebase-toolsを入れる

$ npm install -g firebase-tools
$ firebase login

firebaseにログインしようとすると以下のようなことを聞かれます。

 ? Allow Firebase to collect anonymous CLI usage and error reporting information?

Yを押してGoogleアカウントを認証させましょう。成功したら以下のような画面になるはず。

firebaseの初期設定を行う

firebaseのログインに成功したら設定をします。

$ firebase init

firebaseとでかく表示されますね。 いくつか選択肢が示されるので、Hostingを選択。

 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

これスペースキー押してからエンターだから気をつけましょう。エンターだけだとエラーになります。 ここで、自分の作成したプロジェクトが表示されるはずですが、ブラウザのfirebaseにログインしているメールアドレスとfirebase loginでログインしたメールアドレスが違うと出ないので注意しましょう。ターミナルでfirebaseにログインしているだけですから、まあそうですよね。

? What do you want to use as your public directory? public
//=>Enter

? Configure as a single-page app (rewrite all urls to /index.html)?
//=>single-pageではないのでNo

File public/index.html already exists. Overwrite?
//=>No

.firebasercとfirebase.jsonが追加されるので確認してみましょう。

firebaseにデプロイする設定をする

webpackを使っているので、webpackでbuild。

$ ./node_modules/.bin/webpack

webpack.config.jsに記載されているbuild先のpathにbuildされたものが入っているか確認しましょう。

firebaseにデプロイ

$ firebase deploy

これでfirebaseにデプロイできます。firebaseのHostingの項目からurlを確認することができるので、それをクリックして表示されるか確認してみましょう。

公開を停止したい

公開を停止したい時には、以下のコマンドを打ちましょう。

$ firebase hosting:disable

再度アクセスするとこんな画面になるはずです。 再度画面を表示させたい時には、もうfirebase deployで一度デプロイすればokです。

まとめ

firebaseを使うとサーバーサイドをやってくれて簡単にデプロイすることができるので、良いですね。ただ、Firebaseを使えば何でもかんでも簡単にできてやりやすい！っていうわけではないかな。リレーショナルデータベースじゃないからデータベース毎に関連性を持たせることはできないので、辛い部分もあります。複雑なアプリケーションなら、いくつもテーブルがあって、関連性を持たせるようなものが多いと思いからやっぱりそういうのは向かないかもね。