この記事で行うこと

firebaseにreactをデプロイした際に詰まった箇所を記載します。
デプロイ手順や環境構築に関する詳しい記事は、みなさんが書いて下さっているのでそちらを参考に!

ことの発端

開発してfirebseにデプロイしてみたが、開発したソースコードがうまく反映されない。。。！！！
Firebase Hosting Setup Completeが出てしまう。

記事を見ながら、firebase initの時にpublicじゃなくてbuildにしたりしたのになんでだろう..?

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

原因

create-react-appを一番最初にやった際に、階層を間違えていたため、今回アプリ開発を行ったreact-todo-pwa
配下のbuildフォルダではなく、reactApp配下のbuildファイルを指定していた。

reactApp
├── build ←←←← これは'firebase initi'時に生成される上記画像のhtml
│   ├── 404.html
│   └── index.html 
├── node_modules
└── react-todo-pwa
    ├── build ←←←← これは'npm run build'時に生成される圧縮したフォルダ
    │   ├── 404.html
    │   ├── index.html
    │   └── static
    │       ├── css
    │       ├── js
    │       └── media
    ├── node_modules
    ├── public
    └── src
        ├── components
        ├── provider
        └── service

また、原因に気付きreact-todo-pwa/buildを指定したのにも関わらず、その後の選択肢でnpm run buildで生成したindex.htmlファイルを間違えてオーバーライドで消してしまったためドツボにハマってしまった。

? File react-todo-pwa/build/index.html already exists. Overwrite? Yes

解決

フォルダ構成を直したりすれば良いが、一旦は参照先をbuildではなくreact-todo-pwa/buildで回避した。

firebase.json

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

firebase initでオーバーライドするファイルは気をつけよう。

? File react-todo-pwa/build/index.html already exists. Overwrite? No

init後のdeployも忘れずに。

docker compose exec react-app firebase deploy