開始使用 Cloud Storage 網頁版

Cloud Storage for Firebase 可讓您上傳及分享使用者原創內容，例如圖片和影片，讓您在應用程式中建構豐富的媒體內容。您的資料會儲存在 Google Cloud Storage 值區中，這是具備高可用性和全球備援機制的 Exabyte 等級物件儲存空間解決方案。Cloud Storage for Firebase 可讓您直接透過行動裝置和網頁瀏覽器安全上傳這些檔案，輕鬆處理網路不穩定的問題。

事前準備

  1. 如果您尚未完成，請務必參閱Web 應用程式入門指南。包括：

    • 建立 Firebase 專案。

    • 將網頁應用程式註冊至專案，並將 Firebase JS SDK 和 Firebase 設定物件新增至應用程式，藉此將應用程式連結至 Firebase。

  2. 請確認您的 Firebase 專案採用即付即用 Blaze 定價方案。如果您剛開始使用 Firebase 和 Google Cloud，請確認是否符合 $300 美元抵免額的資格。

建立預設 Cloud Storage 值區

  1. 在 Firebase 控制台的導覽窗格中，選取「儲存空間」。

    如果專案尚未採用即付即用 Blaze 定價方案，系統會提示您升級專案。

  2. 按一下「開始使用」。

  3. 選取預設值區的位置。

  4. 為預設值區設定 Firebase Security Rules。開發期間，建議您設定公開存取權規則。

  5. 按一下「完成」。

您現在可以在 Firebase 主控台的 Cloud Storage「Files」分頁中查看 bucket。預設值區名稱格式為 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「Files」分頁中找到 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 參照。

進階設定

以下幾種用途需要額外設定：

如果您的使用者遍布全球，且希望將資料儲存在使用者附近的位置，第一種用途就非常適合。舉例來說，您可以在美國、歐洲和亞洲建立資料集，以便儲存這些地區使用者的資料，進而縮短延遲時間。

如果您有不同存取模式的資料，第二個用途就很實用。舉例來說，您可以設定多區域或區域值區，用來儲存相片或其他經常存取的內容，以及 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 時，您必須授予 Firebase 使用 Google Cloud SDK 中的 gsutil 工具存取這些檔案的權限：

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

後續步驟