gmailアカウントの取得

firebaseを使用するにはgmailのアカウントが必要になるので、gmailアカウントを取得する。

以下のURLのgmailアカウントを取得するから行う
https://support.google.com/accounts/answer/27441?hl=ja

firebaseコンソールでプロジェクトを作成

gmailアカウントがある状態でfirebaseコンソールにログインする。

https://firebase.google.com/docs?authuser=0

次の画面のプロジェクト作成ボタンを押す

プロジェクト名（なんでもOK）をつけて、規約に同意し、続行する

グーグルアナリティクスが必要かどうか聞かれる。サーバーにデプロイしたいだけなので、今は必要ないにチェックしてプロジェクトを作成を押す

プロジェクトが作成され、無料プランのSparkプランになっている。

料金に関してはこちら
https://firebase.google.com/pricing/?hl=ja

デプロイするアプリをcreate-react-appで作成する

手順はこちら
https://qiita.com/tsuto/items/3a9aafe7982da87c9c81

Firebase－CLIのインストール

コマンドFirebaseを操作できるようになる。

npm install -g firebase-tools

firebase Cliにログインして、Firebaseプロジェクトを初期化する

firebase Cliにログインする

firebase login

以下のようなメッセージがでますが、どちらでもYとNどちらでもOK

Allow Firebase to collect anonymous CLI usage and error reporting information? (Y/n)

アカウント選択画面に遷移し、そのまま進めると以下のような画面が表示される。

先ほどfirebase loginコマンドを使用して、cliにログインしましたが、別のアカウントで接続したいなどの理由でログアウトしたいときは、以下のコマンドを実行する。

firebase logout

続いてFirebaseプロジェクトを初期化する。以下のコマンドを実行

firebase init

以下のメッセージが表示される。どのfirebaseの機能を選択するか聞かれています。今回はHosting機能のみなので、上下の矢印キーで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

続いて、firebaseプロジェクトを選択します。先ほど作成したプロジェクトを上下の矢印キーで選択してエンターキーを押す。

Select a default Firebase project for this directory: (Use arrow keys)
[don't setup a default project]
testproject-〇〇〇 (testproject)
[create a new project]

次の質問ではfirebaseのHostingにアップロードするディレクトリが聞かれていますが、create-react-appでreactを作成した場合、ビルドしたアセットはbuildディレクトリになるので、buildと入力し、エンターキーを押す。

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)

シングルページアプリケーションかどうか聞かれます。yを入力してエンターキーを押す。（存在しないURLを叩くとindex.htmlにリライトされます。）
Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

全ての質問に答えると、Firebase initialization complete!のテキストが表示されます。

ここまででディレクトリは以下のようになるはずです。

プロジェクトディレクトリ
├── build
├── firebase.json
├──.firebaserc
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src

firebase.json、.firebasercというfirebaseの設定ファイルが生成されています。
先ほどの質問の中でpublicフォルダをbuildに変更したり、アクセスされた時の設定などはfirebase.jsonに記載されています。また、.firebasercはデプロイ先の設定が記載されています。

デプロイ手順

以下のコマンドでデプロイ用の資産を作成します。

npm run build

プロジェクトルートにbuildディレクトリが生成されます。
デプロイコマンドを実行します。

firebase deploy

Deploy complete!と表示されれば成功です。
以下のURLにアクセスするしてデプロイ内容が確認できます。
Hosting URL: https://[プロジェクトID].firebaseapp.com

実際の表示