【2021】Reactでfirebaseへデプロイする際の手順を公開

firebaseのホスティング機能を使って簡単にReactで作ったWebアプリケーションをデプロイしたい。ということで、ブログなどを閲覧していましたが情報が古かったので更新しておきます。

React×firebaseでアプリをデプロイしたい人は参考にどうぞ。

Reactでfirebaseへデプロイする際の手順

まずは手順を示しておきます。

firebase-toolsでfirebaseCLIを使えるようにする
firebase initで初期化
問われる質問に答えていく
npm run build
firebase serveでデプロイできるかテスト
firebase deploy

もう少し細かく説明します。

firebase-toolsでfirebaseCLIを使えるようにする

firebase CLIのインストールが必須。まずはnpm install -g firebase-toolsでインストールすること。

npm install -g firebase-tools

これでfirebaseCLIが使えるようになるはずです。

firebase login

これでfirebaseコマンドが使えない人はnpmのPATHが正常に通ってないので、こちらの記事を参考にしてください。

firebase initで初期化

firebaseのコマンドが正常に動いたら、まずはfirebaseを初期化します。

firebase init

ここから質問に答えていって初期化を完了させていきます。

問われる質問に答えていく

Are you ready to proceed?　→ Yes

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
instance
( ) Firestore: Configure security rules and indexes files for Firestore
( ) Functions: Configure a Cloud Functions directory and its files
>(*) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
( ) Hosting: Set up GitHub Action deploys
( ) Storage: Configure a security rules file for Cloud Storage
( ) Emulators: Set up local emulators for Firebase products
(Move up and down to reveal more choices)

Hosting機能を使うので上の※をスペースを押して選択します。オプションでgitHubと連携ができるみたいですが、今回はスルーでいきます。

? Please select an option: (Use arrow keys)
> Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project

firebaseでプロジェクトを用意していると思うので、１番上の存在しているプロジェクトにカーソルを合わせた状態でEnter。

? Select a default Firebase project for this directory:
bbs-with-fortnite (bbs-with-fortnite)
board-tutorial-bd689 (board-tutorial)
> react-slack-clone-f7fbe (react-slack-clone)
slack-clone-2-14677 (slack-clone-2)
super-char-app (super-char-app)

現在作っているプロジェクトにカーソルを当ててEnterを押してください。

? What do you want to use as your public directory? build

ここでは「public」ではなく「build」としてEnterを押します。後でnpm run buildコマンドを実行するので、そこに存在するindex.htmlを読み込ませるという流れみたいです。

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

Yesを選ぶとfirebase.json にリライト設定が追記され、Noを選ぶと404.html が作成されるみたいです。私はNoにしておきました。

? Set up automatic builds and deploys with GitHub? No

今回はGithubとの連携はしないのでこれもNoを選択。YesにすればGithubと連携して自動でビルドとデプロイができるみたいです。

+ Wrote build/404.html
+ Wrote build/index.html

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

+ Firebase initialization complete!

これで初期化が完了しました。

npm run build

npmコマンドを使ってビルド開始です。終了すれば自動的にbuildフォルダが生成されるはずです。

$ npm run build

> react-slack-clone@0.1.0 build C:\Users\じゅぶ\Desktop\dev\reactProject\slack-clone\slack-clone
> react-scripts build

これが無事成功すれば、お次はデプロイできるかテストします。

firebase serveでデプロイできるかテスト

このままデプロイしてもよいですが、ちゃんと設定されているか確認してみましょう。以下のコマンドを入力します。

$ firebase serve

これでlocalhost:5000にアクセスしてみましょう。これで所望のページが開けてたらデプロイします。

firebase deployでデプロイする

$ firebase deploy

これでデプロイが完了です。

Reactでfirebaseへデプロイする際の手順：まとめ

初期化で結構質問されるので戸惑う人も多いと思います。私も完璧には理解してませんが、とりあえずデプロイができたので満足しています。

私がfirebaseでデプロイした例を載せておきます。お疲れさまでした。