웹에서 Cloud Storage 시작하기

Cloud Storage for Firebase를 사용하면 이미지와 동영상 등 사용자 제작 콘텐츠를 업로드 및 공유하여 앱에 리치 미디어 콘텐츠를 빌드할 수 있습니다. 데이터는 고가용성과 글로벌 중복성을 갖춘 엑사바이트급 객체 스토리지 솔루션인 Google Cloud Storage 버킷에 저장됩니다. Cloud Storage for Firebase를 사용하면 이러한 파일을 휴대기기와 웹브라우저에서 직접 안전하게 업로드할 수 있으며 네트워크가 불안정해도 문제가 없습니다.

시작하기 전에

  1. 웹 앱 시작 가이드를 아직 완료하지 않았으면 완료하세요. 여기에는 다음이 포함됩니다.

    • Firebase 프로젝트 만들기

    • 프로젝트에 웹 앱을 등록하고 Firebase JS SDK와 Firebase 구성 객체를 앱에 추가하여 앱을 Firebase에 연결합니다.

  2. Firebase 프로젝트에서 사용한 만큼만 지불하는 Blaze 요금제를 사용하고 있는지 확인합니다. Firebase와 Google Cloud를 처음 사용하는 경우 $300 크레딧을 받을 자격이 되는지 확인하세요.

기본 Cloud Storage 버킷 만들기

  1. Firebase Console의 탐색창에서 Storage를 선택합니다.

    프로젝트에서 아직 사용한 만큼만 지불하는 Blaze 요금제를 사용하고 있지 않으면 프로젝트를 업그레이드하라는 메시지가 표시됩니다.

  2. 시작하기를 클릭합니다.

  3. 기본 버킷 위치를 선택합니다.

  4. 기본 버킷의 Firebase Security Rules를 구성합니다. 개발 중에 공개 액세스 규칙을 설정하는 것이 좋습니다.

  5. 완료를 클릭합니다.

이제 Firebase Console의 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 Console의 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 참조를 만드는 방법을 알아보세요.

고급 설정

다음 사용 사례에는 추가 설정이 필요합니다.

첫 번째 사용 사례는 사용자가 전 세계에 분포해 있고 사용자와 가까운 곳에 데이터를 저장하려는 경우에 적합합니다. 예를 들어 미국, 유럽, 아시아에 버킷을 만들고 해당 리전 사용자의 데이터를 저장하면 지연 시간을 줄일 수 있습니다.

두 번째 사용 사례는 데이터의 액세스 패턴이 다양할 때 유용합니다. 예를 들어 사진과 같은 자주 액세스하는 콘텐츠를 저장하는 멀티 리전 또는 리전 버킷을 설정하고 사용자 백업과 같은 자주 액세스하지 않는 콘텐츠를 저장하는 Nearline 또는 Coldline 버킷을 설정할 수 있습니다.

이러한 두 사용 사례에는 여러 Cloud Storage 버킷을 사용하는 것이 좋습니다.

세 번째 사용 사례는 Google Drive와 같이 사용자가 여러 개의 계정(예: 개인용 계정과 업무용 계정)으로 로그인할 수 있는 앱을 빌드할 때 유용합니다. 커스텀 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

다음 단계