はじめに

今回は、create-react-appで作成したReactアプリをFirebaseへデプロイ際の手順を簡単にまとめます。

※こちらの記事はReact初学者の備忘録・アウトプットを目的とした記事です。理解が浅い部分もありますが、ご容赦ください。何かしら参考になれば幸いです。

そもそもFirebaseとは

FirebaseとはGoogleが提供するアプリのプラットフォームのことです。様々なプロジェクトのデータベースがこのクラウド環境に設置されているわけです。
Firebaseはクラウド環境にデータベースなどを設置して、インターネット経由でアクセスして利用できるようにしています。サーバー側にプログラムを用意する必要がないため、Reactのようなクライアント側だけしかもたないWebアプリでも使用されます。

開発手順

01. Firebaseにプロジェクトを作成する。

まずFirebaseコンソールにアクセスします。そこでプロジェクトの作成をクリックします。

-　プロジェクトに名前をつけて、プロジェクトを作成します。

02. リソースのロケーションを設定する。

左再度のメニューバーから、歯車マークから「プロジェクトを設定」を選択します。
遷移先のページで、「デフォルトのGCPのリソースロケーション」を選択します。（デフォルトでは未設定となっています。）
クラウドリソースのロケーションに「asia-northeast1」に設定します。

03. 使用するプラットフォームを選択

今回はwebアプリを作成するので、「</>」のマークを選択します。
アプリのニックネームを決めて、入力します。
今回はFirebase Hostingの設定にもチェックを入れます。

04. データベースを作成

それぞれのアプリにあったデータベース("cloud fire store"か"real time database")を選択するのですが、公式ドキュメントを参考にしてください。
今回はfire storeを利用するので、サイドバーから、cloud fire storeを選択します。
すると、以下のページに遷移するので、「データベースの作成」をクリックしてください。
本番モードかテストモードかを聞かれますが、firestore.rulesというファイルで設定を上書きするので、どちらでもいいです。

05. 各コマンドの実行

firebase toolsをグローバルインストールします。ターミナルで以下のコマンドを実行します。(一度でも実行したことがあれば、実行する必要はありません)

% npm install -g firebase-tools

firebaseをインストール

% npm install —save firebase

firebaseにログイン

% firebase login

googleアカウントを選択して許可します。

06.firebase initを設定

% firebase init

Witch Firebase CLI features do you want to set up for this folder?と聞かれますが、今回は
◯Firestore
◯Functions
◯Hosting
にチェックを入れます。
(上下の方向キーで移動して、スペースキーでチェックを入れます。選択したEnterキーで次へ進みます。)

続いてPlease select an option:と聞かれます

今回はプロジェクトを作ってあるので、
use an existing project(既存のプロジェクトを使う)を選択して、プロジェクトを選択します。

What file should be used for Firestore Rules?(firestoreのルールを決めるファイルはこれでいいですか？)と聞かれるので、デフォルトでEnterを押します。
What file should be used for Firestore indexes?（firestoreのindexを決めるファイルはこれでいいですか？）と聞かれるので、こちらもyesで通します。
What langage would you like to use to write Cloud Functions?(cloud functionsをどの言語で書きますか？)と聞かれるので、JavaScriptかtypeScriptかを選択してEnterを押します。(今回はTypeScriptを選択しました。)
Do you want to use TSLint to catch probable bugs and enforce style?と設定を聞かれるので、yesで通します。
Do you want install dependencies with npm now?(npmで依存関係のあるものをインストールしますか？)と聞かれるので、yesで通します。
What do you want to use as your public directory?(どのパブリックディレクトリをつかいますか？)と聞かれます。
create-react-appでは、後ほど生成するbuildファイルを本番環境用に用意するので、「build」を指定してEnterを押します。
Configure as a Single-page app?（SPAとして設定したいですか？）と聞かれますが、SPAを作る人はyesをにしてEnterを押します。

07. firestore.rulesの設定

エディタに戻り、firestore.rulesファイルを開き、最低限のセキュリティ設定を行います。

firestore.rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read;
      allow write: if request.auth.uid != null;
    }
  }
}

こちらは、誰でもデータベースを読み込むことはできるが、書き込みは認証されたユーザーでないとできないという設定を加えることができました。

buildフォルダを生成

本番用のbuildフォルダを生成するために、以下のコマンドを実行します

% npm run build

コンパイルエラーを防ぐためにfunctoins/src/index.jsのimportを一旦コメントアウトします。

functions/src/index.ts

// import * as functions from 'firebase-functions';

08. Firebaseへデプロイ

ターミナルへ戻り、以下のコマンドを実行します。

% firebase deploy

成功すると、下の方にHosting URLというものが現れますが、こちらが本番環境のURLになります。

firebase deploy時のエラー解決

deploy時に400番のエラーを返されることがあります。
こちらは、firebaseの料金プランが違うためです。firebaseの料金プランを無料プランから、Blaze(従量課金制)に変更しなくてはなりません。基本的に個人で開発する程度のデータ量なら、無料で使えるはずですが、公式ドキュメントを参考にしてプランを変更してみてください。

おわりに

大分冗長な説明になってしまいましたが、最後までお付き合いくださりありがとうございました。
修正点等ありましたら、教えてくださると助かります。

React学習日記② ~Firebaseへのデプロイ~