概要

フロントエンド

• React
• React Redux
• redux-thunk
• react-redux-firebase
• Materialize (Meterial Design)

バックエンド

• Firebase Authentication（Email・パスワード認証）
• Cloud Firestore (users, projects)
• Cloud Functions
• Hosting（デプロイ先として使う）

テスト

• Jest
• Enzyme

環境

• Node v10.16.0
• create-react-app

Firebaseの設定

Firebaseコンソール

• Firebaseコンソールでプロジェクトを作成しウェブアプリを追加
• Authentication, Database(Cloud Firestore), Functions, Hostingを有効にする
• Databaseの「ルール」タブでアクセス権限を設定

service cloud.firestore {
  match /databases/{database}/documents {
    match /projects/{project} {
      allow read, write: if request.auth.uid != null
    }
    match /users/{userId} {
      allow create
      allow read: if request.auth.uid != null
      allow write: if request.auth.uid == userId
    }
    match /notifications/{notification} {
      allow read: if request.auth.uid != null
    }
  }
}

• プロジェクトの設定 ＞ Firebase SDK snippetから構成情報をコピーしてconfig/firebase.jsのexport const firebaseConfigを上書きする

開発環境

Firebaseコマンドをインストール。

npm install -g firebase-tools

ソースコードのディレクトリで、Firebaseのセットアップ。

firebase login
firebase init

どのFirebaseサービスと関連付けるかを聞かれるので、FunctionsとHostingをスペースキーで選択。

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◯ 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

Functionsの言語はJavascriptを選択。

? What language would you like to use to write Cloud Functions? JavaScript

deployするファイルを配置する場所はpublicではなくdistに変更する。

? What do you want to use as your public directory? (public) 

その他の設問はお好みで。

Functions

Firebase Functionsのコードはfunctionsディレクトリにある。

cd functions
npm install

ローカルで実行

npm install
npm start

ビルド

npm run build

デプロイ

npm run deploy

テスト

npm test