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サイト でプロジェクトを作ります。
- Firebaseにサインアップします。Googleアカウントがあればすぐ登録できます。
- プロジェクトを新規作成します。
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にアップロードするように修正する。
{
"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を利用した画像のアップロードについて説明しています。こちらもご覧ください。
次回は、既存のウェブサイトに 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を導入する