web-dev-qa-db-ja.com

Firebaseのデプロイが成功した後の空白ページ

npm startコマンドを使用すると、私のReactJsアプリケーションがローカルボックスで正常に実行されます。しかし、firebase initを使用してアプリケーションをFirebaseにデプロイしようとすると、空白のページが表示されます。何が悪いのでしょうか？

Update：Firebase.jsonファイルを編集して、

"predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint"],

それに関連するエラーが発生していたため、.

Firebase.json：

{
  "database": {
    "rules": "database.rules.json"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "source": "functions"
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

Firebaseデプロイコマンドの出力：

=== Deploying to 'socialmedia-5ec0a'...

i  deploying database, storage, firestore, functions, hosting
i  database: checking rules syntax...
+  database: rules syntax for database socialmedia-5ec0a is valid
i  storage: checking storage.rules for compilation errors...
+  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
+  firestore: rules file firestore.rules compiled successfully
i  functions: ensuring necessary APIs are enabled...
+  functions: all necessary APIs are enabled
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  functions: preparing functions directory for uploading...
i  hosting[socialmedia-5ec0a]: beginning deploy...
i  hosting[socialmedia-5ec0a]: found 5 files in public
+  hosting[socialmedia-5ec0a]: file upload complete
i  database: releasing rules...
+  database: rules for database socialmedia-5ec0a released successfully
+  storage: released rules storage.rules to firebase.storage/socialmedia-5ec0a.appspot.com
+  firestore: released rules firestore.rules to cloud.firestore
i  hosting[socialmedia-5ec0a]: finalizing version...
+  hosting[socialmedia-5ec0a]: version finalized
i  hosting[socialmedia-5ec0a]: releasing new version...
+  hosting[socialmedia-5ec0a]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/socialmedia-5ec0a/overview
Hosting URL: https://socialmedia-5ec0a.firebaseapp.com

Chrome F12出力：enter image description here

reactjsfirebasenpmweb-applicationsweb-deployment
14
Ajit Goel

私も同じ問題を抱えていました。 http：// localhost：3000 / はアプリを適切に提供していましたが、npm run build その後 firebase deploy空白のページが表示されました。

理由はわかりませんが、firebase.jsonの「public」プロパティを「build」に変更して機能しました。

これが私の新しいfirebase.jsonドキュメントです。

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

Firebaseアプリケーションをfirebase initで初期化すると、プロジェクトのフォルダーにfirebase.jsonファイルが作成されます。問題は、公開鍵がビルドフォルダーを指している必要があるということです。たとえば、create-react-appでは、npm run buildを初めて実行した後のビルドフォルダーはbuild /です。 。次に、firebase.jsonは次のようになります。

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

公開キーはビルドを指します。次に、firebase deployを使用して別のデプロイを試みます。

5
Robin Wieruch

あなたのpublicプロパティを見てくださいpackage.json

"public": "public",

これは、firebase hostingがアプリケーションを探すリソースフォルダーを指します。リソースフォルダが空の場合、空白のページが表示されます

特に指定しない限り、reactアプリをビルドすると、デフォルトですべてのファイルがbuildフォルダーに移動します。そのため、publicプロパティをreactjsビルドフォルダーに設定します。

5
Artjom Zabelin

Firebase.jsonの「public」プロパティを変更しても機能しない場合は、最初にindex.htmlファイルがどのフォルダーにあるかを確認し、それが作成したindex.htmlであることを確認してください。Firebaseが模擬index.htmlを配置する可能性がありますメインフォルダーでindex.htmlを 'build'フォルダーに移動します。'build 'フォルダー内にアプリの名前が付いた別のフォルダーがある場合もあります。次に、次のように、firebase.jsonの「public」プロパティをそのフォルダーの名前に変更する必要があります。

     {
      "hosting": {
        "public": "my-app",
        "ignore": [
          "firebase.json",
          "**/.*",
          "**/node_modules/**"
        ],
        "rewrites": [
          {
            "source": "**",
            "destination": "/index.html"
          }
        ]
      }
    }
0
Aleksandar Malenko

私も同じ問題を抱えていました。しかし、ビルドフォルダーがポイントされた後。 。 。まだ空白のホストが表示されていました。この場合は、firebase initコードを含むビルドフォルダーをコピーして、パブリックフォルダーに貼り付けます。 <div id=root> </div>をbodyセクションに挿入し、次にnpm run build再び。以前の投稿で述べたように、firebase.jsonがビルドを指していることも確認してください。

0
Matt Wellman

Package.json内にhomepageプロパティが設定されていないことを確認してください。最初はGithubページにもデプロイしていたので、それがありました。それを削除し、再構築し、再配備し、機能しました。

0
ariel guzman

firebase.jsonファイルが機能しません。

  1. Chrome開発ツールの場合、Application->Clear Storage
  2. クリック clean site data
  3. 次にrefreshアプリ。

場合によっては、機能します。

0
Daniel Lupascu