【FireBase備忘録】サーバーレスSPA作成② ref: https://qiita.com/Kento75/items/87c2ca4093ba65304216

company_data.json

{
  "companies":{
    "company1":{"company_code": "A001","company_name": "A会社","address": "A地区","mail": "[email protected]"},
    "company2":{"company_code": "B001","company_name": "B会社","address": "B地区","mail": "[email protected]"},    
    "company3":{"company_code": "C001","company_name": "C会社","address": "C地区","mail": "[email protected]"}
  }
}

config.js

// firebase設定
export const firebaseConfig = {
  apiKey: 'APIKEY',
  authDomain: 'AUTHDOMAIN',
  databaseURL: 'DATABASE_URL',
  storageBucket: 'STORAGE_BUCKET',
  messagingSenderId: 'MESSAGING_SENDERID'
};

database.rules.json

{
  "rules": {
    ".read":"true",
    ".write": "true"
  }
}

file0.sh

$ npm install             # プロジェクトディレクトリ内で実行する。

file1.sh

$ firebase login   # ブラウザが開くのでgoogle アカウントとパスワードでログイン&諸々許可
$ firebase init

? Are you ready to proceed? (Y/n)  # Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your cho
ices.
>(*) 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

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Select a default Firebase project for this directory:
  [don't setup a default project]
> React-SPA ({プロジェクトID})     # すでに作成してあるプロジェクトを選択
  [create a new project]

=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? (database.rules.json)  # Enter押下

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public)          # Enter押下
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) # No
+  Wrote public/404.html
? File public/index.html already exists. Overwrite? (y/N)  # No
i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!

file10.sh

# windowsの場合
$ npm run build-windows

# linuxの場合
$ npm run build

# FireBaseへデプロイ
$ firebase deploy

file3.sh

# windowsの場合
$ npm run build-windows

# linuxの場合
$ npm run build

$ firebase deploy
　　・
　　・
　　・
Hosting URL: https://{プロジェクトID}.firebaseapp.com

firebase.json

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

index.js

import firebase from 'firebase';
import { firebaseConfig } from './config';

export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const firebaseDb = firebaseApp.database();

searchPageAction.js

import * as types from '../../types';
import { firebaseDb } from '../../firebase';  // 追加

const ref = firebaseDb.ref('companies');      // 追加

// 中略

// 検索処理の変更と検索成功時、検索失敗時の処理を追加

/**
 * 検索処理
 */
export function searchData() {
  return (dispatch, getState) => {
    dispatch(requestProcess());
    const company_code = getState().searchPageReducer.searchWord;
    return dispatch => {
      ref.off();
      ref.orderByChild('company_code').startAt(company_code).endAt(company_code)
        .once(
          'value',
          snapshot => {
            dispatch(searchSuccess(snapshot));
          },
          error => {
            dispatch(searchError(error));
          }
      );
    };
  };
}

/**
 * 検索成功時
 */
function searchSuccess(snapshot) {
  return {
    type: types.SUCCESS_SEARCH,
    searchedList: snapshot.val(),
  };
}

/**
 * 検索失敗時
 */
function searchError(error) {
  return {
    type: types.FAILED_SEARCH,
    title: '検索失敗',
    message: error.message,
  };
}

// 以下略

searchPageReducer.js

// 中略

    // 検索正常終了時
    case types.SUCCESS_SEARCH:
      let companies = [];
      if (action.searchedList) {
        let company = null;
        Object.keys(action.searchedList).forEach(key => {
          company = action.searchedList[key];
          if(company.company_code === state.searchWord || state.searchWord === '') {
            companies.push([
              company.company_code,
              company.company_name,
              company.address,
              company.mail,
            ]);
          }
        });
      }
      return {
        ...state,
        isLoadingDialogOpen: false,
        searchedList: [...companies],
      };

// 以下略