🗿

Reactで作成したアプリをfirebaseにデプロイするときに注意すること

2022/01/21に公開

Firebase

Next.js

React

tech

はじめに

この記事は、react, react-routerで作ったアプリをFirebase Hostingを利用してデプロイしたときに自分がコケた場所を紹介するものです。何かの役に立つと幸いです。

環境

react: ^17.0.2
react-dom: ^17.0.2
react-router: ^6.0.0-beta.0
react-router-dom: ^6.0.0-beta.0

Reactで階層を含んだURLを直接叩くと404になる；；

状況

react-router でルーティングしている

App.tsx

<Routes>
	<Route path="/" element={<Home />} />
	<Route path="hoge/:piyoId" element={<Hoge />} />
	<Route path="*" element={<Navigate to="/" replace />} />
</Routes>

階層を含んだURLを直接アクセスするとエラーになる

上手く行くケース

http://my-app.com/にアクセス、<Home />が表示される。
<Home />からhttp://my-app.com/hoge/1にアクセス、<Hoge />が表示される。

上手く行かないケース

<Home />からhttp://my-app.com/hoge/1にアクセスしリロードする → Page Not Found
階層を含んだページでリロードする → Page Not Found
http://my-app.com/hoge/1に直接アクセスする → Page Not Found

原因

SPAなのでリソースがないため404になる?

解決策

firebaseのドキュメントを見ているとリライトというのを設定すると良いらしいので設定してみる。
リライト：複数のURLで同じコンテンツを表示するために使用するもの
参考 : ホスティング動作を構成する | Firebase Documentation

今回は存在しないファイルまたはディレクトリへのリクエストに対してindex.htmlを返したいので下記を設定する。

firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
  }
}

これでデプロイしてhttp://my-app.com/hoge/1アクセスして確認して終わり〜！！
と思いきや…

Uncaught SyntaxError: Unexpected token '<' エラーが出てる！！

コンソールを見てみると何やらエラーが出てる…とりあえずjavascriptの読み込みのパスを見てみる

index.html

<body>
	...
	<script src="./static/js/2.c291979f.chunk.js"></script>
	<script src="./static/js/main.ca9cdfff.chunk.js"></script>
</body>

./static/js/2.c291979f.chunk.jsと相対パスになっているのが確認できる。
相対パスなのでhttp://my-app.com/hoge/からの読み込みなのがわかる。

原因

検証の為にネットワークの欄を見てみる

やっぱり相対パスになっているのが原因で別のURLからソースを取得していた！！
読み込まれていたURL : https://portfolio-abee2.web.app/works/static/css/main.a180d1c6.chunk.css
期待していたURL : https://portfolio-abee2.web.app/static/css/main.a180d1c6.chunk.css

解決策

package.json

{
  ...
  "version": "0.1.0",
-  "homepage": "./",
+  "homepage": "/",

package.jsonのhomepageが./になっており相対パスになっているみたいだったので、/に変更してデプロイしてみる。
参考 : Deployment | Create React App