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

Angular CLI是Angular的命令行界面,是启动应用程序的最简单方法之一。 使用Angular CLI的好处在于,它可以让您专注于代码,而不必担心应用程序的结构,因为所有必需的文件都是为您生成的。

使用Angular CLI创建易于生产的应用程序非常容易。 另一方面,Firebase可以快速托管应用程序。 此外,Firebase具有许多功能和免费计划,可让您在不依赖付费计划的情况下试用该平台。

免费计划具有以下功能:

  • A / B测试
  • 分析
  • 应用索引
  • 认证方式
  • 云消息传递
  • 崩溃分析
  • 邀请
  • 性能监控
  • 预测

先决条件

为了运行Angular CLI,您必须在系统上安装Node.js 6.9和NPM 3或更高版本。 如果您尚未安装Node.js,请访问Node.js网站以找到有关如何在操作系统上安装Node.js的说明。

您还应该对以下内容有基本的了解:

  • 面向对象编程
  • JavaScript或TypeScript

安装Angular CLI

安装Angular CLI很容易:

npm install -g @angular/cli

上面的命令将安装最新版本的Angular。 要验证Angular CLI的成功安装,只需发出以下命令:

ng --version


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 6.0.8
Node: 10.7.0
OS: linux x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.8
@angular-devkit/core         0.6.8
@angular-devkit/schematics   0.6.8
@schematics/angular          0.6.8
@schematics/update           0.6.8
rxjs                         6.2.2
typescript                   2.7.2

创建一个Angular应用程序

现在您已经安装了Angular CLI,我们可以开始开发应用程序了。 在本教程中,我们不会深入研究构成Angular CLI项目的组件,因为本文主要是关于部署到Firebase的。

要创建一个新的应用程序,只需运行ng new [name_of_project] ,在其中您将name_of_project替换为您的应用程序名称。

ng new bucketlist

这将创建开始所需的所有文件。 如您所见,Angular CLI已经创建了许多文件,否则您将在较早版本(即Angular v1)中创建自己。

运行您的应用程序

要在浏览器中查看您的应用程序,请导航至项目文件夹并运行ng -serve 。 此命令用于在本地服务应用程序。

cd bucketlist
ng -serve

现在,导航到http:// localhost:4200 /,以查看正在运行的应用程序。 您对应用程序所做的任何更改都会重新加载到浏览器中,因此您不必继续运行该应用程序。

部署方式

现在我们已经创建了我们的应用程序,是时候部署它了。 我们将按照以下步骤操作:

  • 创建一个Firebase项目
  • 安装Firebase工具
  • 量产
  • 部署到Firebase

创建Firebase应用程序

Firebase网站截图

首先,您需要拥有一个Firebase帐户。 如果您还没有,请立即注册一个免费帐户。

在Firebase仪表板上,如下所示创建一个新项目。 您可以简单地为其命名与Angular应用相同的名称。 这将使其变得容易,尤其是如果您在Firebase仪表板上有很多项目时。

在Firebase中添加项目

安装Firebase命令工具

Firebase可以轻松设置主机,因为它提供了所有后续步骤。 要安装Firebase命令工具,只需运行:

npm install -g firebase-tools

注意:发出此命令时,您应该位于项目目录中,以便将工具安装在项目中。

验证Firebase

登录到Firebase。

firebase login

对交互式提示回答“ ”。

? Allow Firebase to collect anonymous CLI usage and error reporting information?
 Yes

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=486130067&redirect_uri=http%3A%2F%2Flocalhost%3A9005

Waiting for authentication…

接下来,Firebase CLI工具将打开浏览器,将要求您在其中允许Firebase通过Google Mail进行身份验证。

有关访问您的Google帐户的Firebase CLI消息

如果身份验证成功,您将在浏览器中的http:// localhost:9005 /处获得以下界面

Firebase CLI登录成功页面

初始化项目

下一步是初始化Firebase项目。 这会将您的本地Angular应用程序链接到您刚创建的Firebase应用程序。 为此,只需运行:

firebase init

选择“托管”作为您要为项目设置的功能,因为我们仅对Firebase托管感兴趣。

######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /home/vaatiesther/Desktop/bucketlist

? Which Firebase CLI features do you want to setup for this folder? Press Space 
to select features, then Enter to confirm your choices. Database: Deploy Firebas
e Realtime Database Rules, Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Select a default Firebase project for this directory: Bucketlist (bucketlist-7
2e57)

=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? database.rules.json
✔  Database Rules for bucketlist-72e57 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

此命令将创建两个文件:

  • .fireb aserc
  • .firebase.json

这两个文件包含Firebase配置以及有关您的应用程序的一些重要信息。

JSON文件应如下所示:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

生产建筑

Angular CLI提供了ng build --prod命令,该命令可启动生产构建。 此命令将创建一个dist文件夹,其中包含用于提供应用程序服务的所有文件。 为了使您的应用程序在加载网页时更轻松,更快速,此过程很重要。 为此,只需发出:

ng build --prod

部署应用程序!

如果您已经执行了所有步骤,那么我们本地的Angular应用现在已链接到Firebase,您可以像使用Git一样轻松地推送文件。 只需执行firebase deploy命令即可部署您的应用程序。

firebase deploy


=== Deploying to 'bucketlist-72e57'...

i  deploying database, hosting
i  database: checking rules syntax...
✔  database: rules syntax for database bucketlist-72e57 is valid
i  hosting: preparing public directory for upload...
✔  hosting: 1 files uploaded successfully
i  database: releasing rules...
✔  database: rules for database bucketlist-72e57 released successfully

✔  Deploy complete!

现在已经部署了您的应用程序,您可以通过发出以下命令来查看它。

firebase open hosting:site

结论

如您所见,Firebase入门非常容易,因为只需很少的设置即可托管您的应用。 而且,与设置传统托管相比,它花费的时间要少得多! Angular是用于应用程序开发的出色框架-多年来它确实在发展,并且每个更新都具有更高级的功能和错误修复。

有关更多信息,请访问Angular官方网站Firebase,并探索同时使用这两种技术的可能性。

翻译自: https://code.tutsplus.com/tutorials/how-to-deploy-an-angular-cli-application-to-firebase--cms-31574

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值