如何使用 Firebase 托管部署 Angular 12 應(yīng)用程序？
有許多組織提供免費(fèi)托管應(yīng)用程序，無(wú)論其規(guī)模大小。它們中的每一個(gè)都提供不同的特性和功能。其中之一是 Firebase，它最多可以存儲(chǔ) 10GB 的托管內(nèi)容，并且可以存儲(chǔ) 1GB 的實(shí)時(shí)數(shù)據(jù)庫(kù)，并且可以下載 10GB/月。有關(guān)更多詳細(xì)信息，您可以查看此頁(yè)面。
概述
今天，在本教程中，我們將了解使用 Firebase 托管功能在 Firebase 上部署 Angular 12 應(yīng)用程序是多么輕松。
先決條件
Node和Angular CLI已經(jīng)安裝。
我假設(shè)您已經(jīng)創(chuàng)建了角度應(yīng)用程序。如果沒有，您可以使用以下命令創(chuàng)建一個(gè)新項(xiàng)目：
ng 新項(xiàng)目名稱
項(xiàng)目名稱是可變的；我創(chuàng)建的項(xiàng)目是angular12-hosting。
好吧，我們現(xiàn)在已經(jīng)準(zhǔn)備好這個(gè)項(xiàng)目了。因此，讓我們按照以下步驟來(lái)托管我們的應(yīng)用程序。
步驟：使用 Firebase 托管部署 Angular 12 應(yīng)用程序
首先，轉(zhuǎn)到您的項(xiàng)目目錄并打開命令提示符/終端。
現(xiàn)在，我們需要為我們的項(xiàng)目創(chuàng)建一個(gè)構(gòu)建。所以運(yùn)行以下命令：
建設(shè)
成功完成構(gòu)建后，確保已在項(xiàng)目中創(chuàng)建dist文件夾。
接下來(lái)要做的是在 firebase 中創(chuàng)建一個(gè)項(xiàng)目。轉(zhuǎn)到Firebase 控制臺(tái)。
單擊創(chuàng)建項(xiàng)目按鈕，它會(huì)要求您插入項(xiàng)目名稱。
我的 firebase 項(xiàng)目名稱是angular12-hosting；你可以添加你的。然后單擊繼續(xù)。
如果您使用的是 Google Analytics，則可以啟用 Google Analytics。否則，將其禁用并單擊“創(chuàng)建項(xiàng)目”。
在 firebase 中成功創(chuàng)建項(xiàng)目后，再次轉(zhuǎn)到文件資源管理器中的 angular 項(xiàng)目目錄，打開命令提示符/終端，并使用以下命令安裝 firebase 工具。
npm i -g firebase 工具
要在 Firebase 上托管Angular 12應(yīng)用程序，我們需要使用以下命令登錄到我們的 firebase 帳戶。
登錄
它會(huì)要求您選擇您的 Gmail 帳戶和一些使用 Firebase CLI 的權(quán)限。請(qǐng)注意，選擇您創(chuàng)建 firebase 項(xiàng)目的帳戶并允許這些權(quán)限。
登錄成功后，我們需要初始化firebase。為此，請(qǐng)運(yùn)行以下命令。
火力初始化
Firebase 初始化過程包含我們需要正確回答才能成功托管的問題。
1. 你準(zhǔn)備好繼續(xù)了嗎？輸入是
2. 你想為這個(gè)目錄設(shè)置哪些 Firebase 功能？選擇主機(jī)：配置文件
（請(qǐng)注意，您也可以選擇多個(gè)功能，但目前，我們只需要托管。另外，請(qǐng)確保您需要按 Space 鍵選擇一個(gè)功能/選項(xiàng)，然后按 Enter 鍵確認(rèn)。）
現(xiàn)在，他們會(huì)要求選擇項(xiàng)目目錄。
3.請(qǐng)選擇一個(gè)選項(xiàng)：選擇Use an existing project （如果你已經(jīng)在firebase中創(chuàng)建了一個(gè)項(xiàng)目，如果沒有，你可以選擇Create a new project）
4. 選擇您的項(xiàng)目；我的是 angular12-hosting。所以我通過按回車鍵選擇了它。
之后，確保您的角度項(xiàng)目的公共目錄是什么。您可以轉(zhuǎn)到 dist 文件夾進(jìn)行檢查。
我的項(xiàng)目目錄是dist/angular12-hosting。
關(guān)于 firebase 初始化的下一個(gè)問題將是添加進(jìn)入我們的目錄。我正在添加我的；請(qǐng)根據(jù)您的項(xiàng)目輸入。
5. 你想用什么作為你的公共目錄？輸入dist/angular12-hosting
6.配置為單頁(yè)應(yīng)用？輸入是
7. 使用 Github 設(shè)置自動(dòng)構(gòu)建和部署？輸入No （如果要用github設(shè)置，可以輸入Yes）
8. 文件dist/**/index.html 已經(jīng)存在？覆蓋？輸入編號(hào)
Firebase 將創(chuàng)建一些文件。
最后，F(xiàn)irebase 初始化完成。
現(xiàn)在我們準(zhǔn)備好了設(shè)置。運(yùn)行以下命令來(lái)部署我們的項(xiàng)目。
火力基地部署
完成部署過程后，firebase 將為您提供一個(gè) URL，用于使用 Firebase 托管功能部署 Angular 12 應(yīng)用程序。
轉(zhuǎn)到瀏覽器并運(yùn)行此托管 URL。
我的應(yīng)用程序運(yùn)行成功！
我的應(yīng)用程序正在這個(gè)URL上運(yùn)行。
結(jié)論
所以，這是關(guān)于如何使用 Firebase 托管部署 Angular 12 應(yīng)用程序。我希望本教程對(duì)您有所幫助，并且您也嘗試過托管您的應(yīng)用程序。如果您有任何問題，請(qǐng)隨時(shí)聯(lián)系。你是一個(gè)熱心的學(xué)習(xí)者，喜歡探索更多關(guān)于 Angular 的知識(shí)嗎？然后，訪問Angular 教程頁(yè)面并開始使用 Angular。我們還將為您提供 github 存儲(chǔ)庫(kù)，以便您可以克隆存儲(chǔ)庫(kù)并使用代碼。
如果您正在為您的 Angular 項(xiàng)目尋找技術(shù)嫻熟、敬業(yè)且經(jīng)驗(yàn)豐富的開發(fā)人員，請(qǐng)與我們聯(lián)系以聘請(qǐng) Angular 開發(fā)人員。