热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何使用GitHub将角度应用部署到Firebase?

如何使用GitHub将角度应用部署到Firebase?原文

如何使用 GitHub 将角度应用部署到 Firebase?

原文:https://www . geeksforgeeks . org/如何部署-angular-application-to-firebase-use-github/

我们中的许多人无法在网络上展示我们的小规模或个人项目。因为主持这些项目有点困难,有时也要花几块钱。
在本文中,我们将向您展示如何在不购买任何域或托管提供商的情况下,免费部署您的 Angular 应用程序。同样,厌倦了每次迭代都部署应用程序吗?让我们也使用 GitHub 设置自动构建和部署。

初始化 Git 并将项目推送到 GitHub 存储库

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


  • 在 Visual Studio 代码中打开项目。

  • 从侧边栏打开源代码管理菜单,或者简单地使用这个快捷键(按 Ctrl+Shift+G)来打开。

  • 点击发布到 GitHub 按钮,如下图所示。

发布到 GitHub


  • 根据需要输入存储库名称,并选择存储库的公共或私有类型。


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


用于生产的捆绑角应用

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


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

ng build --prod


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


下载 Firebase 和安装程序进行部署

Firebase 命令行界面(CLI)工具可用于从命令行测试、管理和部署 Firebase 项目。


  • 要下载并安装 Firebase 命令行界面,请以管理员权限运行以下命令:

npm install -g firebase-tools


  • 现在,您应该使用 google 帐户登录 firebase,在项目终端中使用以下命令:

firebase login

为部署创建一个 Firebase 项目



  • 打开 firebase 网站,通过链接 https://console.firebase.google.com 登录到您的控制台

  • 登录后,点击添加项目按钮,然后输入您的项目名称,点击创建项目按钮,创建您的 Firebase 项目。

  • 现在是时候在您的项目终端中使用下面的命令初始化 firebase 了。

firebase init


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


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


  • 现在,终端要求您选择包含托管资产的公共目录,以便使用 firebase deploy 上传。

  • 输入您之前生成的包含角度构建的 dist 文件夹的路径。在我的例子中,它是距离/计算角度


  • 现在选择选项设置自动构建并使用 GitHub 部署?

  • 以用户名/存储库格式输入您的 GitHub 用户名和存储库名称,选项为“您希望为哪个 GitHub 存储库设置 GitHub 工作流?”

  • 对于所有其他选项,只需输入“是”或根据需要按回车键。


  • 一旦 Firebase 初始化完成,只需在终端中输入以下命令来部署您的项目。

firebase deploy


  • 一旦命令被执行,它就会提供一个带有 firebase 项目控制台链接和已部署项目的 URL 的输出,通过该输出,您可以通过任何设备访问您的应用程序。

现在,您的 Angular 应用程序已成功部署到 Firebase。


推荐阅读
  • DNN Community 和 Professional 版本的主要差异
    本文详细解析了 DotNetNuke (DNN) 的两种主要版本:Community 和 Professional。通过对比两者的功能和附加组件,帮助用户选择最适合其需求的版本。 ... [详细]
  • 本文深入探讨了Linux系统中网卡绑定(bonding)的七种工作模式。网卡绑定技术通过将多个物理网卡组合成一个逻辑网卡,实现网络冗余、带宽聚合和负载均衡,在生产环境中广泛应用。文章详细介绍了每种模式的特点、适用场景及配置方法。 ... [详细]
  • 深入解析 Vue 的 Transition 组件与第三方动画库的结合使用
    本文详细介绍了 Vue 中的 Transition 组件,探讨其内置类名机制、触发时机及自定义类名的应用。同时,结合 animate.css 和 GSAP 等第三方库,展示了如何实现复杂的动画效果。 ... [详细]
  • 基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发
    本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]
  • Symfony是一个功能强大的PHP框架,以其依赖注入(DI)特性著称。许多流行的PHP框架如Drupal和Laravel的核心组件都基于Symfony构建。本文将详细介绍Symfony的安装方法及其基本使用。 ... [详细]
  • 深入解析ES6至ES8的新特性与应用
    本文详细介绍了自2015年发布的ECMAScript 6.0(简称ES6)以来,JavaScript语言的多项重要更新,旨在帮助开发者更好地理解和利用这些新特性进行复杂应用的开发。 ... [详细]
  • 本文探讨了前端包管理器的核心功能,包括注册机制、文件存储、上传下载、以及依赖分析等关键特性,并介绍了几种流行的前端包管理工具。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 本文总结了在使用Ionic 5进行Android平台APK打包时遇到的问题,特别是针对QRScanner插件的改造。通过详细分析和提供具体的解决方法,帮助开发者顺利打包并优化应用性能。 ... [详细]
  • Node.js 入门指南(一)
    本文介绍了Node.js的安装步骤、如何创建第一个应用程序、NPM的基本使用以及处理回调函数的方法。通过实际操作示例,帮助初学者快速掌握Node.js的基础知识。 ... [详细]
  • Webpack中实现环境与代码的有效分离
    本文探讨了如何在Webpack中有效地区分开发与生产环境,并实现代码的合理分离,以提高项目的可维护性和加载性能。 ... [详细]
  • 本文通过探讨React中Context的使用,解决了在多层级组件间传递状态的难题。我们将详细介绍Context的工作原理,并通过实际案例演示其在项目中的具体应用。 ... [详细]
  • Vue 项目构建与部署指南
    本文将指导您完成Vue项目的构建和部署过程,包括环境搭建、项目初始化及配置、以及最终的部署步骤。 ... [详细]
author-avatar
潇湘江陵
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有