ReactでFirebase HostingとFirestore #React

巷でFirebaseが流行ってるようなのでReactアプリFirebaseを使う方法をまとめました。15分もあればFirestoreを使うReactアプリをFirebase Hostingをデプロイできるでしょう。

Firebaseにはたくさんの機能がありますが、次の二つを使います。

Firebase Hosting: SPAなど静的ファイルをデプロイできるサービス
- Reactアプリをデプロイする先です。
Firebase Cloud Firestore: ドキュメントDBのサービス
- Reactアプリから呼び出します。

Firebaseのプロジェクト作成

まずは、FirebaseのWebサイトでプロジェクトを作ります。

Firebaseにサインアップします。Googleアカウントがあればすぐ登録できます。
プロジェクトを新規作成します。

Firebase CLIのセットアップ

SPAをFirebase HostingにデプロイするためにCLIをインストールします。

CLIをインストールします。

npm install -g firebase-tools

CLIでFirebaseへログインします。

firebase login

ブラウザが立ち上がってログイン画面が表示されるのでログインします。

Reactアプリの作成

Reactアプリを作ってビルドします。今回はReactとFluxのスターターキットstarter-react-fluxを使います。

mkdir myapp && cd myapp
npx starter-react-flux init
npm run build

さて、これでReactアプリのビルドまで終わりました。

次はFirebase Hostingへのデプロイです。

Fireabase Hostingへのデプロイ

1. Firebaseの初期設定を行います。

firebase init

色々聞かれるので次のように選択します。

Which Firebase CLI features do you want to setup for this folder
- Hosting: Configure and deploy Firebase Hosting sitesをスペースキーで選択してリターン
Select a default Firebase project for this directory
- webで作成しておいたprojectを選択
What do you want to use as your public directory?
- public (何も入力せずリターン)
Configure as a single-page app (rewrite all urls to /index.html)
- Y
File public/index.html already exists. Overwrite
- n

ReactアプリをFirebase Hostingにデプロイします。

デプロイは1コマンド打つだけです。

firebase deploy

動作確認

デプロイ後に表示されるHosting URLをブラウザで開くとReactアプリが確認できます。

=== Deploying to '*****'...
略
✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/*****/overview
Hosting URL: https://*****.firebaseapp.com

Firestoreのデータベース作成

さてこれからはFirestoreを作ってReactアプリから使ってみます。

WebのコンソールからCloud Firestoreを選択します。
- Cloud FirestoreとRealtime Databaseがありますが、Cloud Firestoreを使います。
Cloud FirestoreにDBを作成します。
- テストモードを選択します。
「コレクションを追加」をクリックして、作成したDBにcollectionを作成します。
- コレクション名: articles ß4. 「ドキュメントを追加」をクリックして、collectionに適当なdocumentをひとつ作成します。
- title (string): 任意の文字列
- subtitle (string): 任意の文字列
- text (string): 任意の文字列

ReactアプリからFirestoreへの接続

Firestoreからデータを呼び出して表示するだけのシンプルなアプリを作ります。

ReactアプリにfirebaseのSDKを追加します。

npm install --save firebase

GitHub: firebase/firebase-js-sdk

FluxのAction CreatorからCloud Firestoreにアクセスします。

app/actions/SampleActionCreators.js を開いて、以下を追加します。

import firebase from 'firebase/app'; //必須
import 'firebase/firestore'; //必要なモジュールごとにimport
//例: Cloud Functionを使う場合は import 'firebase/function';

//インスタンスの初期化
firebase.initializeApp({
  apiKey: '*****',
  authDomain: '*****',
  projectId: '*****'
});

const db = firebase.firestore();

※ API keyなどの入力項目はWebコンソールの「プロジェクトの設定」>「アプリ」>「ウェブアプリに Firebase を追加」に記載されています。
※ 認証情報はコードに直書きせず環境変数で指定してビルドするのがThe Twelve-Factor App的にはいいですが今回は割愛します。

初めからあるサンプルのAction Creator( actionCreator001() )を次のように変更します。

  actionCreator001() {
    //articlesコレクションから1件データを取得
    db.collection("articles").limit(1).get().then((response) => {
      //forEach()でドキュメントの配列がとれる
      response.forEach((doc) => {
        //data()でドキュメントがとれる
        const document = doc.data();
        //dispatch()でFluxのストアに送信
        AppDispatcher.dispatch({
          type: ActionTypes.TYPE_001,
          data: {
            "title": document.title,
            "subtitle": document.subtitle,
            "text": document.text
          },
        });
      });
    });
  },

ビルド & デプロイ

アプリをビルドしなおして、Firebase Hostingに再度デプロイします。

npm run build
firebase deploy

動作確認

ボタンをクリックするとFirestoreから取得したデータが表示されます。

まとめ

Firebase Hostingにはfirebase deployだけでReactのSPAをデプロイできる。
Firebase Cloud FirestoreはAction Creatorから簡単に呼べる。

SNS認証をつける方法はこちら

Firebase AuthenticationでReactアプリにTwitter/Facebook/Google認証をつける