Firebase 部署显示没有应用内容的欢迎屏幕 Firebase 部署显示

Question

当我尝试在 firbase 上部署 Angular 应用程序 (6.0.0) 时遇到问题。

它始终显示“Firebase 欢迎设置页面”。 我阅读了所有已经发布的具有相同问题的博客，并按照他们所建议的相同说明进行操作。 即使我用 dist 文件夹 index.html 替换了 index.html 文件，我仍然无法呈现我的应用程序页面。 我不知道这个“Firebase 欢迎设置页面”是从哪里来的。 我花了将近 2 天的时间才找到解决方案，但失败了。

请您在这方面提供帮助。

谢谢

我的项目 Json 文件：-

{
  "name": "myproject",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ng-bootstrap/ng-bootstrap": "^3.3.1",
    "angularfire2": "^5.0.0-rc.6",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "firebase": "^4.12.1",
    "firebase-tools": "^5.1.1",
    "g": "^2.0.1",
    "ngx-bootstrap": "^3.0.1",
    "rxjs": "~6.2.0",
    "rxjs-compat": "^6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.4",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

**I just mention here my steps to deploy:-**

C:\Users\User\Desktop\hello-world>firebase login
Already logged in as subratamitra2011@gmail.com
C:\Users\User\Desktop\hello-world>firebase init

 ######## #### ########  ######## ########     ###     ######  ########
 ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
 ######    ##  ########  ######   ########  #########  ######  ######
 ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
 ##       #### ##     ## ######## ########  ##     ##  ######  ########
You're about to initialize a Firebase project in this directory:
C:\Users\User\Desktop\hello-world
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites
=== 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.
? Select a default Firebase project for this directory: helloworld-591c4 (helloworld)
i Using project helloworld-591c4 (helloworld)
=== 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? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
+ Wrote dist/404.html
+ Wrote dist/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
Firebase initialization complete!
C:\Users\User\Desktop\hello-world>ng build --prod
Date: 2018-10-22T04:10:50.394Z
Hash: d2fabf219965cc523f24
Time: 19752ms
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.44 kB [entry] [rendered]
chunk {1} main.9127db5a4ec3dfb85364.js (main) 746 kB [initial] [rendered]
chunk {2} polyfills.9d02003b6ccac27ce6ad.js (polyfills) 64.3 kB [initial] [rendered]
chunk {3} styles.cc25d04069d157e07245.css (styles) 128 kB [initial] [rendered]
C:\Users\User\Desktop\hello-world>firebase deploy
=== Deploying to 'helloworld-591c4'...
i deploying hosting
i hosting[helloworld-591c4]: beginning deploy...
i hosting[helloworld-591c4]: found 9 files in dist
+ hosting[helloworld-591c4]: file upload complete
i hosting[helloworld-591c4]: finalizing version...
+ hosting[helloworld-591c4]: version finalized
i hosting[helloworld-591c4]: releasing new version...
+ hosting[helloworld-591c4]: release complete
Deploy complete!
Project Console: https://console.firebase.google.com/project/helloworld-591c4/overview
Hosting URL: https://helloworld-591c4.firebaseapp.com

现在使用该网址显示默认页面，因为：-

https://imgur.com/a/CnREqUQ

然后我用我的项目 index.html 更改 dist/index.html 并再次构建

这是我的项目 Index.html:- https://imgur.com/a/rvvjIXZ

   

<!-- begin snippet: js hide: false console: true babel: false -->

DIST/MYPROJECT/INDEX.HTML https://imgur.com/a/LebwZ0h

现在我得到了一个带有该网址的空白页面。 请您帮忙找出我的错误。 谢谢， 带着敬意， Subrata Mitra`

Answer 1

我在使用 firebase 部署 React 项目（创建 React 应用程序）时遇到了类似的问题。我的问题是，当我最初设置 firebase init 时，我使用了 firebase 提供的默认构建文件夹名称 - /public。但事实证明，每当我构建我的项目时，它都会构建到不同的文件夹/build。所以我再次运行了firebase init，这次指定了build 文件夹。

因此，您可能想检查您正在构建的文件夹是否指定正确。

另外，您是否也在部署之前building 项目？

更新 - 如果您更喜欢使用 dist 作为构建文件夹，请以这种方式设置 firebase。

1. 再次运行firebase init。
2. 在其中一个步骤中，它会询问您是否要重命名构建文件夹。默认为public。在此处输入 dist 并按 Enter。
3. 完成剩余的firebase init 步骤。
4. 再次构建您的项目。
5. 运行firebase deploy。

现在尝试在终端中 firebase 提供的 URL 上运行您的网站。

Answer 2

在这种情况下，我的问题是“firebase deploy”在执行第一次初始化时按照指定的方式获取公用文件夹中的文件。 然而使用 react，你的静态站点构建在不同的文件夹中（在我的例子中是“build”）

因此，根据 Rodiwa 的帖子，您必须重新运行“firebase init”并指定您需要上传的文件夹。

Answer 3

如果您的dist 文件夹包含一个以您的应用程序名称命名的文件夹，请将您的firebase.json:
"public": "dist", 更改为"public": "dist/MyApp",

示例：
如果您的应用程序被称为“购物清单”。您的 firebase.json 必须如下所示：

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