Firebaseの設定
Firebaseでプロジェクトを立ち上げる
- ブラウザでFirebaseのコンソール(https://console.firebase.google.com/u/0/?hl=ja) へアクセスし、Googleアカウントでログインする
- 指定のプロジェクトを追加をクリックする
- アルファベットの適当なプロジェクト名を設定する
- Googleアナリティクスを有効にして続行する
- アナリティクスのアカウントを作成してプロジェクトを作成する
プロジェクトの初期設定を行う
- プロジェクト画面で、web設定(**>**ボタン）をクリックする
- アプリのニックネーム(上のプロジェクト名と同様で良い）を設定して次へをクリックする
- Firebase SDKの追加で、次へをクリックする
-
Firebase CLIのインストールで、表示されたコマンド(npm install -g firebase-tools)をPCのコマンドラインで実行する
※過去に実行したことがある場合は不要 - Firebase Hosting Deployで次へをクリックする
プロジェクトの設定を行う
- プロジェクト画面の右上の設定ボタン（左上の歯車ボタン）をクリックする
- リソースロケーションで、asia-notheast1を選択し、完了をクリックする
※ここは一度設定すると変更不可のため注意 - 左のCloud Firestoreをクリックする
- データベースの作成をクリックする
- 本番環境の開始を選択して続行する
- ロケーションの選択は変更せず完了をクリックする
ターミナルでの設定
ローカルのディレクトリとFirebaseを紐付ける
- ローカルPCにアプリを作るディレクトリを作る
- コマンドラインで作成したディレクトリに移動する
- コマンドラインで、firebase loginと入力してEnterする
- ブラウザ上でGoogleアカウントを選択する画面に移動したら、上でしていたGoogleアカウントを選択して許可をする
- コマンドラインで、firebase initと入力してEnterする
- firebaseで使用するサービスが表示されるため、矢印キーとスペースキーで下記を選択してEnterする
- Firestore
- Functions
- Hosting
- Storage
- 使用するプロジェクトとして、新規プロジェクトor既存のプロジェクトを聞かれるため、既存のプロジェクト Use an existing projectを選択してEnterする
- ブラウザのFirebase画面で生成したプロジェクト一覧が表示されるため、上で生成したプロジェクト名を選択してEnterする
- Firestoreで使用するルール、Firestoreのindexを聞かれるので、デフォルトの設定のまま（何も入力せず）、Enterする
- 使用する言語としてJavaScriptとTypeScriptの選択が表示されるため、得意な言語を選択する
- ESLintを用いるか、依存関係のあるパッケージのインストールを聞かれるため、どちらもデフォルトの設定（ESLintは使用しない、パッケージはインストールする）のままEnterする
- publicディレクトリを聞かれるため、buildと入力してEnterする（デフォルトではpublic)
- SinglePageAppとして設定するかを聞かれるので、yesと入力してEnterする（デフォルトではNo）
これでFirebaseとの紐付けは完了
必要なパッケージの追加
開発に必要と思われるパッケージをnpmインストールする。
コマンドラインで、下記のコマンドを実行する(XXXXX, YYYYY, ZZZZZに必要なパッケージ名を記入)
npm install --save XXXXX YYYYY ZZZZZ
開発におすすめのパッケージ
| パッケージ名 | 内容 |
|---|---|
| @material-ui/core | material-uiの基本 |
| @material-ui/icons | material-uiのアイコン |
| @material-ui/styles | material-uiのスタイル |
| connected-react-router | Reactルータのパッケージ |
| firebase | Firebase |
| history | URL遷移の記録 |
| react-redux | reduxのパッケージ |
| react-router | ルーティングのパッケージ |
| redux | redux |
| redux-actions | reduxのactions |
| redux-logger | reduxのstateの変化のログ |
| redux-thunk | reduxの非同期処理を待つ |
| reselect |
上記を実行すると、ディレクトリ内のpackage.jsonに上記が追加される
デプロイの実行
デプロイして公開する
- コマンドライン上でnpm run buildと入力して実行し、ビルドを行う(公開できるようにファイルを変換する)
- firebase deployを実行する
*firebaseのプランを無料から従量制に変更しておかないとHTTP ERROR: 400と表示される
3. コマンドライン上に表示されたURLをコピーしてブラウザで実行すると、生成した画面が生成される