はじめに
今回は、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ファイルを開き、最低限のセキュリティ設定を行います。
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を一旦コメントアウトします。
// import * as functions from 'firebase-functions';
08. Firebaseへデプロイ
- ターミナルへ戻り、以下のコマンドを実行します。
% firebase deploy
成功すると、下の方にHosting URLというものが現れますが、こちらが本番環境のURLになります。
firebase deploy時のエラー解決
deploy時に400番のエラーを返されることがあります。
こちらは、firebaseの料金プランが違うためです。firebaseの料金プランを無料プランから、Blaze(従量課金制)に変更しなくてはなりません。基本的に個人で開発する程度のデータ量なら、無料で使えるはずですが、公式ドキュメントを参考にしてプランを変更してみてください。
おわりに
大分冗長な説明になってしまいましたが、最後までお付き合いくださりありがとうございました。
修正点等ありましたら、教えてくださると助かります。