我们中的许多人无法通过网络展示我们的小型或个人项目。由于托管这些项目有些困难，有时还会花费几美元。
在本文中，我们将向您展示如何在不购买任何域或托管提供商的情况下免费部署Angular应用程序。另外，是否厌倦了每次迭代都部署应用程序?让我们还使用GitHub设置自动构建和部署。
初始化Git并将项目推送到GitHub存储库
要将自动构建和部署配置为Firebase，必须首先将项目推送到GitHub存储库。
- 在Visual Studio Code中打开您的项目。
- 从侧边栏打开“源代码控制”菜单，或直接使用此快捷方式(按Ctrl + Shift + G)打开。
- 单击“发布到GitHub”按钮，如下图所示。
发布到GitHub
- 根据需要输入存储库名称，然后选择公共或专用存储库的类型。
- 等待VS Code将您的项目发布到GitHub。
捆绑生产的Angular应用
默认情况下，所有角度项目都设置为开发状态，因此让我们构建项目并生成dist文件。
- 在项目文件夹的终端中运行以下命令。
ng build --prod
- 现在过了一段时间，终端会生成一个dist文件夹，用于生产和部署。
下载Firebase和设置以进行部署
Firebase命令行界面(CLI)工具可用于从命令行测试，管理和部署Firebase项目。
- 要下载并安装Firebase CLI，请以管理员权限运行以下命令：
npm install -g firebase-tools- 现在，您应该在项目终端中使用以下命令使用您的Google帐户登录到Firebase：
firebase login
创建一个Firebase项目进行部署
- 打开firebase网站，并通过链接https://console.firebase.google.com登录到控制台。
- 登录后，单击“添加项目”按钮，然后输入您的项目名称，然后单击“创建项目”按钮以创建您的Firebase项目。
- 现在是时候在项目终端中使用以下命令来初始化项目中的firebase了。
firebase init- Firebase提供了各种服务，例如数据库，Firestore，功能，托管，存储。向下滚动并按空格键选择Hosting ，然后按Enter按钮继续。
- 按回车后，现在终端要求选择一个项目。选择选项“使用现有项目”，然后按回车键选择先前创建的项目名称。
- 现在，终端要求您选择包含要通过firebase deploy上传的托管资产的公共目录。
- 输入您先前生成的包含角度构建的dist文件夹的路径。就我而言，它是dist / calc-angular
- 现在，为选项“使用GitHub设置自动构建和部署? ”选择“是”。
- 以“用户名/存储库”的格式输入您的GitHub用户名和存储库名称，选项为“您要为哪个GitHub存储库设置GitHub工作流程?”。
- 对于所有其他选项，只需输入“是”或根据需要按Enter键。
- Firebase初始化完成后，只需在终端中输入以下命令即可部署您的项目。
firebase deploy- 执行命令后，它会提供输出，其中包含指向Firebase项目控制台的链接以及已部署项目的URL，您可以通过该设备通过任何设备访问应用程序。
现在，您的Angular应用程序已成功与Firebase一起部署。