Implante automaticamente o aplicativo da Web Angular da IA generativa do controle de versões para o Cloud Run

1. Visão geral

Implantar um aplicativo da Web pela primeira vez pode ser assustador. Mesmo depois da primeira implantação, se o processo for muito trabalhoso, você poderá evitar a implantação de novas versões do aplicativo. Com a implantação contínua, é possível implantar automaticamente as mudanças do seu aplicativo com facilidade.

Neste laboratório, você vai escrever um aplicativo da Web e configurar o Cloud Run para implantar automaticamente o aplicativo quando uma mudança for feita no código-fonte. Em seguida, modifique e implante o aplicativo novamente.

O que você vai aprender

  • Escrever um aplicativo da Web com o editor do Cloud Shell
  • Armazenar o código do aplicativo no GitHub
  • Implantar automaticamente seu aplicativo no Cloud Run
  • Adicionar IA generativa ao seu aplicativo usando a Vertex AI

2. Pré-requisitos

  1. Se você ainda não tiver uma Conta do Google, crie uma.
    • Use uma conta pessoal em vez de uma conta escolar ou de trabalho. As contas escolares e de trabalho podem ter restrições que impedem a ativação das APIs necessárias para este laboratório.
  2. Se você ainda não tiver uma conta no GitHub, crie uma

3. Configurar o projeto

  1. Faça login no Console do Google Cloud.
  2. Ative o faturamento no Console do Cloud.
    • A conclusão deste laboratório custa menos de US $1 em recursos do Cloud.
    • Siga as etapas no final deste laboratório para excluir recursos e evitar mais cobranças.
    • Novos usuários podem aproveitar a avaliação sem custos financeiros de US$300.
    • Vai participar de um evento sobre IA generativa para desenvolvedores? Um crédito de US$1 pode estar disponível.
  3. Crie um projeto ou reutilize um projeto existente.
  4. Confirme se o faturamento está ativado em Meus projetos no Faturamento do Cloud
    • Se o novo projeto mostrar Billing is disabled na coluna Billing account:
      1. Clique nos três pontos na coluna Actions.
      2. Clique em Mudar faturamento.
      3. Selecione a conta de faturamento que você quer usar.
    • Se você estiver participando de um evento de IA generativa para desenvolvedores, a conta provavelmente será chamada de Conta de faturamento de avaliação do Google Cloud Platform.

4. Abrir editor do Cloud Shell

  1. Acesse o editor do Cloud Shell.
  2. Se o terminal não aparecer na parte de baixo da tela, abra-o:
    • Clique no menu de navegação Ícone do menu de navegação.
    • Clique em Terminal.
    • Clique em Novo Terminal.Abrir um novo terminal no editor do Cloud Shell
  3. No terminal, defina o projeto com este comando:
    • Formato:
      gcloud config set project [PROJECT_ID]
    • Exemplo:
      gcloud config set project lab-project-id-example
    • Se você não se lembrar do ID do projeto:
      • Para listar todos os IDs de projeto, use:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      Definir o ID do projeto no terminal do Editor do Cloud Shell
  4. Se for preciso autorizar, clique em Autorizar para continuar. Clique para autorizar o Cloud Shell
  5. Você vai receber esta mensagem:
    Updated property [core/project].
    Se você encontrar um WARNING e receber a pergunta Do you want to continue (Y/N)?, provavelmente inseriu o ID do projeto de forma incorreta. Pressione N, Enter e tente executar o comando gcloud config set project novamente.

5. Ativar APIs

No terminal, ative as APIs:

gcloud services enable \
  run.googleapis.com \
  cloudbuild.googleapis.com \
  aiplatform.googleapis.com

Esse comando pode levar alguns minutos para ser concluído, mas vai gerar uma mensagem de sucesso semelhante a esta:

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

6. Configurar o Git

  1. Defina seu e-mail de usuário global do Git:
    git config --global user.email "you@example.com"
  2. Defina seu nome de usuário global do Git:
    git config --global user.name "Your Name"
  3. Defina sua ramificação padrão global do Git como main:
    git config --global init.defaultBranch main

7. Escrever o código

Para escrever um aplicativo em Node.js:

  1. Navegue até o diretório principal:
    cd ~
  2. Crie o novo aplicativo Angular codelab-genai:
    npx @angular/cli new codelab-genai \
    --minimal \
    --inline-template \
    --inline-style \
    --ssr \
    --defaults
  3. Se você precisar instalar @angular/cli, pressione Enter para continuar:
    Need to install the following packages:
@angular/cli@18.2.4
Ok to proceed? (y)
  4. Navegue até o diretório codelab-genai:
    cd codelab-genai
  5. Abra o arquivo app.component.ts no editor do Cloud Shell:
    cloudshell edit src/app/app.component.ts
    Um arquivo vazio vai aparecer na parte de cima da tela. É aqui que você pode editar o arquivo app.component.ts. Mostrar que o código vai na seção superior da tela
  6. Copie o código a seguir e cole no arquivo app.component.ts aberto:
    import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    template: `
        <h1>Hello world!</h1>

        <router-outlet />
    `,
    styles: [],
})
export class AppComponent { }
    Depois de alguns segundos, o Cloud Shell Editor vai salvar seu código automaticamente. Esse código responde a solicitações HTTP com a saudação "Hello world!".

O código inicial do aplicativo está concluído e pronto para ser armazenado no controle de versão.

8. Criar um repositório

  1. Volte ao terminal do Cloud Shell na parte de baixo da tela.
  2. Verifique se você ainda está no diretório correto:
    cd ~/codelab-genai
  3. Inicializar o repositório Git
    git init -b main
  4. Faça login na CLI do GitHub
    gh auth login
    Pressione Enter para aceitar as opções padrão e siga as instruções na ferramenta de CLI do GitHub, incluindo:
    1. Em qual conta você quer fazer login? GitHub.com
    2. Qual é seu protocolo preferido para operações do Git neste host? HTTPS
    3. Autenticar o Git com suas credenciais do GitHub? Y (pule se ele não aparecer)
    4. Como você quer autenticar a CLI do GitHub? Login with a web browser
    5. Copie o código único
    6. Abra https://github.com/login/device.
    7. Cole o código de uso único
    8. Clique em Autorizar o GitHub.
    9. Conclua o login
  5. Confirme que você fez login:
    gh api user -q ".login"
    Se você tiver feito login, seu nome de usuário do GitHub vai aparecer.
  6. Criar uma variável GITHUB_USERNAME
    GITHUB_USERNAME=$(gh api user -q ".login")
  7. Confirme se você criou a variável de ambiente:
    echo ${GITHUB_USERNAME}
    Se você tiver criado a variável, seu nome de usuário do GitHub vai aparecer.
  8. Crie um repositório vazio do GitHub chamado codelab-genai:
    gh repo create codelab-genai --private
    Se você receber o erro:
    GraphQL: Name already exists on this account (createRepository)
    Então você já tem um repositório chamado codelab-genai. Você tem duas opções para continuar seguindo este tutorial:
  9. Adicione o repositório codelab-genai como o controle remoto origin:
    git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai

9. Compartilhar seu código

  1. Confirme se você está no diretório correto:
    cd ~/codelab-genai
  2. Adicione todos os arquivos no diretório atual a este commit:
    git add .
  3. Crie o primeiro commit:
    git commit -m "add http server"
  4. Envie o commit para a ramificação main do repositório origin:
    git push -u origin main

Execute este comando e acesse o URL resultante para conferir o código do aplicativo no GitHub:

echo -e "\n\nTo see your code, visit this URL:\n \
    https://github.com/${GITHUB_USERNAME}/codelab-genai/blob/main/src/app/app.component.ts \n\n"

10. Configurar implantações automáticas

  1. Deixe a guia do editor do Cloud Shell aberta. Vamos voltar a essa guia mais tarde.
  2. Em uma nova guia, acesse a página do Cloud Run.
  3. Selecione o projeto correto do Google Cloud no console Menu suspenso de projetos do Console do Google Cloud
  4. Clique em CONECTAR REPO.
  5. Clique em CONFIGURAR COM O CLOUD BUILD
      .
    1. Selecione GitHub como o Provedor de repositório
        .
      • Se você não tiver feito login na sua conta do GitHub no navegador, faça login com suas credenciais.
    2. Clique em Autenticar e em Continuar.
    3. Depois de fazer login, você vai ver uma mensagem na página do Cloud Run informando que O app GitHub não está instalado em nenhum dos seus repositórios.
    4. Clique no botão INSTALAR O GOOGLE CLOUD BUILD.
      • Na página "Configuração da instalação", selecione Somente repositórios selecionados e escolha o repositório codelab-genai que você criou usando a CLI.
      • Clique em Instalar.
      • Observação: se você tiver muitos repositórios do GitHub, isso pode levar alguns minutos para carregar.
    5. Selecione your-user-name/codelab-genai como o repositório
        .
      • Se o repositório não estiver presente, clique no link Gerenciar repositórios conectados.
    6. Deixe Ramificação como ^main$
    7. Clique em Go, Node.js, Python, Java, .NET Core, Ruby ou PHP via buildpacks do Google Cloud
      • Deixe os outros campos (Build context directory, Entrypoint e Function target) como estão.
    8. Clique em Salvar.
  6. Role a tela para baixo até Autenticação.
  7. Clique em Permitir invocações não autenticadas.
  8. Clique em CRIAR.

Quando o build terminar (o que leva vários minutos), execute este comando e acesse o URL resultante para ver o aplicativo em execução:

echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

11. Mudar o código

Volte ao editor do Cloud Shell.

Se você ainda tiver o editor do Cloud Shell aberto, pule estas etapas.

  1. Acesse o editor do Cloud Shell.
  2. Se o terminal não aparecer na parte de baixo da tela, abra-o:
    • Clique no menu de navegação Ícone do menu de navegação.
    • Clique em Terminal.
    • Clique em Novo Terminal.Abrir um novo terminal no editor do Cloud Shell
  3. No terminal, defina o projeto com este comando:
    • Formato:
      gcloud config set project [PROJECT_ID]
    • Exemplo:
      gcloud config set project lab-project-id-example
    • Se você não se lembrar do ID do projeto:
      • Para listar todos os IDs de projeto, use:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      Definir o ID do projeto no terminal do Editor do Cloud Shell
  4. Se for preciso autorizar, clique em Autorizar para continuar. Clique para autorizar o Cloud Shell
  5. Você vai receber esta mensagem:
    Updated property [core/project].
    Se você encontrar um WARNING e receber a pergunta Do you want to continue (Y/N)?, provavelmente inseriu o ID do projeto de forma incorreta. Pressione N, Enter e tente executar o comando gcloud config set project novamente.

Adicionar a Vertex AI ao seu aplicativo

  1. Volte ao terminal do Cloud Shell na parte de baixo da tela.
  2. Verifique se você ainda está no diretório correto:
    cd ~/codelab-genai
  3. Instale o SDK da Vertex AI para Node.js:
    npm install @google-cloud/vertexai
  4. Instale o SDK de autenticação do Google para Node.js:
    npm install google-auth-library
  5. Reabra server.ts no editor do Cloud Shell.
    cloudshell edit server.ts
  6. Substitua o código no arquivo server.ts por:
    // server.ts
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import bootstrap from './src/main.server';

import { VertexAI } from '@google-cloud/vertexai';
import { GoogleAuth } from 'google-auth-library';


// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
    const server = express();
    const serverDistFolder = dirname(fileURLToPath(import.meta.url));
    const browserDistFolder = resolve(serverDistFolder, '../browser');
    const indexHtml = join(serverDistFolder, 'index.server.html');
    const commonEngine = new CommonEngine();

    const auth = new GoogleAuth();

    server.set('view engine', 'html');
    server.set('views', browserDistFolder);

    // Example Express Rest API endpoints
    server.get('/api/facts', async (req, res) => {
        const project = await auth.getProjectId();

        const vertex = new VertexAI({ project: project });
        const generativeModel = vertex.getGenerativeModel({
            model: 'gemini-1.5-flash',
            generationConfig: { responseMimeType: 'application/json' }
        });

        const animal = req.query['animal'] || 'dog';
        const prompt = `Give me 10 fun facts about ${animal}. 
                        Return as json as an array in the format ['fact 1', 'fact 2']
                        Remove backticks and other markdown formatting.`;

        const resp = await generativeModel.generateContent(prompt);
        let factArray = '';

        if (resp.response.candidates) {
            factArray = JSON.parse(resp.response.candidates[0].content.parts[0].text || '');
        }
        res.send(factArray);
    });

    // Serve static files from /browser
    server.get('**', express.static(browserDistFolder, {
        maxAge: '1y',
        index: 'index.html',
    }));

    // All regular routes use the Angular engine
    server.get('**', (req, res, next) => {
        const { protocol, originalUrl, baseUrl, headers } = req;

        commonEngine
            .render({
                bootstrap,
                documentFilePath: indexHtml,
                url: `${protocol}://${headers.host}${originalUrl}`,
                publicPath: browserDistFolder,
                providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
            })
            .then((html) => res.send(html))
            .catch((err) => next(err));
    });

    return server;
}

function run(): void {
    const port = process.env['PORT'] || 4000;

    // Start up the Node server
    const server = app();
    server.listen(port, () => {
        console.log(`Node Express server listening on http://localhost:${port}`);
    });
}

run();
  7. Abra app.component.ts no editor do Cloud Shell.
    cloudshell edit src/app/app.component.ts
  8. Substitua o código no arquivo app.components.ts por:
    // app.component.ts
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterOutlet } from '@angular/router';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, FormsModule],
    template: `
        <section>
            <input
                type="text"
                placeholder="dog"
                [(ngModel)]="animal"
                class="text-black border-2 p-2 m-2 rounded"
            />
            <button
                (click)="getNewFunFacts()"
            >
                Get New Fun Facts
            </button>
            <ol>
                @for(fact of facts(); track fact) {
                    <li>{{fact}}</li>  
                } @empty {
                    <li>No facts are available</li>
                }
            </ol>
        </section>
    `,
    styles: '',
})
export class AppComponent {
    animal = '';
    facts = signal<string[]>([]);

    getNewFunFacts() {
        fetch(`/api/facts?animal=${this.animal}`).then(response => response.json()).then(facts => {
            this.facts.set(facts);
        });
    }
}

12. Reimplantar

  1. Confirme se você ainda está no diretório correto no Cloud Shell:
    cd ~/codelab-genai
  2. Execute estes comandos para confirmar uma nova versão do aplicativo no repositório git local:
    git add .
git commit -m "add latest changes"
  3. Envie as mudanças para o GitHub:
    git push
  4. Quando o build terminar, execute este comando e acesse o aplicativo implantado:
    echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

Pode levar vários minutos para que o build seja concluído e as mudanças apareçam.

Confira o histórico de todas as revisões aqui: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

13. (Opcional) Auditar seu uso da Vertex AI

Assim como em outros serviços do Google Cloud, é possível auditar as operações da Vertex AI. Os registros de auditoria ajudam você a responder às perguntas "Quem fez o quê, onde e quando?". Os registros de auditoria administrativa da Vertex AI são ativados por padrão. Para auditar solicitações de geração de conteúdo, é necessário ativar os registros de auditoria de acesso a dados:

  1. No console do Google Cloud, acesse a página Registros de auditoria:

    Se você usar a barra de pesquisa para encontrar essa página, selecione o resultado com o subtítulo IAM e administrador.
  2. Verifique se o projeto do Google Cloud é aquele em que você cria o aplicativo do Cloud Run.
  3. Na tabela Configuração dos registros de auditoria de acesso a dados, encontre e selecione Vertex AI API na coluna "Serviço".
  4. Na guia Tipos de registro, selecione os tipos de registro de auditoria de acesso a dados Admin read e Data read.
  5. Clique em Salvar.

Depois de ativar, você poderá ver os registros de auditoria de cada invocação do aplicativo. Para ver os registros de auditoria com detalhes de invocação, faça o seguinte:

  1. Volte para o aplicativo implantado e atualize a página para acionar o registro.
  2. No console do Google Cloud, acesse a página Explorador de registros:

  3. Na janela de consulta, digite:
    LOG_ID("cloudaudit.googleapis.com%2Fdata_access")
protoPayload.serviceName="aiplatform.googleapis.com"
  4. Clique em Executar consulta.

Os registros de auditoria capturam o uso da API Vertex AI, mas não permitem observar dados relacionados a cargas de trabalho, como comandos ou detalhes de respostas.

14. (Opcional) Aumentar a capacidade de observação da sua carga de trabalho de IA

Os registros de auditoria não capturam informações relacionadas à carga de trabalho. Para aumentar a capacidade de observação das suas cargas de trabalho, é necessário registrar essas informações explicitamente. Você pode usar sua estrutura de geração de registros favorita para fazer isso. As etapas a seguir demonstram como fazer isso usando o mecanismo de geração de registros nativo do Node.js.

  1. Reabra server.ts no editor do Cloud Shell.
    cloudshell edit ~/codelab-genai/server.ts
  2. Depois da chamada para await generativeModel.generateContent(prompt) (linha 19), adicione a seguinte linha:
    console.log(JSON.stringify({
    severity: 'DEBUG',
    message: 'Content is generated',
    prompt: prompt,
    response: resp.response,
}));
    Esse código grava informações de stdout sobre o conteúdo gerado usando o formato de geração de registros estruturada. Um agente do Logging no Cloud Run captura a saída impressa em stdout e grava esse formato no Cloud Logging.
  3. Reabra o Cloud Shell e digite o seguinte comando para garantir que você esteja no diretório correto:
    cd ~/codelab-genai
  4. Confirme as alterações:
    git commit -am "observe generated content"
  5. Envie as mudanças para o GitHub para acionar a nova implantação da versão modificada:
    git push

Depois que a nova versão for implantada, você poderá observar as informações de depuração sobre as chamadas para a Vertex AI.

Para conferir os registros do aplicativo, faça o seguinte:

  1. No console do Google Cloud, acesse a página Explorador de registros:

  2. Na janela de consulta, digite:
    LOG_ID("run.googleapis.com%2Fstdout")
severity=DEBUG
  3. Clique em Executar consulta.

O resultado da consulta mostra registros com a solicitação e a resposta da Vertex AI, incluindo "classificações de segurança" que podem ser usadas para monitorar práticas de segurança.

15. (Opcional) Limpar

O Cloud Run não gera custos quando o serviço não está em uso, mas você ainda pode receber cobranças pelo armazenamento da imagem do contêiner no Artifact Registry. Você pode excluir seu projeto do Cloud para evitar cobranças. A exclusão do projeto do Cloud interrompe o faturamento de todos os recursos usados nele.

Se quiser, exclua o projeto:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

Você também pode excluir recursos desnecessários do disco do Cloud Shell. Você pode:

  1. Exclua o diretório do projeto do codelab: 
    rm -rf ~/codelab-genai
  2. Aviso: Essa ação não pode ser desfeita. Se você quiser excluir tudo no Cloud Shell para liberar espaço, exclua todo o diretório principal. Tenha cuidado para que tudo o que você quer manter seja salvo em outro lugar. 
    sudo rm -rf $HOME

16. Parabéns

Neste laboratório, você escreveu um aplicativo da Web e configurou o Cloud Run para implantar automaticamente o aplicativo quando uma mudança fosse feita no código-fonte. Em seguida, você modificou e implantou o aplicativo novamente.

Se você gostou deste laboratório, tente de novo em outra linguagem de programação ou framework:

Se você quiser participar de um estudo de pesquisa de experiência do usuário (UX) para melhorar os produtos com que trabalhou hoje, inscreva-se aqui.

Confira algumas opções para continuar aprendendo: