Introdução ao Cloud Storage na Web

Com o Cloud Storage for Firebase, você faz upload e compartilha conteúdo gerado pelo usuário, como imagens e vídeo, para criar conteúdo de rich media nos apps. Seus dados são armazenados em um bucket do Google Cloud Storage, uma solução de armazenamento de objetos com capacidade que chega aos exabytes, além de alta disponibilidade e redundância global. Com o Cloud Storage for Firebase, o upload dos arquivos é feito com segurança e facilidade diretamente de dispositivos móveis e navegadores da Web, mesmo em redes intermitentes.

Antes de começar

  1. Conclua o guia para iniciantes de web apps, se ainda não tiver feito isso. Incluindo:

    • Como criar um projeto do Firebase.

    • Registre seu web app no projeto e conecte-o ao Firebase adicionando o SDK do Firebase para JavaScript e o objeto de configuração do Firebase ao app.

  2. Verifique se o projeto do Firebase está no plano de preços do Blaze de pagamento por uso. Se você ainda não conhece o Firebase e o Google Cloud, pode conferir se tem qualificação para receber um crédito de US$ 300.

Criar um bucket padrão do Cloud Storage

  1. No painel de navegação do console do Firebase, selecione Storage.

    Se o projeto ainda não estiver no plano de preços do Blaze de pagamento por uso, você vai receber uma mensagem para fazer upgrade.

  2. Clique em Começar.

  3. Selecione um local para o bucket padrão.

  4. Configure o Firebase Security Rules para o bucket padrão. Durante o desenvolvimento, avalie a possibilidade de configurar as regras para acesso público.

  5. Clique em Concluído.

Agora você pode conferir o bucket na guia Arquivos do Cloud Storage no console do Firebase. O formato de nome do bucket padrão é PROJECT_ID.firebasestorage.app.

Configurar acesso público

O Cloud Storage for Firebase oferece uma linguagem declarativa de regras para que você defina como os dados devem ser estruturados e indexados e quando podem ser lidos e gravados. Por padrão, o acesso de leitura e gravação do Cloud Storage é restrito aos usuários autenticados. Para iniciar sem configurar o Authentication, defina as regras para acesso público.

Isso deixa o Cloud Storage disponível para todos, até para os que não usam o app. Por isso, restrinja o Cloud Storage novamente quando configurar a autenticação.

Adicionar o SDK do Cloud Storage para JavaScript e inicializar o Cloud Storage

Especifique o nome do bucket Cloud Storage ao inicializar o SDK para JavaScript.

É possível encontrar o nome do bucket Cloud Storage na guia Arquivos do Cloud Storage no console do Firebase. Dependendo de quando você criou o bucket padrão, o nome dele vai estar em um dos seguintes formatos:

  • PROJECT_ID.firebasestorage.app (bucket padrão criado na data ou depois de 30 de outubro de 2024)
  • PROJECT_ID.appspot.com (bucket padrão criado antes de 30 de outubro de 2024)

Inicialize o SDK usando este snippet 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();

Você já pode começar a usar o Cloud Storage!

Próxima etapa? Saiba como criar uma referência do Cloud Storage.

Configuração avançada

Há alguns casos de uso que exigem configuração adicional:

O primeiro caso de uso é perfeito para quem tem usuários em todo o mundo e quer armazenar os dados perto deles. Por exemplo, para armazenar os dados dos usuários dos EUA, da Europa e da Ásia, crie buckets nessas regiões para reduzir a latência.

O segundo caso de uso é útil quando você tem dados com diferentes padrões de acesso. Por exemplo, configure um bucket regional ou multirregional que armazene imagens ou outros conteúdos acessados frequentemente e um bucket nearline ou coldline que armazene backups de usuários ou outros conteúdos pouco acessados.

Em qualquer um desses casos de uso, é recomendável usar vários buckets do Cloud Storage.

O terceiro caso de uso é útil ao criar um app, como o Google Drive, em que os usuários têm diversas contas conectadas. Por exemplo, uma conta pessoal e uma conta corporativa. Para autenticar cada conta adicional, é possível usar uma instância personalizada do app do Firebase.

Usar vários buckets do Cloud Storage

Para usar um bucket Cloud Storage diferente do padrão descrito anteriormente neste guia ou vários buckets Cloud Storage em um único app, crie uma instância do firebase.storage que faça referência ao 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

Trabalhar com buckets importados

Ao importar um bucket do Cloud Storage para o Firebase, é preciso conceder ao Firebase acesso a esses arquivos com a ferramenta gsutil inclusa no SDK Google Cloud:

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

Você pode encontrar o número do projeto conforme descrito na introdução a projetos do Firebase.

Isso não afeta os buckets recém-criados, porque eles têm o controle de acesso padrão, que autoriza o Firebase. Essa é uma medida temporária e será realizada automaticamente no futuro.

Usar um app personalizado do Firebase

Para desenvolver um app mais complexo usando um firebase.app.App personalizado, crie uma instância de firebase.storage.Storage inicializada com esse 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óximas etapas