More than 5 years have passed since last update.

ReactアプリをFirebaseにデプロイしたらBlankページしか表示されない

Posted at 2019-11-15

はじめに

Reactでポートフォリオを作成してHerokuで公開していました。しかしHerokuには無料枠があり、常時起こし続けているわけにもいきません。
そこでFirebaseにデプロイをしてHostingをしてもらおうと企みました。

デプロイまでは順調だったのですが、指定されたURL開いてもなぜかBlankページしか表示されませんでした。

デプロイしたアプリのコンソールを確認すると、以下のようなエラーが出ていました。

SyntaxError: Unexpected token '<'
しかしエラー内で指定されているファイルはReactでビルドを行なった煩雑なものであり、読んでも全くわかりません。

どうやら直前にGitHub Pagesにデプロイしようとして中断したのが悪さをしていそうです。

package.json

{
  "homepage": "https://[username].github.io/[work]/",
}

この部分をFirebaseのデプロイ時に取得したURLに書き換えて再度ビルドしました。

package.json

{
  "homepage": "https://[プロジェクトID].firebaseapp.com/",
}

ビルドが終わったら再度デプロイしてみます。

うまくサイトが表示された！

ポートフォリオサイトはFirebaseで公開中です。
ポートフォリオ

あれ？デプロイできたのに真っ白で何も表示されないぞ？と困ったら1度pacage.jsonの中身を覗いて見ると謎が解けるかもしれません。