web-dev-qa-db-ja.com

Angular 6.0 Firebase Hosting Deployが機能しない

私はangular 6.0プロジェクトでfirebase-toolsホスティングを適切にセットアップする方法についてのチュートリアルを探しています。

- firebase init 
- then select the Hosting
- What do you want to use as your public directory? dist
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
- Overwrite? No
- ng build --prod
- firebase deploy

しかし、これを行った後、これは常に私が持っているものです。

default

angularfirebase-hostingfirebase-tools
22
dotGitignore

ng build --prodがdistとプロジェクトの場所があるこの下に別のサブフォルダーを作成することがわかりました。

dist
|--TheProject_Folder
|  |--assets|index.html - This index html is not using.
|--index.html - This is the html generated in the firebase init

したがって、私はfirebase initを再度初期化し、パブリックディレクトリをdistからdist/TheProject_Folderに変更しました。

- What do you want to use as your public directory? dist/TheProject_Folder
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
- Overwrite? No
23
dotGitignore

以下は、firebaseでangular6.0アプリをホストするための段階的なプロセスです。

1] npm install -g firebase-tool firebaseツールをインストールする

2] firebase login CLIツールを使用してFirebaseにログインします。

アカウント/ Gmailアカウントに接続すると、ブラウザにfirebase CLI Login Successfullメッセージが表示されます

3] firebase init

Firebaseツールが尋ねる質問への回答は次のとおりです：

？続行する準備はできていますか？ はい
？このフォルダーにどのFirebase CLI機能をセットアップしますか？ Spaceを押して機能を選択し、Enterを押して選択を確認します。 ホスティング：Firebaseホスティングサイトの構成と展開

？パブリックディレクトリとして何を使用しますか？ dist(This is important! Angular creates the dist folder.)

？単一ページのアプリとして構成します（すべてのURLを/ index。htmlに書き換えます）？ はい

4] ng build --prod

これにより、プロジェクトの新しいdist /フォルダーが、アプリの起動に必要なファイルとともに作成されます。

5]アプリをデプロイする前に、firebase.jsonファイルに移動し、プロジェクトのパブリックフィールドを次のように指定します

"public": "dist/your_project_name",

6]次に、以下のコマンドを使用してプロジェクトをfirebaseにデプロイします

ファイアベース展開

脱ポリ化後、以下のメッセージが表示されます

  • デプロイ完了！

プロジェクトコンソール：https：// ************ [星ではなく実際のURL名を取得します]

ホスティングURL：https：// ************* [星ではなく実際のURL名を取得します]

ホスティングURLで指定されたURLでWebサイトにアクセスできます

15
bajran

キャッシュを削除してブラウザを更新すると、うまくいきました。ありがとう。

5
user698314

2番目の方法は、単にangle.jsonのoutputPathをdistに変更することです。そのため、線は次のようになります"outputhPath": "dist"

4
Josef Katič

@bajranはすべてのステップを詳細に説明している可能性がありますが、angular 5から6に移行する場合、重要なステップは"public": "dist",から"public": "dist/your_project_name", in firebase.json

0
ishandutta2007

問題は、質問についてです

ファイルdist/apps/ditectrev/index.htmlは既に存在します。上書きしますか？

はいの場合Yと入力すると、Firebaseによって生成された独自のindex.htmlファイルが作成されます。これを与えるNoのN元のindex.htmlを維持できました。これはng build --prodをdist/apps/ditectrevで使用した後に生成されました。注：私はNxワークスペースを使用していますが、他のAngular=プロジェクト。通常のAngular=単にdistになります。

0
Daniel Danielecki

このまったく同じページにつながる可能性のある問題がもう1つあります。を使用してプロジェクトを初期化するとき

firebase init

コマンドを実行し、手順に従って、デフォルトでindex.htmlファイルを上書きします。したがって、すでに構築されている場合（dist/_Project_Folderを取得するため）、index.htmlファイルは上書きされます。後に再構築

firebase init 
ng build --prod
0
DHRUV GAJWA