開始使用 Cloud Storage 網頁版

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 控制台的儲存空間資訊主頁。

  2. 按一下「Files」分頁標籤，然後查看檔案檢視器的標頭。

  3. 將網址複製到剪貼簿。通常為 project-id.appspot.com 格式。

  4. 至應用程式中的 firebaseConfig 物件，請新增 storageBucket 屬性：

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

// 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: '[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

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://<your-cloud-storage-bucket>

如需查看專案編號，請參閱 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

後續步驟