如何使用GitHub将Angular应用程序部署到Firebase

我们中的许多人无法在网上展示我们的小规模或个人项目。因为托管这些项目有点困难，而且有时还需要花费几块钱。
在这篇文章中，我们将向你展示如何在不购买任何域名或主机提供商的情况下免费部署你的Angular应用程序。另外，厌倦了每次迭代都要部署你的应用程序吗？让我们也用GitHub来设置自动构建和部署。

初始化Git并推送项目到GitHub仓库

要配置自动构建和部署到Firebase，首先必须将项目推送到GitHub仓库。

• 在Visual Studio Code中打开你的项目。
• 从侧边栏打开源码控制菜单，或者直接使用这个快捷键（按Ctrl+Shift+G）来打开。
• 点击发布到GitHub按钮，如下图所示。

发布到GitHub

• 按照你的要求输入存储库名称，并选择存储库的类型，即公共或私人。

• 等待VS Code将你的项目发布到GitHub。

捆绑Angular应用程序用于生产

默认情况下，所有的angular项目都被设置为开发，所以让我们来构建我们的项目并生成我们的dist文件。

• 在项目文件夹的终端运行以下命令。

ng build --prod

• 现在，经过一段时间后，终端生成了一个dist文件夹，用于生产和部署。

下载Firebase并进行部署设置

Firebase命令行界面（CLI）工具可以用来测试、管理和从命令行部署你的Firebase项目。

• 要下载并安装Firebase CLI，请用管理员权限运行以下命令。

npm install -g firebase-tools

• 现在你应该在你的项目终端使用以下命令用你的谷歌账户登录到你的Firebase。

firebase login

创建一个用于部署的Firebase项目

• 打开Firebase网站，通过链接https://console.firebase.google.com，登录到你的控制台。
• 登录后，点击 “添加项目 “按钮，然后输入你的项目名称并点击 “创建项目 “按钮来创建你的Firebase项目。
• 现在是时候在你的项目终端使用以下命令来初始化Firebase了。

firebase init

• Firebase提供各种服务，如数据库、Firestore、功能、托管、存储。向下滚动并选择主机，按空格键选择，然后按回车键继续前进。

• 按回车键后，现在终端要求选择一个项目。选择 “使用现有项目 “选项，并选择你先前创建的项目名称，按回车键。

• 现在终端要求你选择你的公共目录，其中包含要用firebase部署上传的主机资产。
• 输入你之前生成的包含angular构建的dist文件夹的路径。在我的例子中，它是dist/calc-angular

• 现在在选项中选择 “是”，在GitHub上设置自动构建和部署？
• 在 “您想为哪个 GitHub 仓库设置 GitHub 工作流？”选项中输入您的 GitHub 用户名和仓库名称，格式为 username/repository。
• 对于所有其他选项，只需输入 “是 “或按下你想要的回车键。

• 一旦Firebase初始化完成，只要在终端输入以下命令就可以部署你的项目了。

firebase deploy

• 一旦命令被执行，它就会提供一个输出，其中包含指向Firebase项目控制台的链接和已部署项目的URL，通过它你可以通过任何设备访问你的应用程序。

现在你的Angular应用程序已经成功部署到了Firebase。