了解 2023 年 Google I/O 大会上介绍的 Firebase 亮点。了解详情

Cloud Storage 使用入门 (Web)

使用 Cloud Storage for Firebase，您可以上传和共享用户生成的内容（如图片和视频），以便将富媒体内容融入您的应用。您的数据存储在 Google Cloud Storage 存储桶中，这是一个 EB 级对象存储解决方案，具备高可用性和全局冗余性。通过 Cloud Storage for Firebase，您可以直接从移动设备和网络浏览器安全上传这些文件，从容应对网络不够稳定的情况。

前提条件

如果您尚未安装 Firebase JS SDK 并初始化 Firebase，请先完成该过程。

创建默认 Cloud Storage 存储桶

  1. 在 Firebase 控制台的导航窗格中，选择 Storage，然后点击开始使用。

  2. 查看有关使用安全规则保护 Cloud Storage 数据的信息。在开发过程中，请考虑设置公开访问规则。

  3. 为您的默认 Cloud Storage 存储桶选择一个位置。

    • 此位置设置将决定项目的默认 Google Cloud Platform (GCP) 资源位置。请注意，此位置将用于项目中需要位置设置的多项 GCP 服务，具体包括 Cloud Firestore 数据库和 App Engine 应用（如果您使用 Cloud Scheduler，则需要该应用）。

    • 如果您无法选择位置，表明您的项目已经具有默认 GCP 资源位置。它可能是在项目创建期间设置的，也可能是在设置需要位置设置的其他服务时指定的。

    如果您使用的是 Blaze 方案，则可以创建多个存储桶，每个存储桶都有自己的位置。

  4. 点击完成。

设置公开访问权限

Cloud Storage for Firebase 提供了一种声明式规则语言，可用于定义数据的结构、将数据编入索引的方式，以及何时可以读取和写入数据。默认情况下，对 Cloud Storage 的读写权限是受限的，只有通过身份验证的用户才能读写数据。如需在未设置 Authentication 的情况下开始使用，您可以配置公开访问规则。

这会使得 Cloud Storage 向所有人开放，包括不使用您的应用的用户，因此在设置身份验证时，请务必重新限制对 Cloud Storage 的访问权限。

将您的存储桶网址添加到您的应用

您需要将 Cloud Storage 存储桶网址添加到 Firebase 应用的配置对象（如果尚未添加该网址）。

  1. 进入 Firebase 控制台中的 Storage 信息中心。

  2. 点击文件标签页，然后找到文件查看器的页眉。

  3. 将网址复制到剪贴板。网址的格式通常为 project-id.appspot.com。

  4. 将带有存储桶网址的 storageBucket 属性添加到应用中的 firebaseConfig 对象：

Web version 9 

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
  storageBucket: ''
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Cloud Storage and get a reference to the service
const storage = getStorage(app);

Web version 8 

import firebase from "firebase/app";
import "firebase/storage";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
  storageBucket: '[your-storage-bucket-url]'
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Cloud Storage and get a reference to the service
const storage = firebase.storage();

现在可以开始使用 Cloud Storage 了！

后续步骤：了解如何创建 Cloud Storage 引用。

高级设置

以下几种使用情形需要进行额外的设置：

  • 使用多个地理区域中的 Cloud Storage 存储桶
  • 使用不同存储类别的 Cloud Storage 存储桶
  • 在同一个应用中有多个经过身份验证的用户的情况下使用 Cloud Storage 存储桶

如果您的用户遍布世界各地，并且您希望将他们的数据存储在各自所在地附近，则非常符合第一种使用情形。例如，您可以在美国、欧洲和亚洲分别创建存储桶，为这些区域的用户存储数据，以减少延迟时间。

如果您的数据有多种不同的访问模式，则符合第二种使用情形。 例如，您可以设置一个多区域或单区域存储桶来存储照片或其他经常访问的内容，并设置一个 Nearline 或 Coldline 存储桶来存储用户备份或其他不常访问的内容。

在这两种使用情形下，您都需要使用多个 Cloud Storage 存储桶。

如果您要构建一个类似 Google 云端硬盘这样允许用户登录多个帐号（例如一个个人帐号和一个工作帐号）的应用，则符合第三种使用情形。您可以使用自定义 Firebase 应用实例来对每个额外的帐号进行身份验证。

使用多个 Cloud Storage 存储桶

如果需要使用上文所述的默认存储桶以外的 Cloud Storage 存储桶，或在单个应用中使用多个 Cloud Storage 存储桶，则可以创建一个引用您的自定义存储桶的 firebase.storage 实例：

Web version 9

import { getApp } from "firebase/app";
import { getStorage } from "firebase/storage";

// Get a non-default Storage bucket
const firebaseApp = getApp();
const storage = getStorage(firebaseApp, "gs://my-custom-bucket");
storage_multiple_buckets.js

Web version 8

// Get a non-default Storage bucket
var storage = firebase.app().storage("gs://my-custom-bucket");
index.js

使用导入的存储桶

将现有 Cloud Storage 存储桶导入 Firebase 时，您必须使用 Google Cloud SDK 中包含的 gsutil 工具向 Firebase 授予访问这些文件的权限：

gsutil -m acl ch -r -u service-<project number>@gcp-sa-firebasestorage.iam.gserviceaccount.com gs://<your-cloud-storage-bucket>

您可以按 Firebase 项目简介中介绍的方法找到项目编号。

这不会影响新建的存储桶，因为其默认已设置为允许 Firebase 访问。这是一个临时的解决方法，将来不需要再手动执行。

使用自定义 Firebase 应用

如果您要使用自定义 firebase.app.App 构建更复杂的应用，可以创建使用该应用初始化的 firebase.storage.Storage 实例：

Web version 9

import { getStorage } from "firebase/storage";

// Get the default bucket from a custom firebase.app.App
const storage1 = getStorage(customApp);

// Get a non-default bucket from a custom firebase.app.App
const storage2 = getStorage(customApp, "gs://my-custom-bucket");
storage_custom_app.js

Web version 8

// Get the default bucket from a custom firebase.app.App
var storage = customApp.storage();

// Get a non-default bucket from a custom firebase.app.App
var storage = customApp.storage("gs://my-custom-bucket");
index.js

后续步骤