FirebaseでReactアプリをホスティングする

Firebase ホスティングの初期設定

通常の Firebase のホスティングを利用する場合と同様に Firebase の初期設定を行います。 初期設定を行う前に以下の準備が必要になります。

1. Google アカウントの取得
2. Firebase プロジェクトの作成
3. 「firebase-toools」のインストール（「sudo npm inatall -g firebase-tools」）
4. Firebase へのログイン（「firebase login」）

これは、別の記事で解説していますのでそちらをご覧ください。 準備ができたら、Firebase の初期化のコマンドを実行します。

$ firebase init

「firebase init」を実行すると、幾つか質問をされますので必要に応じて答えてください。こちらも、別の記事で詳細を解説していますので、そちらを参照してください。

$ firebase init

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

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

  /Users/XXXXX/Documents/projects/sv-sw/samples/firebase-react-sample

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action de
ploys

=== Project Setup

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: test-68cee (test)
i  Using project test-68cee (test)

=== Hosting Setup

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? build
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔  Wrote build/404.html
✔  Wrote build/index.html

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

✔  Firebase initialization complete!

公開用のフォルダ名を聞かれます、標準設定では「public」になっていますが、「build」を指定します。これは、React で公開用のイメージが「build」というフォルダに作成されるためです。後でも変更できますが、初期化の際に指定しておいた方がスムーズです。

実行すると、プロジェクトフォルダに「firebase.json」が作成されます。

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

$ npm run build

$ firebase serve

$ firebase deploy
=== Deploying to 'test-68cee'...

i  deploying hosting
i  hosting[test-68cee]: beginning deploy...
i  hosting[test-68cee]: found 19 files in build
✔  hosting[test-68cee]: file upload complete
i  hosting[test-68cee]: finalizing version...
✔  hosting[test-68cee]: version finalized
i  hosting[test-68cee]: releasing new version...
✔  hosting[test-68cee]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/test-68cee/overview
Hosting URL: https://test-68cee.web.app