/

如何使用 Firebase Hosting 开始

如何使用 Firebase Hosting 开始

Firebase 是一个由 Firebase 公司于 2011 年开发的移动和 Web 应用开发平台，于 2014 年被 Google 收购。如今，Firebase 是 Google Cloud 服务的一部分，不仅如此，它还是他们云端产品的旗舰。

Firebase 是一个复杂而多样的产品，主要针对移动应用。然而，它的其中一个特性是高级 web 托管服务。

Firebase Hosting 特点

Firebase Hosting 提供托管静态网站的服务，您可以使用静态网站生成器生成的网站，也可以是使用服务器端 CMS 平台构建的网站，并从中生成网站的静态副本。

只要不是动态网站都可以托管在 Firebase Hosting 上。例如，如果您使用 Disqus 或 Facebook 评论系统，WordPress 博客几乎总是一个很好的静态网站候选。

Firebase Hosting 通过 Fastly CDN 提供文件传输，支持 HTTPS 并自动提供 SSL 证书，并提供自定义域名支持。

其免费层级很大方，并提供便宜的升级计划，非常适合开发者使用。Firebase 提供一个 CLI 界面工具，简化了部署流程，并支持一键回滚。

为什么应该使用 Firebase Hosting？

Firebase 是部署静态网站和单页应用程序的好选择。

我喜欢使用 Firebase Hosting 主要是因为我测试了许多不同的供应商，Firebase 在全球范围内都提供了惊人的速度，而且不需要额外的 CDN，因为 CDN 已经内置在 Firebase 中并且是免费的。

另外，使用自己的 VPS 也是一个很好的选择，但是我不想仅仅为了一个简单的网站而管理自己的服务器，我更愿意专注于内容而不是操作，就像我在 Heroku 上部署应用一样。

Firebase 的设置甚至比 Heroku 更简单。

安装 Firebase CLI 工具

使用 npm 安装 Firebase CLI：

1
npm install -g firebase-tools

或者使用 yarn 安装：

1
yarn global add firebase-tools

然后使用 Google 账号进行身份验证（假设您已经拥有一个 Google 账号），运行：

1
firebase login

在 Firebase 上创建一个项目

访问 https://console.firebase.google.com/ 并创建一个新项目。

在 Firebase 上创建一个新项目

返回控制台，在您正在开发的网站的根目录下运行：

1
firebase init

选择 “Hosting”，然后按空格键进入下一步。

现在，您需要选择要将网站部署到的项目。

选择 “创建新项目”。

然后选择包含您网站静态版本的文件夹，例如 public。

对于“将站点配置为单页应用程序（重写所有 URL 为 /index.html）？”的问题选择“否”，还会询问“在文件 public/index.html 已存在的情况下，要覆盖吗？”以避免 Firebase 添加自己的默认 index.html 文件。

您可以继续了：

已创建项目

配置网站

Firebase CLI 应用程序在网站根目录下创建了 firebase.json 文件。

在本文中，我将告诉您如何在 Firebase Hosting 中配置一个简单的功能，在 firebase.json 文件中添加一小部分配置。

我想在所有网站资源（包括图像、CSS 和 JS 文件）上设置 Cache-Control 标头指令。

一个干净的 firebase.json 文件包含以下内容：

1
2
3
4
5
6
{
 "hosting": {
 "public": "public",
 "ignore": ["firebase.json", "\*\*/.\*", "\*\*/node\_modules/\*\*"]
 }
}

它告诉 Firebase 网站内容位于何处，并且应忽略哪些文件。除了 public 文件夹外，您可以自由添加所有其他文件夹。

现在我们要在其中添加一个名为 headers 的新属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
 "hosting": {
 "public": "public",
 "ignore": ["firebase.json", "\*\*/.\*", "\*\*/node\_modules/\*\*"],
 "headers": [
 {
 "source": "\*\*/\*.@(jpg|jpeg|gif|png|css|js)",
 "headers": [
 {
 "key": "Cache-Control",
 "value": "max-age=1000000" //1 week+
 }
 ]
 }
 ]
 }
}

如您所见，我们告诉 Firebase 对于所有以 jpg|jpeg|gif|png|css|js 结尾的文件，应该应用 Cache-Control:max-age=1000000 指令，这意味着所有资源都会被缓存超过1周。

发布网站

当您准备好发布网站时，只需运行：

1
firebase deploy

Firebase 将处理一切。

现在，您可以打开 https://yourproject.firebaseapp.com 网址，应该能看到网站正常运行。

自定义域名

下一步是使您的网站使用自定义域名。

进入 https://console.firebase.google.com/project/_/hosting/main 并单击 “连接域名” 按钮：

设置自定义域名

向导将询问您要使用的域名，然后会提供一个您需要添加到托管 DNS 面板中用于验证域名的 TXT 记录。

如果该域名是全新的，可能需要一些时间才能通过此步骤。

完成后，界面将同时提供两个 A 记录供您添加到托管 DNS 面板中。

如果您设置了 yourdomain.com，不要忘记设置 www.yourdomain.com 并将其重定向。

连接域名

现在，您只需等待托管更新 DNS 记录并等待 DNS 缓存刷新。

另外，请记住，SSL 证书会自动提供，但需要一些时间才能生效。

tags: [“Firebase”, “Firebase Hosting”, “web hosting”, “static websites”, “CDN”, “custom domain”]