Implantar no Firebase App Hosting com um app Next.js

1. Antes de começar

Neste codelab, você vai aprender a fazer a implantação no Firebase App Hosting usando um app da Web Next.js chamado Friendly Eats, que é um site de avaliações de restaurantes.

O app da Web completo oferece recursos úteis que demonstram como o Firebase pode ajudar você a criar apps Next.js.

• Build e implantação automáticos:este codelab mostra como usar o Firebase App Hosting para criar e implantar automaticamente seu código Next.js sempre que você enviar para uma ramificação configurada.
• Login e logout:o app da Web concluído permite que os usuários façam login/logout com o Google. O login e a persistência do usuário são gerenciados inteiramente pelo Firebase Authentication.
• Imagens: o app da Web concluído permite que os usuários que fizeram login façam upload de imagens de restaurantes. Os recursos de imagem são armazenados no Cloud Storage para Firebase. O SDK do Firebase para JavaScript fornece um URL público para as imagens enviadas. Esse URL público é armazenado no documento do restaurante relevante no Cloud Firestore.
• Filtros: o app da Web concluído permite que os usuários que fizeram login filtrem a lista de restaurantes por categoria, local e preço. Também é possível personalizar o método de classificação usado. Os dados são acessados do Cloud Firestore, e as consultas do Firestore são aplicadas com base nos filtros usados.
• Avaliações: o app da Web concluído permite que os usuários conectados postem avaliações de restaurantes com uma nota e uma mensagem de texto. As informações das avaliações são armazenadas no Cloud Firestore.
• Resumos de avaliações:o web app concluído resume automaticamente as avaliações usando um modelo do Gemini. Os resumos gerados por IA são armazenados no Cloud Firestore.

Pré-requisitos

• Conhecimento de Next.js e JavaScript.

O que você vai aprender

• Como usar o Firebase com o roteador de apps Next.js e a renderização do lado do servidor
• Como autorizar chamadas para a API Gemini usando apenas secrets do lado do servidor

Pré-requisitos

• Um navegador da sua escolha, como o Google Chrome
• Acesso ao IDX.dev (um espaço de trabalho baseado na Web)
• Uma Conta do Google para a criação e o gerenciamento do seu projeto do Firebase
• Uma conta do GitHub (não precisa ser a mesma conta de e-mail acima)

2. Configurar o ambiente de desenvolvimento e o repositório do GitHub

Este codelab fornece a base de código inicial do app e depende da CLI do Firebase e do IDX.dev.

Criar um repositório do GitHub e importar para o IDX

Com o Firebase App Hosting, é possível configurar um repositório do GitHub para que ele crie e implante seu código Next.js sempre que você enviar para um branch configurado.

1. Crie um repositório do GitHub para este codelab: https://github.com/new. Dê o nome que quiser, por exemplo, MyFriendlyEatsCodelab.
2. Copie o URL do novo repositório. Ele vai ficar assim:
   https://github.com/USER_NAME/REPOSITORY_NAME.git
3. Acesse https://idx.google.com e faça login.
4. Clique em Importar um repositório e cole o URL do GitHub copiado.
   O IDX vai pedir para você vincular ao GitHub e clonar seu repositório (vazio).

Ver o repositório de código-fonte do codelab

Confira a origem do codelab em https://github.com/firebase/friendlyeats-web. O repositório friendlyeats-web contém projetos de exemplo para várias plataformas.

Este codelab em que você está trabalhando se concentra apenas no Firebase App Hosting e na API Gemini. Ele é uma versão abreviada do codelab completo "Integrar o Firebase a um app Next.js". Este codelab abreviado exige que você trabalhe apenas com o código-fonte na ramificação #io-connect do repositório friendlyeats-web, especificamente o diretório nextjs-step10.

Anote os seguintes diretórios adicionais do repositório friendlyeats-web. Embora você não precise desses diretórios para este codelab, é útil saber o que eles são.

• nextjs-start: contém o código inicial do codelab completo "Integrar o Firebase a um app Next.js".
• nextjs-end: contém o código da solução do app da Web finalizado.

Copie a origem do codelab para o novo repositório

Veja como copiar o diretório nextjs-step10 para seu próprio repositório:

1. No IDX, abra o terminal usando Menu > Terminal > Novo terminal.
2. Use o pacote npm giget para buscar apenas o diretório nextjs-step10 da ramificação io-connect:

   npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
   

3. Rastreie as mudanças localmente com o git:

   git add -A
   git commit -m "codelab starting point"
   git branch -M main
   git push -u origin main
   

Agora você vai ver o código inicial no repositório do GitHub.

3. Revisar a base de código inicial

Nesta seção, você vai revisar algumas áreas da base de código inicial do app às quais vai adicionar funcionalidades neste codelab.

Estrutura de pastas e arquivos

A tabela a seguir contém uma visão geral da estrutura de pastas e arquivos do app:

Componentes do servidor e do cliente

O app é um app da Web Next.js que usa o Roteador de apps. A renderização do servidor é usada em todo o app. Por exemplo, o arquivo src/app/page.js é um componente do servidor responsável pela página principal. O arquivo src/components/RestaurantListings.jsx é um componente do cliente indicado pela diretiva "use client" no início do arquivo.

Declarações de importação

Em alguns arquivos, você vai notar instruções de importação como estas:

import RatingPicker from "@/src/components/RatingPicker.jsx";

O app usa o símbolo @ para evitar caminhos de importação relativos pesados e é possível graças a aliases de caminho.

APIs específicas do Firebase

Todo o código da API do Firebase é encapsulado no diretório src/lib/firebase. Os componentes individuais do React importam as funções encapsuladas do diretório src/lib/firebase, em vez de importar as funções do Firebase diretamente.

Dados simulados

Os dados simulados de restaurantes e avaliações estão no arquivo src/lib/randomData.js. Os dados desse arquivo são reunidos no código do arquivo src/lib/fakeRestaurants.js.

4. Configurar seu projeto do Firebase

Nesta seção, você vai configurar um projeto do Firebase e associar um app da Web do Firebase a ele. Você também vai configurar os serviços do Firebase usados pelo app da Web de exemplo.

Criar um projeto do Firebase

1. Faça login no console do Firebase usando a mesma Conta do Google da etapa anterior.
2. Clique no botão para criar um projeto e insira um nome (por exemplo, FriendlyEats Codelab).
   
3. Clique em Continuar.
4. Se solicitado, leia e aceite os Termos do Firebase e clique em Continuar.
5. (Opcional) Ative a assistência de IA no console do Firebase (chamada de "Gemini no Firebase").
6. Neste codelab, você não precisa do Google Analytics. Portanto, desative a opção do Google Analytics.
7. Clique em Criar projeto, aguarde o provisionamento e clique em Continuar.

Fazer upgrade do plano de preços do Firebase

Para usar o Firebase App Hosting e o Cloud Storage para Firebase, seu projeto do Firebase precisa estar no plano de preços Blaze de pagamento por uso, o que significa que ele está vinculado a uma conta do Cloud Billing.

• Uma conta do Cloud Billing exige uma forma de pagamento, como cartão de crédito.
• Se você ainda não conhece o Firebase e o Google Cloud, confira se tem qualificação para receber um crédito de US$300 e uma conta de teste sem custos financeiros do Cloud Billing.
• Se você estiver fazendo este codelab como parte de um evento, pergunte ao organizador se há créditos do Cloud disponíveis.

Para fazer upgrade do seu projeto para o plano Blaze, siga estas etapas:

1. No console do Firebase, selecione Fazer upgrade do seu plano.
2. Selecione o plano Blaze. Siga as instruções na tela para vincular uma conta do Cloud Billing ao seu projeto.
   Se você precisou criar uma conta do Cloud Billing como parte desse upgrade, talvez seja necessário voltar para o fluxo de upgrade no console do Firebase para concluir o processo.

5. Criar um back-end do App Hosting

Nesta seção, você vai configurar um back-end do App Hosting para monitorar uma ramificação no seu repositório git. Você também vai configurar todos os serviços com que o back-end vai se comunicar.

Ao final desta seção, você terá um back-end do App Hosting conectado ao seu repositório no GitHub, que vai recriar e lançar automaticamente uma nova versão do app sempre que você enviar um novo commit para a ramificação main.

Criar um back-end

1. No console do Firebase, navegue até a página do App Hosting:
2. Clique em Começar para iniciar o fluxo de criação do back-end.
3. Siga as instruções para importar e conectar o repositório do GitHub que você criou anteriormente.
4. Defina as configurações de implantação:
   • Mantenha o diretório raiz como /
   • Defina a ramificação ativa como main
   • Ativar os lançamentos automáticos
5. Nomeie o back-end como friendlyeats-codelab ou com outro nome de sua escolha. Isso se torna parte do domínio usado para acessar o back-end.
   Esse fluxo de trabalho também cria automaticamente um app da Web do Firebase no seu projeto. Mais adiante neste codelab, você vai usar os valores de configuração desse app da Web para conectar sua base de código ao projeto do Firebase.
6. Clique em Concluir e implantar. Depois de um momento, você vai acessar uma nova página em que poderá conferir o status do novo back-end do App Hosting.
7. No painel do App Hosting, copie seu novo domínio.
   Ele terá um padrão como BACKEND_ID--PROJECT_ID.REGION.hosted.app. Você vai precisar desse domínio para configurar o Firebase Authentication mais tarde.

Pode levar alguns minutos para que o domínio comece a funcionar devido à propagação do DNS e à criação do certificado SSL. Enquanto o back-end é criado, continue configurando o restante do projeto do Firebase e o back-end (próximas etapas deste codelab).

Sempre que você enviar uma nova confirmação para a ramificação main do seu repositório do GitHub, um novo build e lançamento vão começar no console do Firebase, e seu site será atualizado automaticamente quando o lançamento for concluído.

6. Configurar outros serviços do Firebase

Embora este codelab se concentre apenas no Firebase App Hosting e na API Gemini, o app da Web em funcionamento exige outros serviços do Firebase para funcionar. O código para fazer todos esses serviços funcionarem no seu app faz parte da base de código que você copiou para seu próprio repositório do GitHub, mas ainda é necessário configurar esses serviços no projeto do Firebase.

Configurar o Authentication

1. No console do Firebase, navegue até Autenticação.
2. Clique em Começar.
3. Na coluna Outros provedores, clique em Google > Ativar.
   1. Na caixa de texto Nome voltado ao público do projeto, digite um nome, como My FriendlyEatsCodelab app.
   2. No menu suspenso E-mail de suporte do projeto, selecione seu endereço de e-mail.
   3. Clique em Salvar.
4. Clique na guia Configurações na página Autenticação.
   1. Clique em Domínios autorizados no menu à esquerda da tela.
   2. Clique em Adicionar domínio e adicione o domínio do App Hosting recém-criado (ele termina com .hosted.app).
   3. Clique em Adicionar para salvar.

Configurar o Cloud Firestore

1. No painel à esquerda do console do Firebase, expanda Build e selecione Banco de dados do Firestore.
2. Clique em Criar banco de dados.
3. Deixe o ID do banco de dados definido como (default).
4. Selecione um local para o banco de dados e clique em Próxima.
   No caso de apps reais, escolha um local próximo aos usuários.
5. Clique em Iniciar no modo de teste. Leia o aviso sobre as regras de segurança.
   Mais adiante neste codelab, você vai adicionar regras de segurança para proteger seus dados. Não distribua ou exponha um aplicativo publicamente sem adicionar regras de segurança ao seu banco de dados.
6. Clique em Criar.

Configurar o Cloud Storage para Firebase

1. No painel à esquerda do console do Firebase, expanda Build e selecione Storage.
2. Clique em Começar.
3. Selecione um local para seu bucket de armazenamento padrão.
   Os buckets em US-WEST1, US-CENTRAL1 e US-EAST1 podem aproveitar o nível"Sempre sem custo financeiro" do Google Cloud Storage. Os buckets em todos os outros locais seguem os preços e usos do Google Cloud Storage.
4. Clique em Iniciar no modo de teste. Leia o aviso sobre as regras de segurança.
   Mais adiante neste codelab, você vai adicionar regras de segurança para proteger seus dados. Não distribua ou exponha um aplicativo publicamente sem adicionar regras de segurança ao bucket do Storage.
5. Clique em Criar.

7. Configurar seu app da Web

Agora que você criou um projeto do Firebase e ativou todos os serviços usados no app, já pode começar a trabalhar no IDX para configurar o app da Web e usar esses serviços.

Fazer login na CLI do Firebase no IDX

O IDX já tem o Node.js e a CLI do Firebase instalados. Por isso, você pode pular a instalação e começar a configurar a CLI.

1. No terminal do IDX, execute estes comandos para configurar a CLI e usar o projeto do Firebase que você criou antes:

   firebase login --no-localhost
   firebase use --add
   

   Quando um alias for solicitado, digite codelab.
2. Para que o Firebase colete dados, insira Y ou N. Qualquer uma das opções funciona para este codelab.
3. No navegador, selecione sua Conta do Google e clique em Permitir.

Implantar regras de segurança e índices

O código copiado para o repositório do GitHub já tem conjuntos de regras de segurança para o Firestore (em firestore.rules) e para o Cloud Storage para Firebase (em storage.rules). Depois de implantar as regras de segurança, os dados no banco de dados e no bucket ficam mais bem protegidos contra uso indevido.

Você também pode usar a CLI para implantar um conjunto de índices do Firestore (em firestore.indexes.json) e ativar consultas avançadas.

1. No terminal do IDX, execute este comando para implantar essas regras de segurança e índices:

   firebase deploy --only firestore,storage
   

2. Se aparecer a pergunta "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", pressione Enter para selecionar Sim.

Adicionar a configuração do Firebase ao código do app da Web

1. No console do Firebase, faça o seguinte:
   1. Acesse as Configurações do projeto.
   2. Role a tela para baixo até a seção Seus apps e selecione o app com o mesmo nome do seu back-end do App Hosting.
   3. Em Configuração do SDK, escolha a opção Config e copie as propriedades da variável firebaseConfig e os valores delas.
2. No IDX, faça o seguinte:
   1. Abra o arquivo apphosting.yaml. É aqui que você vai configurar as variáveis de ambiente no App Hosting, além de secrets e configuração de tempo de execução.
   2. Preencha os valores das variáveis de ambiente fornecidas com os valores de configuração que você copiou do console do Firebase.Por exemplo (substitua pelos seus próprios valores):

      runConfig:
          minInstances: 0
          maxInstances: 2
      env:
          # Get these values from the Firebase console
          - variable: NEXT_PUBLIC_FIREBASE_API_KEY
              value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
          - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
              value: project-id.firebaseapp.com
          - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
              value: project-id
          - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
              value: project-id.firebasestorage.app
          - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
              value: 111111111111
          - variable: NEXT_PUBLIC_FIREBASE_APP_ID
              value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
      

   3. Salve o arquivo. Em seguida, no terminal do IDX, execute estes comandos para enviar as mudanças ao GitHub:

      git commit -a -m "Setup Firebase Config"
      
      git push
      

3. Volte para o console do Firebase, navegue até a página do App Hosting e faça o seguinte:
   1. Clique em Ver painel para seu back-end.
   2. Observe que um novo build foi acionado pelo seu git push. Isso leva cerca de três minutos para concluir a criação e o lançamento no Cloud Run. Para acompanhar o progresso, clique no ícone build-ID.
   3. Atualize a página do console para verificar se o lançamento foi concluído. Quando o processo for concluído, clique no link do seu domínio (que termina em .hosted.app) em domínios para abrir e conferir o app recém-implantado.

Parabéns, você implantou o app da Web inicial. Vamos nos aprofundar um pouco mais.

8. Testar o web app em um navegador

Verificar se é possível fazer login com o Firebase Authentication

1. No navegador, atualize a página que mostra seu app da Web.
2. Clique em Sign in with Google.
3. Saia e faça login novamente. A página é atualizada em tempo real sem ser atualizada. Repita essa etapa com diferentes usuários.
4. Opcional: no navegador, atualize o app da Web. Clique com o botão direito do mouse no app da Web, selecione Conferir código-fonte da página e pesquise o nome de exibição. Ele aparece no código-fonte HTML bruto retornado do servidor.

Acessar informações do restaurante

O app da Web inclui dados simulados de restaurantes e avaliações.

Para inserir dados simulados de restaurantes no seu banco de dados do Cloud Firestore, selecione > Adicionar restaurantes de exemplo.

Verificar se as listas do restaurante são carregadas no ambiente de execução do servidor

Usando o framework Next.js, pode não ser óbvio quando os dados são carregados no ambiente de execução do servidor ou do lado do cliente.

Para verificar se as fichas de restaurantes são carregadas no ambiente de execução do servidor, siga estas etapas:

1. No app da Web, abra o DevTools e desative o JavaScript.
2. Atualize o app da Web. As listas dos restaurantes ainda são carregadas. As informações do restaurante são retornadas na resposta do servidor. Quando o JavaScript está ativado, as informações do restaurante são hidratadas com o código JavaScript do lado do cliente.
3. No DevTools, reative o JavaScript.
4. No app da Web, selecione > Adicionar restaurantes de exemplo. Se a função de snapshot for implementada corretamente, os restaurantes vão aparecer em tempo real, sem precisar atualizar a página.

Adicionar avaliações de um restaurante

Para adicionar uma avaliação e verificar se ela está inserida no Cloud Firestore, siga estas etapas:

1. Atualize o app da Web e selecione um restaurante na página inicial.
2. Na página do restaurante, clique em .
3. Selecione uma nota.
4. Escreva uma avaliação.
5. Clique em Enviar. Sua avaliação vai aparecer no topo da lista.

9. Resumir avaliações de restaurantes com a IA generativa

Nesta seção, você vai adicionar um recurso de resumo de avaliações para que um usuário entenda rapidamente o que todos pensam de um restaurante sem precisar ler todas as avaliações.

Armazenar uma chave de API do Gemini no Cloud Secret Manager

O App Hosting se integra ao Cloud Secret Manager para permitir que você armazene valores sensíveis, como chaves de API, com segurança.

1. Para usar a API Gemini, você precisará de uma chave de API. Crie uma chave no Google AI Studio.
   Quando solicitado, selecione o mesmo projeto que você está usando neste codelab. Nos bastidores, um projeto do Firebase é um projeto do Google Cloud.
2. No terminal do IDX, execute este comando para criar um novo secret:

   firebase apphosting:secrets:set gemini-api-key
   

3. Quando o valor secreto for solicitado, copie e cole sua chave da API Gemini do Google AI Studio.
4. Se aparecer a pergunta "To use this secret, your backend's service account must be granted access. Would you like to grant access now?", pressione Enter para selecionar Sim.
5. Quando perguntado se o novo secret precisa ser adicionado a apphosting.yaml, digite Y para aceitar e pressione Enter para selecionar GEMINI_API_KEY como o nome da variável de ambiente.

Sua chave de API do Gemini agora está armazenada com segurança no Cloud Secret Manager e pode ser acessada pelo back-end do App Hosting. Também é possível conferir o valor no painel do Secret Manager no Console do Google Cloud.

6. Abra o arquivo apphosting.yaml e observe que o nome do seu secret foi gravado, mas não os valores.Ele deve ser semelhante a este:

   runConfig:
       minInstances: 0
       maxInstances: 2
   env:
       # Get these values from the Firebase console
       - variable: NEXT_PUBLIC_FIREBASE_API_KEY
           value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
       - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
           value: project-id.firebaseapp.com
       - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
           value: project-id
       - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
           value: project-id.firebasestorage.app
       - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
           value: 111111111111
       - variable: NEXT_PUBLIC_FIREBASE_APP_ID
           value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
       - variable: GEMINI_API_KEY
           secret: gemini-api-key
   

Implementar o componente de resumo da avaliação

1. No IDX, abra src/components/Reviews/ReviewSummary.jsx.
2. Substitua a função GeminiSummary por este código:

   export async function GeminiSummary({ restaurantId }) {
       const { firebaseServerApp } = await getAuthenticatedAppForUser();
       const reviews = await getReviewsByRestaurantId(
           getFirestore(firebaseServerApp),
           restaurantId
       );
   
       const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
       const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",
       safety_settings: [
           {
           category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
           threshold: HarmBlockThreshold.BLOCK_NONE,
           },
       ],
       });
       const reviewSeparator = "@";
       const prompt = `
           Based on the following restaurant reviews,
           where each review is separated by a '${reviewSeparator}' character,
           create a one-sentence summary of what people think of the restaurant.
   
           Here are the reviews: ${reviews.map(review => review.text).join(reviewSeparator)}
       `;
   
       try {
           const result = await model.generateContent(prompt);
           const response = await result.response;
           const text = response.text();
   
           return (
               <div className="restaurant__review_summary">
                   <p>{text}</p>
                   <p>✨ Summarized with Gemini</p>
               </div>
           );
       } catch (e) {
           console.error(e);
           return <p>Error contacting Gemini</p>;
       }
   }
   

3. No terminal do IDX, execute estes comandos para criar um commit e enviá-lo ao seu repositório do GitHub.

   git commit -a -m "Use AI to summarize reviews"
   
   git push
   

4. No console do Firebase, abra a página "App Hosting" e aguarde a conclusão do novo lançamento.
5. No navegador, clique em um card de restaurante. Na parte de cima da tela, você vai encontrar um resumo de uma frase de todas as avaliações do restaurante.
6. Adicione uma nova avaliação e atualize a página. O resumo vai mudar.

10. Conclusão

Parabéns! Você aprendeu a usar o Firebase App Hosting para implantar um app Next.js e usar a API Gemini para resumir texto. Especificamente, você usou o seguinte:

• Firebase App Hosting para criar e implantar automaticamente seu código Next.js sempre que você enviar para um branch configurado do GitHub.
• O Cloud Secret Manager (integrado ao App Hosting) para armazenar com segurança sua chave de API Gemini e criar recursos de IA generativa no seu app.

Saiba mais

Confira o codelab completo "Integrar o Firebase a um app Next.js" para saber como adicionamos o Firebase Authentication, o Cloud Firestore e o Cloud Storage para Firebase a esse app.

Confira também outros codelabs:

• Codelab da Web do Cloud Firestore
• Codelab do Firebase Angular Web Frameworks
• Codelab "Proteger os dados do Firestore com as regras de segurança do Firebase"