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 dans vos applications. Vos données sont stockées dans un Google Cloud Storage bucket, une solution de stockage d'objets à l'échelle de l'exaoctet, avec une haute disponibilité et une redondance mondiale. 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 ce n'est 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

    • Enregistrer votre application Web auprès du projet et connecter votre application à Firebase en ajoutant le SDK JS Firebase et votre objet de configuration Firebase à votre application

  2. Assurez-vous que votre projet Firebase utilise le forfait Blaze avec paiement à l'usage, qui est obligatoire depuis octobre 2024 (consultez nos questions fréquentes). Si vous débutez avec Firebase et Google Cloud, vérifiez si vous êtes éligible à un crédit de 300$.

Créer un bucket Cloud Storage par défaut

  1. Dans la console Firebase, accédez à Databases & Storage > Storage (Bases de données et stockage > Stockage).

    Si votre projet n'utilise pas encore le forfait Blaze avec paiement à l'usage, vous serez invité à le mettre à niveau.

  2. Cliquez sur Commencer.

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

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

  5. Cliquez sur OK.

Vous pouvez maintenant afficher le bucket dans la console Firebase (accédez à l'onglet Databases & Storage > Storage > Files (Bases de données et stockage > Stockage > Fichiers)). Le format du nom de votre 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 de vos données, leur indexation et le moment où vos données 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 à limiter à nouveau votre Cloud Storage lorsque vous configurez l'authentification.

Ajouter le Cloud Storage SDK JS 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 la console Firebase (accédez à l'onglet Databases & Storage > Storage > Files (Bases de données et stockage > Stockage > Fichiers)). Selon la date de création de votre bucket par défaut, le nom du bucket 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 êtes prêt à commencer à utiliser Cloud Storage !

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

Configuration avancée

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

Le premier cas d'utilisation est idéal si vous avez des utilisateurs dans le monde entier et que vous souhaitez stocker leurs données à proximité. 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 avez des données avec différents modèles d'accès. Par exemple, vous pouvez configurer un bucket multirégional ou régional qui stocke des images ou d'autres contenus fréquemment consultés, et un bucket nearline ou coldline qui stocke des sauvegardes utilisateur ou d'autres contenus rarement consultés.

Dans l'un ou l'autre de ces cas d'utilisation, vous devrez utiliser plusieurs Cloud Storage buckets.

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 Cloud Storage buckets

Si vous souhaitez utiliser un Cloud Storage bucket autre que le bucket par défaut décrit précédemment dans ce guide, ou utiliser plusieurs Cloud Storage buckets dans une seule application, vous pouvez créer une instance de firebase.storage qui 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' gsutil outil, inclus dans le Google Cloud SDK :

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

Vous trouverez le numéro de votre projet comme décrit dans l' introduction aux projets Firebase.

Cela n'affecte pas les buckets nouvellement créés, car le 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