Premiers pas avec Cloud Storage sur le Web

Cloud Storage for Firebase vous permet d'importer et de partager du contenu généré par les utilisateurs, comme des images et des vidéos, ce qui vous permet d'intégrer du contenu multimédia enrichi à vos applications. Vos données sont stockées dans un bucket Google Cloud Storage, une solution de stockage d'objets à l'échelle d'un exaoctet offrant une haute disponibilité et une redondance globale. Cloud Storage for Firebase vous permet d'importer ces fichiers de manière sécurisée directement depuis des appareils mobiles et des navigateurs Web, et de gérer facilement les réseaux instables.

Avant de commencer

  1. Si vous ne l'avez pas déjà fait, assurez-vous d'avoir suivi le guide de démarrage pour les applications Web. Par exemple :

    • Créer un projet Firebase

    • Enregistrez votre application Web auprès du projet, puis associez-la à Firebase en ajoutant le SDK JavaScript Firebase et votre objet de configuration Firebase à votre application.

  2. Assurez-vous que votre projet Firebase bénéficie du forfait Blaze avec paiement à l'usage. Si vous débutez avec Firebase et Google Cloud, vérifiez si vous pouvez bénéficier d'un crédit de 300$.

Créer un bucket Cloud Storage par défaut

  1. Dans le volet de navigation de la console Firebase, sélectionnez Storage (Stockage).

    Si votre projet n'est pas encore associé au forfait Blaze avec paiement à l'usage, vous serez invité à le faire.

  2. Cliquez sur Commencer.

  3. Sélectionnez un emplacement pour votre bucket par défaut.

  4. Configurez le Firebase Security Rules pour votre bucket par défaut. Lors du développement, envisagez de configurer vos règles pour l'accès public.

  5. Cliquez sur OK.

Vous pouvez désormais afficher le bucket dans l'onglet Cloud Storage Fichiers de la console Firebase. Le format de nom de bucket par défaut est PROJECT_ID.firebasestorage.app.

Configurer l'accès public

Cloud Storage for Firebase fournit un langage de règles déclaratif qui vous permet de définir la structure et l'indexation de vos données, ainsi que les moments où elles peuvent être lues et écrites. Par défaut, l'accès en lecture et en écriture à Cloud Storage est limité afin que seuls les utilisateurs authentifiés puissent lire ou écrire des données. Pour commencer sans configurer Authentication, vous pouvez configurer vos règles pour l'accès public.

Cela rend Cloud Storage accessible à tous, même aux personnes qui n'utilisent pas votre application. Veillez donc à le restreindre à nouveau lorsque vous configurez l'authentification.Cloud Storage

Ajouter le SDK JavaScript Cloud Storage et initialiser Cloud Storage

Vous devez spécifier le nom de votre bucket Cloud Storage lorsque vous initialisez le SDK JavaScript.

Vous trouverez le nom de votre bucket Cloud Storage dans l'onglet Cloud Storage Fichiers de la console Firebase. En fonction de la date à laquelle vous avez créé votre bucket par défaut, son nom sera au format suivant:

  • PROJECT_ID.firebasestorage.app (bucket par défaut créé à partir du 30 octobre 2024)
  • PROJECT_ID.appspot.com (bucket par défaut créé avant le 30 octobre 2024)

Initialisez le SDK à l'aide de l'extrait de code suivant:

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

Vous pouvez maintenant utiliser Cloud Storage !

Étape suivante ? Découvrez comment créer une référence Cloud Storage.

Configuration avancée

Certains cas d'utilisation nécessitent une configuration supplémentaire:

  • Utiliser des buckets Cloud Storage dans plusieurs pays
  • Utiliser des buckets Cloud Storage dans des classes de stockage différentes
  • Utiliser des buckets Cloud Storage avec plusieurs utilisateurs authentifiés dans la même application

Le premier cas d'utilisation est parfait si vous avez des utilisateurs dans le monde entier et que vous souhaitez stocker leurs données à proximité d'eux. Par exemple, vous pouvez créer des buckets aux États-Unis, en Europe et en Asie pour stocker les données des utilisateurs de ces régions afin de réduire la latence.

Le deuxième cas d'utilisation est utile si vous disposez de données avec des modèles d'accès différents. Par exemple, vous pouvez configurer un bucket multirégional ou régional qui stocke des images ou d'autres contenus consultés fréquemment, et un bucket Nearline ou Coldline qui stocke des sauvegardes utilisateur ou d'autres contenus consultés rarement.

Dans les deux cas, vous devez utiliser plusieurs buckets Cloud Storage.

Le troisième cas d'utilisation est utile si vous créez une application, comme Google Drive, qui permet aux utilisateurs d'avoir plusieurs comptes connectés (par exemple, un compte personnel et un compte professionnel). Vous pouvez utiliser une instance d'application Firebase personnalisée pour authentifier chaque compte supplémentaire.

Utiliser plusieurs buckets Cloud Storage

Si vous souhaitez utiliser un bucket Cloud Storage autre que le bucket par défaut décrit précédemment dans ce guide ou plusieurs buckets Cloud Storage dans une même application, vous pouvez créer une instance de firebase.storage qui fait référence à votre bucket personnalisé:

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

Utiliser des buckets importés

Lorsque vous importez un bucket Cloud Storage existant dans Firebase, vous devez autoriser Firebase à accéder à ces fichiers à l'aide de l'outil gsutil, inclus dans le SDK Google Cloud:

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

Vous pouvez trouver votre numéro de projet comme décrit dans la présentation des projets Firebase.

Cela n'a aucune incidence sur les nouveaux buckets, car leur contrôle d'accès par défaut est défini pour autoriser Firebase. Il s'agit d'une mesure temporaire qui sera effectuée automatiquement à l'avenir.

Utiliser une application Firebase personnalisée

Si vous créez une application plus complexe à l'aide d'un firebase.app.App personnalisé, vous pouvez créer une instance de firebase.storage.Storage initialisée avec cette application:

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

Étapes suivantes