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 rich media dans vos applications. Vos données sont stockées dans un bucket Google Cloud Storage, une solution de stockage d'objets à l'échelle de l'exaoctet offrant 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 vous ne l'avez pas encore 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 et connectez-la à Firebase en ajoutant le SDK Firebase JS 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 êtes éligible à 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 Stockage.

    Si votre projet n'est pas encore associé au 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 Firebase Security Rules pour votre bucket par défaut. Lors du développement, pensez à 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 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, la façon dont elles doivent être indexées, et le moment 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 d'accès public.

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

Ajouter le SDK JS 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éé le ou après le 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 !

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

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 et réduire la latence.

Le deuxième cas d'utilisation est utile si vous disposez de 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 les sauvegardes des utilisateurs ou d'autres contenus rarement consultés.

Dans l'un ou l'autre de ces cas d'utilisation, vous souhaiterez 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 plus haut dans ce guide, ou utiliser 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 trouverez le numéro de votre projet comme décrit dans l'introduction aux projets Firebase.

Cela n'a aucune incidence sur les buckets nouvellement créés, car leur contrôle d'accès par défaut est défini sur "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