Cloud Storage 使用入门 (Web)

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

准备工作

  1. 请确保您已完成 Web 应用入门指南（如果尚未完成）。包括：

    • 创建 Firebase 项目。

    • 在项目中注册您的 Web 应用，并通过向应用添加 Firebase JS SDK 和 Firebase 配置对象，将应用与 Firebase 相关联。

  2. 确保您的 Firebase 项目采用的是随用随付 Blaze 定价方案。如果您是 Firebase 和 Google Cloud 新手，请确认您是否有资格获得 $300 赠金。

创建默认的 Cloud Storage 存储桶

  1. 在 Firebase 控制台的导航窗格中，选择 Storage。

    如果您的项目尚未采用随用随付 Blaze 定价方案，系统会提示您升级项目。

  2. 点击开始使用。

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

  4. 为默认存储桶配置 Firebase Security Rules。在开发过程中，请考虑设置公开访问规则。

  5. 点击完成。

您现在可以在 Firebase 控制台的Cloud Storage“文件”标签页中查看存储桶。默认存储桶名称的格式为 PROJECT_ID.firebasestorage.app。

设置公开访问权限

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

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

添加 Cloud Storage JS SDK 并初始化 Cloud Storage

在初始化 JavaScript SDK 时，您必须指定您的 Cloud Storage 存储桶名称。

您可以在 Firebase 控制台的 Cloud Storage“文件”标签页中找到您的 Cloud Storage 存储桶名称。根据您创建默认存储桶的时间，存储桶名称将采用以下格式之一：

  • PROJECT_ID.firebasestorage.app （默认存储桶是在2024 年 10 月 30 日或之后创建的）
  • PROJECT_ID.appspot.com （默认存储桶是在2024 年 10 月 30 日之前创建的）

使用以下这段代码初始化您的 SDK：

Web 

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: 'BUCKET_NAME'
};

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


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

Web 

import firebase from "firebase/app";
import "firebase/compat/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: 'BUCKET_NAME'
};

// 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

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

// 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://BUCKET_NAME

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

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

使用自定义 Firebase 应用

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

Web

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

// 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

后续步骤