웹에서 Cloud Storage 시작하기

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

기본 요건

아직 진행하지 않았다면 Firebase JS SDK를 설치하고 Firebase를 초기화합니다.

기본 Cloud Storage 버킷 만들기

  1. Firebase Console의 탐색창에서 Storage를 선택한 후 시작하기를 클릭합니다.

  2. 보안 규칙을 사용하여 Cloud Storage 데이터를 보호하는 방법에 관한 메시지 내용을 검토합니다. 개발 중에는 공개 액세스 규칙 설정을 고려해 보세요.

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

    • 이 위치 설정이 프로젝트의 기본 Google Cloud Platform(GCP) 리소스 위치입니다. 이 위치는 특히 Cloud Firestore 데이터베이스 및 App Engine 앱(Cloud Scheduler 사용 시 필요)과 같이 위치 설정이 필요한 프로젝트의 GCP 서비스에 사용됩니다.

    • 위치를 선택할 수 없다면 프로젝트에 이미 기본 GCP 리소스 위치가 있는 것입니다. 이 위치는 프로젝트 생성 과정이나 위치 설정이 필요한 다른 서비스를 설정할 때 지정한 것입니다.

    Blaze 요금제에서는 각 위치가 설정된 버킷을 여러 개 만들 수 있습니다.

  4. 완료를 클릭합니다.

공개 액세스 설정

Firebase용 Cloud Storage가 제공하는 선언적 규칙 언어로 데이터의 구조, 색인 생성 방법, 데이터를 읽거나 쓸 수 있는 조건을 정의할 수 있습니다. 기본적으로 Cloud Storage에 대한 읽기 및 쓰기 액세스는 인증된 사용자만 데이터를 읽거나 쓸 수 있도록 제한됩니다. 공개 액세스 규칙을 구성하면 인증을 설정하지 않고 시작할 수 있습니다.

이렇게 하면 앱을 사용하지 않는 사람을 포함하여 모두에게 Cloud Storage가 공개되므로 인증을 설정할 때 Cloud Storage를 다시 제한해야 합니다.

앱에 버킷 URL 추가

Cloud Storage 버킷 URL이 아직 포함되어 있지 않으면 Firebase 앱의 구성 객체에 이 URL을 추가해야 합니다.

  1. Firebase Console에서 Storage 대시보드로 이동합니다.

  2. 파일 탭을 클릭한 다음 파일 뷰어의 헤더를 확인합니다.

  3. URL을 클립보드에 복사합니다. 일반적으로 project-id.appspot.com 형식입니다.

  4. 앱의 firebaseConfig 객체에 버킷 URL과 함께 storageBucket 속성을 추가합니다.

웹 모듈식 API 

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

웹 네임스페이스화된 API 

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

고급 설정

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

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

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

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

세 번째 사용 사례는 Google Drive와 같이 사용자가 여러 계정(예: 개인용 계정과 업무용 계정)으로 로그인할 수 있는 앱을 빌드하는 경우에 유용합니다. 커스텀 Firebase 앱 인스턴스를 사용하여 추가 계정을 각각 인증할 수 있습니다.

여러 Cloud Storage 버킷 사용

위에 제공된 기본값 이외의 Cloud Storage 버킷을 사용하거나 단일 앱에서 여러 Cloud Storage 버킷을 사용하려는 경우 커스텀 버킷을 참조하는 firebase.storage 인스턴스를 만들 수 있습니다.

웹 모듈식 API

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

웹 네임스페이스화된 API

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

Firebase 프로젝트 소개에 설명된 대로 프로젝트 번호를 확인할 수 있습니다.

새로 생성된 버킷은 액세스 제어에서 Firebase를 허용하도록 기본 설정되어 있으므로 이에 영향을 받지 않습니다. 이는 일시적인 조치로 향후 자동으로 수행될 예정입니다.

커스텀 Firebase 앱 사용

커스텀 firebase.app.App을 사용하여 보다 복잡한 앱을 빌드하는 경우 해당 앱으로 초기화된 firebase.storage.Storage 인스턴스를 만들 수 있습니다.

웹 모듈식 API

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

웹 네임스페이스화된 API

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

다음 단계