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

最新推荐文章于 2022-02-13 10:28:18 发布

cunjie3951

最新推荐文章于 2022-02-13 10:28:18 发布

阅读量687

点赞数

文章标签： java python 大数据 linux mysql

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仪表板上，如下所示创建一个新项目。您可以简单地为其命名与Angular应用相同的名称。这将使其变得容易，尤其是如果您在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进行身份验证。

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

初始化项目

下一步是初始化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!

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