Comienza a usar Cloud Storage en la Web

Cloud Storage for Firebase te permite subir y compartir contenido generado por usuarios, como imágenes y videos, lo que te permite integrar contenido de rich media en tus apps. Los datos se almacenan en un bucket de Google Cloud Storage, una solución de almacenamiento de objetos a escala de exabytes con alta disponibilidad y redundancia global. Cloud Storage for Firebase te permite subir de forma segura estos archivos directamente desde dispositivos móviles y navegadores web, además de administrar las redes irregulares con facilidad.

Antes de comenzar

  1. Si aún no lo hiciste, asegúrate de completar la guía de introducción para apps web. Esto incluye lo siguiente:

    • Crear un proyecto de Firebase.

    • Registrar tu app web con el proyecto y conectarla a Firebase, y agregarle el SDK de JS de Firebase y tu objeto de configuración de Firebase a la app.

  2. Asegúrate de que tu proyecto de Firebase tenga el plan de precios Blaze (pago por uso). Si es la primera vez que usas Firebase y Google Cloud, verifica si cumples con los requisitos para obtener un crédito de $300.

Crea un bucket predeterminado de Cloud Storage

  1. En el panel de navegación de la consola de Firebase, selecciona Storage.

    Si tu proyecto aún no está en el plan de precios Blaze de pago por uso, se te pide que lo actualices.

  2. Haz clic en Comenzar.

  3. Selecciona una ubicación para el bucket predeterminado.

  4. Configura el Firebase Security Rules para tu bucket predeterminado. Durante el desarrollo, te recomendamos que configures reglas para el acceso público.

  5. Haz clic en Listo.

Ahora puedes ver el bucket en la pestaña Archivos de Cloud Storage de la consola de Firebase. El formato predeterminado del nombre del bucket es PROJECT_ID.firebasestorage.app.

Configura el acceso público

Cloud Storage for Firebase proporciona un lenguaje de reglas declarativas que te permite definir cómo se deben estructurar los datos, cómo se deben indexar y cuándo se pueden leer y escribir. Según la configuración predeterminada, se restringe el acceso de lectura y escritura a Cloud Storage, por lo que solo los usuarios autenticados pueden leer o escribir datos. Para comenzar sin configurar Authentication , puedes configurar tus reglas para el acceso público.

Esto hace que Cloud Storage esté abierto para todo el mundo, incluso las personas que no usan tu app, por lo que asegúrate de restringir nuevamente tu Cloud Storage cuando configures la autenticación.

Agrega el SDK de Cloud Storage JS y, luego, inicializa Cloud Storage

Debes especificar el nombre de tu bucket de Cloud Storage cuando inicialices el SDK de JavaScript.

Puedes encontrar el nombre de tu bucket de Cloud Storage en la pestaña Archivos de Cloud Storage de la consola de Firebase. Según cuándo hayas creado tu bucket predeterminado, el nombre del bucket tendrá uno de los siguientes formatos:

  • PROJECT_ID.firebasestorage.app (bucket predeterminado creado a partir del 30 de octubre de 2024)
  • PROJECT_ID.appspot.com (bucket predeterminado creado antes del 30 de octubre de 2024)

Inicializa el SDK con el siguiente fragmento de código:

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

Ya puedes comenzar a usar Cloud Storage

Paso siguiente: Más información para crear una referencia de Cloud Storage.

Configuración avanzada

Hay algunos casos de uso que necesitan configuración adicional:

El primer caso de uso es perfecto si tienes usuarios en todo el mundo y quieres almacenar sus datos cerca de ellos. Por ejemplo, puedes crear buckets en EE.UU., Europa y Asia para almacenar datos de usuarios de esas regiones, a fin de reducir la latencia.

El segundo caso de uso es útil si tienes datos con diferentes patrones de acceso. Por ejemplo, puedes configurar un bucket regional o multirregional que almacene fotos o cualquier tipo de contenido al que se accede con frecuencia y, por otro lado, un bucket de Nearline o Coldline que almacene copias de seguridad de usuarios y otros tipos de contenido a los que se accede con poca frecuencia.

En ambos casos, te recomendamos usar varios buckets de Cloud Storage.

El tercer caso práctico es útil si estás creando una app, como Google Drive, que permite a los usuarios acceder con varias cuentas (por ejemplo, una cuenta personal y una de trabajo). Puedes usar una instancia de app de Firebase personalizada para autenticar cada cuenta adicional.

Usar varios buckets de Cloud Storage

Si quieres usar un bucket de Cloud Storage distinto del predeterminado que se describió anteriormente en esta guía, o usas varios buckets de Cloud Storage en una sola app, puedes crear una instancia de firebase.storage que haga referencia a tu bucket personalizado:

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

Trabaja con buckets importados

Cuando importes un bucket existente de Cloud Storage a Firebase, deberás permitir que Firebase acceda a estos archivos con la herramienta gsutil que se incluye en el SDK de Google Cloud:

gsutil -m acl ch -r -u service-PROJECT_NUMBER@gcp-sa-firebasestorage.iam.gserviceaccount.com gs://BUCKET_NAME

Para encontrar el número de tu proyecto, sigue las instrucciones que se describen en la introducción a los proyectos de Firebase.

Esta acción no influye en los buckets creados recientemente, ya que el control de acceso predeterminado permite el acceso de Firebase. Esta es una medida temporal y se ejecutará de forma automática en el futuro.

Usa una app de Firebase personalizada

Si estás creando una app más compleja con una firebase.app.App personalizada, puedes crear una instancia de firebase.storage.Storage que se inicialice con la app:

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

Próximos pasos