web-dev-qa-db-ja.com

Firebaseがindex.htmlファイルを実行していない

私はFirebaseチュートリアルを経験するかなり新しいプログラマーです。チュートリアルのステップ1〜5を実行しました（ https://codelabs.developers.google.com/codelabs/firebase-web/#5 ）。 「FirebaseをWebアプリに追加」jsコードをhtmlファイルに追加し、Firebase CLIをセットアップしました。ただし、firebaseサーバーを実行すると、index.htmlファイルのコードが表示されない以外はすべて機能しているように見えます。

私は正しいディレクトリにいて、コンソールには「サーバーがリッスンしている： http：// localhost：50 」と表示されています。ただし、localhost 5000では、「Firebase Hostingへようこそ：Firebase Hostingのセットアップが正常に完了したため、これが表示されます。今度は、特別な何かを構築するときです！」と表示されます。 index.htmlファイルのアプリインターフェースコードではなくボックス。私のディレクトリにある唯一のhtmlファイルです。非常に単純なものが欠けているようです。ご協力ありがとうございました。

htmlfirebasefirebase-hostingfirebase-tools
23
user2292210

私は答えを見つけました。投稿されたindex.htmlファイルは、「firebase init」段階で作成された「public」ファイルにありました。そのプレースホルダーhtmlファイルをアプリ用のものに置き換えました。

22
user2292210

問題はfirebase initが信じられないほど粗雑なことです。 publicフォルダーにあるindex.htmlファイルを上書きするだけです...確認も、セーフティネットも、何もありません。

これを修正する唯一の方法は、独自のindex.htmlファイルを再生成することです。 index.htmlファイルのバックアップまたは再作成のその他の手段がない場合は...まあ...あまりにも悪い！

一般に、webpack（またはその他のビルドツール）を使用したfirebaseセットアップの手順は、次のようになります。

  1. firebase login
  2. firebase init
  3. your-build-command-here
  4. firebase deploy

そのマシンでビルドをセットアップするとき（または新しいFirebaseリビジョンがリリースされたとき）に最初の2つのステップのみを実行する必要があることに注意してください。再デプロイするには、次のようにします。

  1. your-build-command-here
  2. firebase deploy

[〜＃〜] update [〜＃〜]

最新バージョンでは、少なくともオーバーライドするかどうかを尋ねられます:)

15
Domi

Firebaseホスティングでアプリが表示されませんか？

この問題には2つの理由があるかもしれません

最初のステップ：

Index.htmlを含むパブリックフォルダー（firebase.jsonで定義） 'dist'がfirebase initコマンドによって変更されていないことを確認します（変更されている場合は、元のプロジェクトindex.htmlに置き換えます）。

参照用（distは標準ですが、異なる場合があります）

{ "hosting": { "public": "dist"} }

2番目のステップ：

プロジェクトのindex.htmlでベースhrefを必ず構成してください

として

<base href="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/">

および他のバンドルファイルとして

<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/runtime.a66f828dca56eeb90e02.js">

<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/main.2eb2046276073df361f7.js">

番目のステップコマンドを実行する-firebase deploy

楽しい ！ ;）

8
Hammad J

angular 2または6でcliを使用する場合、パブリックディレクトリとして.（dist）を使用し、

$ ng build --prod
$ cd dist/
$ firebase init
 ? What do you want to use as your public directory? .
 ? Configure as a single-page app (rewrite all urls to /index.html)? Yes
 ? File ./index.html already exists. Overwrite? No
$ firebase deploy
5
All Іѕ Vаиітy

AngularアプリケーションをFirebaseにデプロイするためのシンプルで簡単なチュートリアルについては、 こちら をご覧ください。

Firebase initのプロセス中に、type N、質問 "File dist/index.htmlが既に存在する場合。上書きしますか？」が表示され、ページが本来のとおりに表示されます。

2
Semir Deljić

パブリックフォルダーオプションにdist/your-folder-nameを書き込みます。これにより、フォルダ内にあるインデックスファイルをレンダリングできます。

2
Arshi

私の場合、ng build --prodコマンドを実行すると、distフォルダーの下にサブフォルダーが作成されます。私のプロジェクト名はFirstProjectと仮定します。 distフォルダー（dist/FirstProject）内にFirstProjectというサブフォルダーがあります。 dist/[subDirectory]をパブリックディレクトリとして指定します

What do you want to use as your public directory? dist/FirstProject

これで問題が解決しました

2
Gihanmu

手順に従ってください

npm install -g firebase-tools

既にdistフォルダーがある場合は、ディレクトリから削除します

firebase login
ng build --prod
firebase init
firebase deploy
0
Tharindu Gihan

これに出くわす誰かのために。シークレットモードで起動してみてください-ブラウザがキャッシュされました。

https://stackoverflow.com/a/56468177/2047972

0
AidenFry

私の場合firebaseは間違ったディレクトリを使用していました、こちらも参照してください： firebase CLIは 'firebase initの現在のプロジェクトディレクトリを認識しませんでした'。 firebaseが作成したすべてのファイルをプロジェクトディレクトリに配置することを期待していましたが、完全に切断され、すべてのファイルを/ Users/MyUserNameディレクトリに配置し、そこから間違ったindex.htmlをデプロイしました。

enter image description here

これはそれを修正する方法です（リンクされた投稿で提案されているようにfirebaseの再インストールは不要です）：

  • / Users/MyUserName directoy（.firebaserc、firebase.json、index.html、dist-folder）から作成されたすべてのfirebaseファイルを削除します
  • プロジェクトダイレクトイでfirebase initを実行します
  • dist/projectnameをパブリックディレクトリとして使用します
  • 単一ページアプリとして構成する「はい」
  • index.htmlを上書きしないでください（上書きする場合は、デプロイする前に「ng build」を再度確認してください）
  • ファイアベース展開

ところで、Angular 7、Angular $ === 7を使用しているすべての人にとって、この angular 7アプリをFirebase Hostingにデプロイするためのチュートリアル は本当に私に役立つ。

0
Chris Conway
npm install -g firebase-tools
firebase login
firebase init
firebase deploy
firebase open

下にスクロールして次を選択します

  Hosting: Deployed Site
0
coder2017