Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Premiers pas avec Cloud Storage sur le Web

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Cloud Storage pour Firebase vous permet de télécharger et de partager du contenu généré par l'utilisateur, tel que des images et des vidéos, ce qui vous permet de créer du contenu multimédia enrichi 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 avec une haute disponibilité et une redondance globale. Cloud Storage pour Firebase vous permet de télécharger ces fichiers en toute sécurité directement à partir d'appareils mobiles et de navigateurs Web, en gérant facilement les réseaux inégaux.

Conditions préalables

Si vous ne l'avez pas déjà fait, installez le SDK Firebase JS et initialisez Firebase .

Créer un bucket Cloud Storage par défaut

  1. Dans le volet de navigation de la console Firebase , sélectionnez Stockage , puis cliquez sur Démarrer .

  2. Consultez les messages concernant la sécurisation de vos données Cloud Storage à l'aide de règles de sécurité. Lors du développement, envisagez de définir vos règles d'accès public .

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

    • Ce paramètre d'emplacement est l'emplacement des ressources Google Cloud Platform (GCP) par défaut de votre projet . Notez que cet emplacement sera utilisé pour les services GCP de votre projet qui nécessitent un paramètre d'emplacement, en particulier votre base de données Cloud Firestore et votre application App Engine (obligatoire si vous utilisez Cloud Scheduler).

    • Si vous ne parvenez pas à sélectionner un emplacement, cela signifie que votre projet possède déjà un emplacement de ressource GCP par défaut. Il a été défini lors de la création du projet ou lors de la configuration d'un autre service nécessitant un paramètre de localisation.

    Si vous êtes sur le plan Blaze, vous pouvez créer plusieurs buckets , chacun avec son propre emplacement .

  4. Cliquez sur Terminé .

Configurer l'accès public

Cloud Storage pour Firebase fournit un langage de règles déclaratives qui vous permet de définir comment vos données doivent être structurées, comment elles doivent être indexées et quand 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 l' authentification , vous pouvez configurer vos règles d'accès public .

Cela rend Cloud Storage ouvert à tous, même aux personnes qui n'utilisent pas votre application, alors assurez-vous de restreindre à nouveau votre Cloud Storage lorsque vous configurez l'authentification.

Ajoutez l'URL de votre compartiment à votre application

S'il n'est pas déjà inclus, vous devez ajouter l'URL de votre compartiment Cloud Storage à l'objet de configuration de votre application Firebase .

  1. Accédez à votre tableau de bord Stockage dans la console Firebase .

  2. Cliquez sur l'onglet Fichiers , puis regardez dans l'en-tête de la visionneuse de fichiers.

  3. Copiez l'URL dans votre presse-papiers. Il se présente généralement sous la forme project-id .appspot.com .

  4. À votre objet firebaseConfig dans votre application, ajoutez l'attribut storageBucket avec l'URL de votre bucket :

Web version 9

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

Web version 8

import firebase from "firebase/app";
import "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: '[your-storage-bucket-url]'
};

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

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

Configuration avancée

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

Le premier cas d'utilisation est parfait si vous avez des utilisateurs à travers le monde et que vous souhaitez stocker leurs données près d'eux. Par exemple, vous pouvez créer des compartiments 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 compartiment multirégional ou régional qui stocke des images ou d'autres contenus fréquemment consultés, et un compartiment Nearline ou Coldline qui stocke des sauvegardes d'utilisateurs ou d'autres contenus peu 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 Firebase App personnalisée pour authentifier chaque compte supplémentaire.

Utiliser plusieurs buckets Cloud Storage

Si vous souhaitez utiliser un bucket Cloud Storage autre que celui fourni par défaut ci-dessus, ou utiliser plusieurs buckets Cloud Storage dans une seule application, vous pouvez créer une instance de firebase.storage qui fait référence à votre bucket personnalisé :

Web version 9

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

Web version 8

// Get a non-default Storage bucket
var storage = firebase.app().storage("gs://my-custom-bucket");

Travailler avec des buckets importés

Lors de l'importation d'un bucket Cloud Storage existant dans Firebase, vous devrez accorder à Firebase la possibilité d'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://<your-cloud-storage-bucket>

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

Cela n'affecte pas les compartiments nouvellement créés, car ceux-ci ont le contrôle d'accès par défaut 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 compliquée à l'aide d'un firebase.app.App personnalisé, vous pouvez créer une instance de firebase.storage.Storage initialisée avec cette application :

Web version 9

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

Web version 8

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

Prochaines étapes