第3回 2020年版 React+Firebaseでアプリを作成する

1. 概要

ReactでFirebaseを利用するための方法について。

2. 前提条件

作業日時

• 2020/2/28

ソフトウェアのバージョン

ソフトウェア	バージョン
react	16.13.0
react-dom	16.13.0
typescript	3.7.5
firebase-tools	7.14.0

3. Firebaseのプロジェクト作成

まずは、 FirebaseのWebサイト でプロジェクトを作ります。

1. Firebaseにサインアップします。Googleアカウントがあればすぐ登録できます。
2. プロジェクトを新規作成します。

4. Firebase CLIのセットアップ

次に、ローカル環境にFirebase CLIをインストールします。

$ yarn global add firebase-tools

Firebase CLIでFirebaseへログインすることで、認証されます。
ブラウザが起動して、ログイン画面が表示されるのでログインします。

firebase login

5. Reactアプリの作成

Firebaseのサンプル用のReactのアプリを作成します。

$ npx create-react-app firebase-sample --template typescript
$ cd firebase-sample/

6. Firebase Hostingへのデプロイ

6.1. Firebaseの初期設定を行います。

Firebaseの初期化を行います。

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/hoge/Documents/00_mygit/hoshimado/firebase-sample

? 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
 ◯ Emulators: Set up local emulators for Firebase features

色々質問をされるので、次のように選択します。

? 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)

→Hostingを上下で選択肢し、スペースで選択する。その後、Enterで決定。

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.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: 
❯ sample-9f36d (sample) 

→Use an existing projectを選択肢、その後、先程作成したプロジェクトを選択する。

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(puclicを利用する)を押下する。

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 

→SPA用の設定にするため、yを入力し、Enterを押下する。

? File public/index.html already exists. Overwrite? (y/N) 

→Nを入力し、Enterを押下する。

最後に以下のようなメッセージが出れば、成功です。

i  Skipping write of public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

最後に、firebaseのホスティングの設定を修正する。
ローカルのbuildディレクトリをリモートのpublicにアップロードするように修正する。

firebase.json

{
  "hosting": {
    "public": "build", /* publicからbuildに修正する。*/
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

6.2. デプロイする

次に、Firebase Hostingにデプロイするためのアプリをビルドします。

$ yarn run build

その後、以下のコマンドでFirebase Hostingにデプロイします。

$ firebase deploy

7. 動作確認

デプロイ後に表示されるHosting URLをブラウザで開くとReactの画面が確認できます。

=== Deploying to '*****'...
略
✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/*****/overview
Hosting URL: https://*****.firebaseapp.com

8. 最後に

今回はReactをFirebase Hostingにデプロイする方法について説明しました。
Firebaseを活用することで、バックエンドのことで気にすべきことが軽減され、アプリの作成に集中することができます。

今回は単純なWebサイトの公開方法でしたが、以下の記事ではCloud storageを利用した画像のアップロードについて説明しています。こちらもご覧ください。

• 第6回 2020年版 React+Firebaseで画像のアップロード（その１）

次回は、既存のウェブサイトに React を追加する方法について説明します。

9. 関連記事

Reactに関する記事です。

• 第1回 2020年版 Node.js+Reactのインストール
• 第2回 2020年版 ReactのMaterial UI V4の使い方について
• 第3回 2020年版 React+Firebaseでアプリを作成する
• 第4回 2020年版 既存のウェブサイトに React を追加する
• 第5回 2020年版 ReactのRechartsで新型コロナウイルス感染症対策サイトのデータを可視化する
• 第6回 2020年版 React+Firebaseで画像のアップロード（その１）
• 第7回 2020年版 React+Firebaseで画像のアップロード（その２）
• 第8回 2020年版 React+Firebaseで画像のアップロード（その３）
• 第9回 2020年版 ReactにStoryshotsを導入する