我们中的许多人无法通过网络展示我们的小规模或个人项目。由于托管这些项目有点困难，有时还要花费几美元。
在本文中，我们将向您展示如何在不购买任何域或托管服务提供商的情况下免费部署 Angular 应用程序。此外，是否厌倦了每次迭代都部署您的应用程序？我们还使用 GitHub 设置自动构建和部署。
初始化 Git 并将项目推送到 GitHub 仓库
要将自动构建和部署配置到 Firebase，必须首先将项目推送到 GitHub 存储库。
- 在 Visual Studio Code 中打开您的项目。
- 从侧边栏打开源代码控制菜单或只需使用此快捷方式（按 Ctrl+Shift+G）即可打开。
- 单击Publish to GitHub按钮，如下图所示。
发布到 GitHub
- 根据需要输入存储库名称，然后选择公共或私有存储库的类型。
- 等待 VS Code 将您的项目发布到 GitHub。
捆绑用于生产的 Angular 应用程序
默认情况下，所有 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、函数、托管、存储。向下滚动并按空格键选择托管，然后按 Enter 按钮继续。
- 按回车后，现在终端要求选择一个项目。选择“使用现有项目”选项，然后按回车键选择您之前创建的项目名称。
- 现在终端会要求您选择包含要使用 firebase deploy 上传的托管资产的公共目录。
- 输入您之前生成的包含角度构建的 dist 文件夹的路径。就我而言，它是dist/calc-angular
- 现在为选项设置自动构建和部署与 GitHub选择是吗？
- 以用户名/存储库的格式输入您的 GitHub 用户名和存储库名称，用于选项“您希望为哪个 GitHub 存储库设置 GitHub 工作流程？”
- 对于所有其他选项，只需输入 Yes 或根据需要按 Enter 键。
- Firebase 初始化完成后，只需在终端中输入以下命令即可部署您的项目。
firebase deploy- 执行该命令后，它会提供一个输出，其中包含指向 Firebase 项目控制台的链接和已部署项目的 URL，您可以通过它通过任何设备访问您的应用程序。
现在您的 Angular 应用程序已成功部署到 Firebase。