部署与托管

如今，可供选择的托管方案非常多，且在性能和服务方面几乎都相当接近。

因此，我们可以自由选择自己偏好的提供商。不过，在本课程中，我们将使用 Firebase 平台来托管我们的应用。由于我们在之前的演示中已经利用了 Cloud Firestore 的离线持久化能力，因此选择 Firebase 托管是顺理成章的。

当然，这并非强制要求。我们仍然可以使用 Cloud Firestore 作为 NoSQL 数据库，而将应用部署在 Azure 或 Netlify 等平台上。最终的选择权在于我们自己。

Firebase 托管

Firebase 托管是 Firebase 平台提供的网页内容托管服务。它具备诸多优势，并且得益于其命令行工具（CLI），项目设置和部署过程极为快速简便。

Firebase 托管不仅适用于静态网页内容，也适合更复杂、动态的应用：

• 安全：托管数据默认启用 SSL。我们无需购买证书，应用将以 HTTPS 协议交付，符合 Google 推动“整体安全网络”的目标。

• 快速：部署后的文件会被缓存到全球不同位置的 CDN 边缘节点 SSD 上。这意味着客户端将从最近的 CDN 节点获取数据，确保内容加载迅速。

• 部署简单：借助 Firebase CLI，我们只需在本地项目中配置基本的 Firebase 参数，即可通过一条命令完成部署。此外，通过 Firebase 控制台，我们还能查看应用的下载量、进出流量等关键数据。
  如果发现最新版本存在问题，只需点击一下即可回滚到之前的版本。

配置 Firebase

以下是将应用部署到 Firebase 所需的所有步骤、包和命令。

创建 Firebase 项目

首先，我们需要创建一个新的 Firebase 项目，它可视为一个用于 Web 或移动应用（iOS/Android）的根容器。

创建项目后，我们可以选择添加与应用兼容的服务。考虑到我们的 PWA 应用，可能感兴趣的包括 Google Analytics、Cloud Firestore 和性能监控等功能。在 Firebase 平台上，功能开关非常容易操作，因为平台提供了多种 SDK，可根据需求灵活调整。

访问 Firebase 控制台，使用 Google 账号登录并点击“添加新项目”：

我们需要输入项目名称。我选择的是“Educative PWA”。名称必须唯一，如果 Firebase 中已存在同名项目，系统会自动建议替代名称。

此时，我们可以编辑 Project ID，该信息位于输入项目名称的字段下方。

若对默认名称满意且唯一，则无需更改。但请注意，项目创建后无法修改此参数。

我们可以选择是否启用分析功能。分析是其他服务（如 Crashlytics 或 A/B 测试）的前提条件，因此若计划使用这些功能，建议开启分析。

完成！Firebase 项目将自动为您创建。项目就绪后，可进入仪表板，全面管理设置、账单及可用功能：

将应用添加到 Firebase 项目

在控制台中，可以选择注册移动应用或 Web 应用。

在本例中，我们选择 Web 选项，并为应用命名，例如 “my-demo-pwa”。
该名称仅在 Firebase 内部使用，不会对外公开，仅用于标识项目。

此时，Firebase 会为我们刚创建的项目生成配置密钥。这些密钥将用于将我们的 PWA 与 Cloud Firestore 等服务绑定。

我们需要在项目中使用这些密钥，并务必妥善保管。以之前课程中的 Angular 示例为例，可以将这些密钥粘贴到 environments 文件夹下的配置文件中：

1export const environment = {
2    production: false,
3
4    // 你的 Web 应用的 Firebase 配置
5    firebaseConfig: {
6        apiKey: "SyAK3jHFQdpF7xS42AxJ7Gh2wSBChs2svvcJ",
7        authDomain: "educative-pwa.firebaseapp.com",
8        databaseURL: "https://educative-pwa.firebaseio.com",
9        projectId: "educative-pwa",
10        storageBucket: "educative-pwa.appspot.com",
11        messagingSenderId: "3364045128815",
12        appId: "1:3364045128815:web:h37d2810a4bdr99j14e251"
13    }
14};

这样可以在应用中更方便地访问这些配置。要将 Angular 应用连接到 Firebase，需要安装 firebase 和 @angular/fire 两个 npm 包。
可通过以下命令一次性安装：npm i --save firebase @angular/fire

AngularFire 是 Firebase 官方的 Angular 库。在 PWA 项目中，需在 app.module.ts 文件中注册已安装的包：

1import { environment } from "src/environments/environment";
2import { AngularFireModule } from "@angular/fire";
3import { AngularFirestoreModule } from "@angular/fire/firestore";
4
5@NgModule({
6    declarations: [AppComponent],
7    imports: [
8        ...
9        AngularFireModule.initializeApp(environment.firebaseConfig),
10        AngularFirestoreModule
11    ]
12})

⚠️ 注意！ 我们将 Firebase 项目配置对象作为参数传递给 initializeApp() 方法，从而实现 PWA 与 Firebase 项目的绑定。

如果不使用 Angular，通用的 Firebase 初始化方式也非常相似：

1import * as firebase from "firebase/app";
2
3const firebaseConfig = {
4    apiKey: "SyAK3jHFQdpF7xS42AxJ7Gh2wSBChs2svvcJ",
5    authDomain: "educative-pwa.firebaseapp.com",
6    databaseURL: "https://educative-pwa.firebaseio.com",
7    projectId: "educative-pwa",
8    storageBucket: "educative-pwa.appspot.com",
9    messagingSenderId: "3364045128815",
10    appId: "1:3364045128815:web:h37d2810a4bdr99j14e251"
11};
12
13// 初始化 Firebase
14firebase.initializeApp(firebaseConfig);

安装 Firebase CLI

Firebase CLI 可用于设置本地项目、部署代码等多种任务。它是将代码部署到 Firebase 最便捷的方式。

可通过以下命令从 npm 安装：

1npm install -g firebase-tools

安装完成后，使用终端命令 firebase login 登录 Firebase 项目，并输入凭证。这将使您的 Firebase 项目在 Firebase Tools 的作用域内可见。

在本地初始化 Firebase

现在，为了初始化我们的 PWA 项目，需要运行 firebase init 命令。
这一步是为了将本地项目与之前在 Firebase 平台上创建的项目关联起来。

⚠️ 注意！ 请确保在应用根目录下执行 firebase init。

在此过程中，系统会提示您选择不同的选项：

• 我们选择 Hosting（后续可再添加如 Cloud Functions 等功能）。

• 由于我们已在 Firebase 控制台创建了项目，选择“使用现有项目”，然后从中选择正确的项目。

• 需指定一个目录作为公共根目录。对于我们的 Angular 示例，通常是 /dist 文件夹，或任何你设定的生产构建目标文件夹。该目录将包含编译后的包和静态资源，用于部署到 Firebase。

• 接着，选择网站配置类型。在本例中，我们选择单页应用（SPA）模式。

初始化完成后，Firebase 会生成两个文件：

• firebase.json 配置文件
• .firebaserc 文件，用于存储项目别名

将 PWA 部署到 Firebase

尽管上述配置看似繁琐，但只需执行一次，且每一步都非常直观。

配置完成后，只需在终端运行 firebase deploy 命令，即可将 PWA 部署到 Firebase 托管服务。

收到确认消息后，应用将正式上线，访问地址如下：

educative-pwa.web.app
educative-pwa.firebaseapp.com

educative-pwa 是我们在创建 Firebase 项目时定义的项目 ID。
显然，我们也可以将自定义域名绑定到 Firebase 托管的站点。

从此以后，每次在 PWA 中添加新功能，只需运行 firebase deploy 命令，即可将最新版本发布到 Firebase 并立即生效。

进一步阅读

有关使用 Angular 开发 PWA 的更多信息，请参考以下链接：

• Angular 部署指南
• AngularFire 库

总结

在本课中，您学习了如何将 PWA 部署并托管在 Firebase 上。开发流程的最后一步，就是让您的作品面向公众开放。

正如课程开头所说，我们有多种托管服务商可供选择，例如 Azure 或 Netlify，它们同样是可行的选项。