開始在網頁版 Cloud Storage 中使用

Cloud Storage for Firebase 可讓您上傳及分享圖片、音訊、影片和其他檔案等內容 (包括使用者原創內容)，以便在應用程式中建構互動式多媒體內容。您的資料會儲存在 Google Cloud Storage bucket 中，這是艾位元組規模的物件儲存庫解決方案，具備高可用性和全球備援功能。Cloud Storage for Firebase 可讓您直接從行動裝置和網路瀏覽器安全上傳這些檔案，輕鬆處理不穩定的網路。

事前準備

  1. 如果尚未完成網頁應用程式入門指南，請務必先完成。包括：

    • 建立 Firebase 專案。

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

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

建立預設 Cloud Storage bucket

  1. 在 Firebase 控制台中，依序前往「Databases & Storage」(資料庫和儲存空間) > 「Storage」(儲存空間)。

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

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

  3. 選取預設 bucket 的位置。

  4. 設定預設 bucket 的 Firebase Security Rules。開發期間，建議設定公開存取規則。

  5. 按一下「完成」。

現在，您可以在 Firebase 控制台中查看值區 (依序前往「Databases & Storage」(資料庫和儲存空間) >「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 bucket 名稱。

您可以在 Firebase 控制台中找到 Cloud Storage 值區名稱 (依序前往 「資料庫與儲存空間」>「儲存空間」> 「檔案」分頁)。視您建立預設 bucket 的時間而定，bucket 名稱會採用下列其中一種格式：

  • PROJECT_ID.firebasestorage.app (預設 bucket 建立時間在 2024 年 9 月 或之後)
  • PROJECT_ID.appspot.com (2024 年 9 月前建立的舊版預設值區)

使用下列程式碼片段初始化 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 參考檔案。

進階設定

在某些情況下，您需要進行額外設定：

如果您的使用者遍布全球，且您想將他們的資料儲存在鄰近位置，則第一個用途最適合您。舉例來說，您可以在美國、歐洲和亞洲建立 bucket，儲存這些區域的使用者資料，以降低延遲時間。

如果資料有不同的存取模式，第二種用途就很有幫助。舉例來說，您可以設定多區域或區域型值區，用來儲存圖片或其他經常存取的內容，並設定 Nearline 或 Coldline 值區，用來儲存使用者備份或其他不常存取的內容。

無論是哪一種用途，您都應該使用多個 Cloud Storage 值區。

如果您正在建構應用程式 (例如 Google 雲端硬碟)，可讓使用者登入多個帳戶 (例如個人帳戶和工作帳戶)，則第三個用途會很有幫助。您可以使用自訂 Firebase 應用程式執行個體，驗證每個額外帳戶。

使用多個 Cloud Storage bucket

如要使用本指南稍早所述預設值以外的 Cloud Storage bucket，或在單一應用程式中使用多個 Cloud Storage bucket，可以建立參照自訂 bucket 的 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");

Web

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

使用匯入的值區

將現有的 Cloud Storage bucket 匯入 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");

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");

後續步驟