如何使用 Firebase 托管部署 Angular 12 应用程序？

概述

今天，在本教程中，我们将了解使用 Firebase 托管功能在 Firebase 上部署 Angular 12 应用程序是多么轻松。

先决条件

Node和Angular CLI已经安装。

我假设您已经创建了角度应用程序。如果没有，您可以使用以下命令创建一个新项目：

ng 新项目名称

项目名称是可变的；我创建的项目是angular12-hosting。

好吧，我们现在已经准备好这个项目了。因此，让我们按照以下步骤来托管我们的应用程序。

步骤：使用 Firebase 托管部署 Angular 12 应用程序

首先，转到您的项目目录并打开命令提示符/终端。

现在，我们需要为我们的项目创建一个构建。所以运行以下命令：

建设

成功完成构建后，确保已在项目中创建dist文件夹。

接下来要做的是在 firebase 中创建一个项目。转到Firebase 控制台。

单击创建项目按钮，它会要求您插入项目名称。

我的 firebase 项目名称是angular12-hosting；你可以添加你的。然后单击继续。

如果您使用的是 Google Analytics，则可以启用 Google Analytics。否则，将其禁用并单击“创建项目”。

在 firebase 中成功创建项目后，再次转到文件资源管理器中的 angular 项目目录，打开命令提示符/终端，并使用以下命令安装 firebase 工具。

npm i -g firebase 工具

要在 Firebase 上托管Angular 12应用程序，我们需要使用以下命令登录到我们的 firebase 帐户。

登录

它会要求您选择您的 Gmail 帐户和一些使用 Firebase CLI 的权限。请注意，选择您创建 firebase 项目的帐户并允许这些权限。

登录成功后，我们需要初始化firebase。为此，请运行以下命令。

火力初始化

Firebase 初始化过程包含我们需要正确回答才能成功托管的问题。

1. 你准备好继续了吗？输入是

2. 你想为这个目录设置哪些 Firebase 功能？选择主机：配置文件

（请注意，您也可以选择多个功能，但目前，我们只需要托管。另外，请确保您需要按 Space 键选择一个功能/选项，然后按 Enter 键确认。）

现在，他们会要求选择项目目录。

3.请选择一个选项：选择Use an existing project （如果你已经在firebase中创建了一个项目，如果没有，你可以选择Create a new project）

4. 选择您的项目；我的是 angular12-hosting。所以我通过按回车键选择了它。

之后，确保您的角度项目的公共目录是什么。您可以转到 dist 文件夹进行检查。

我的项目目录是dist/angular12-hosting。

关于 firebase 初始化的下一个问题将是添加进入我们的目录。我正在添加我的；请根据您的项目输入。

5. 你想用什么作为你的公共目录？输入dist/angular12-hosting

6.配置为单页应用？输入是

7. 使用 Github 设置自动构建和部署？输入No （如果要用github设置，可以输入Yes）

8. 文件dist/**/index.html 已经存在？覆盖？输入编号

Firebase 将创建一些文件。

最后，Firebase 初始化完成。

现在我们准备好了设置。运行以下命令来部署我们的项目。

火力基地部署

完成部署过程后，firebase 将为您提供一个 URL，用于使用 Firebase 托管功能部署 Angular 12 应用程序。

转到浏览器并运行此托管 URL。

我的应用程序运行成功！

我的应用程序正在这个URL上运行。

结论

言鼎科技