O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Criar e verificar um modelo

Este guia de início rápido ajuda você a criar e implantar um modelo de aplicativo da Web de três camadas que inclui componentes de front-end, back-end e banco de dados. A imagem a seguir mostra a tela de design, que inclui os componentes e as conexões do aplicativo.

Um aplicativo da Web de três camadas na tela de design. O aplicativo inclui componentes de front-end, back-end e banco de dados.

Você cria o modelo usando uma das seguintes opções:

A tela de design no App Design Center.
Comandos em linguagem natural no Gemini Cloud Assist.
App Design Center Google Cloud CLI.

Depois de concluir o design, verifique o modelo implantando um aplicativo de teste no App Design Center.

Antes de começar

Configure o App Design Center.
Crie um projeto de implantação na pasta habilitada para apps.

Você vai implantar recursos Google Cloud nesse projeto ao implantar o aplicativo.
Verifique se o faturamento está ativado para o projeto de implantação.

Configurar ferramentas

Você pode usar uma das seguintes opções para concluir este guia de início rápido.

Use a tela de design no console do Google Cloud .
Para usar o Gemini Cloud Assist e criar seu design, consulte Configurar o Gemini Cloud Assist.

Instale a CLI do Google Cloud.

Observação:se você já instalou a CLI gcloud, execute o comando gcloud components update para verificar se tem a versão mais recente.
Configure a CLI gcloud para usar sua identidade federada.

Para mais informações, consulte Fazer login na CLI gcloud com sua identidade federada.
Para inicializar a CLI gcloud, execute o seguinte comando:
```
gcloud init
```

Verifique se você tem os papéis necessários

Antes de começar o guia de início rápido, peça ao administrador para conceder a você os papéis necessários para projetar, criar e implantar, conforme listado na tabela a seguir:

Tarefa	Funções exigidas
Criar, projetar e editar modelos padrão	Administrador do App Design Center (`roles/designcenter.admin`) ou usuário do App Design Center (`roles/designcenter.user`)
Implantar aplicativos e configurações	Administrador de aplicativos (`roles/designcenter.applicationAdmin`) ou Editor de aplicativos (`roles/designcenter.applicationEditor`)
Criar contas de serviço durante a implantação	Crie contas de serviço (`roles/iam.serviceAccountCreator`) no projeto de gerenciamento.
Conceder acesso de conta de serviço a um projeto de implantação	Administrador do IAM do projeto (`roles/resourcemanager.projectIamAdmin`) no projeto de implantação

Para mais informações sobre papéis, consulte Controle de acesso com o IAM.

Criar um modelo e adicionar detalhes

Tela de design

No console do Google Cloud , acesse a página Modelos.

Acessar "Modelos"
Clique em Criar modelo e insira os seguintes detalhes:
1. Preencha o campo Código do modelo com quickstart-three-tier-web-app.
2. No campo Nome do modelo, insira Quickstart three-tier web app.
3. No campo Descrição, use A template to generate a three-tier web application.
4. Clique em Criar modelo.
O modelo é criado e a tela de design é exibida.
Na área Componentes, clique nos seguintes componentes para adicioná-los à tela de design:
- Cloud Run (adicione dois componentes)
- Cloud SQL (PostgreSQL)
Para criar conexões entre componentes, faça o seguinte:
1. Do ponto azul na parte de baixo de cloud-run-1, arraste até o ponto azul na parte de cima de cloud-run-2.
2. Do ponto azul na parte de baixo de cloud-run-2, arraste até o ponto azul na parte de cima de sql-postgresql-1.
O modelo tem três componentes. A tela mostra linhas entre os componentes para representar conexões.

Gemini Cloud Assist

Na barra de ferramentas do console do Google Cloud , clique no brilho e em Abrir ou fechar o chat do Gemini Cloud Assist.

O painel do Cloud Assist é aberto.
No chat do Gemini Cloud Assist, insira o seguinte comando:
```
I want to create a three-tier web application.
```
O Gemini Cloud Assist gera um design básico para um aplicativo da Web de três níveis.
Para remover os balanceadores de carga e os componentes do Secret Manager, insira o seguinte comando:
```
I don't need load balancers or Secret Manager.
```
O Gemini Cloud Assist atualiza o design para remover os componentes.
Revise o design atualizado que inclui os seguintes componentes:
- Cloud Run (dois componentes)
- Cloud SQL para PostgreSQL
Clique em Editar design do app.

A página Criar um novo modelo é exibida.
Insira os seguintes detalhes do modelo:
1. Preencha o campo Código do modelo com quickstart-three-tier-web-app.
2. No campo Nome do modelo, insira Quickstart three-tier web app.
3. No campo Descrição, use A template to generate a three-tier web application.
Clique em Criar modelo.

O sistema cria um modelo e mostra a tela de design.

CLI da gcloud

Crie um modelo de aplicativo.

gcloud design-center spaces application-templates create quickstart-three-tier-web-app \
--display-name="Quickstart three-tier web app" \
--description="A template to generate a three-tier web application" \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID

Liste os modelos compartilhados no catálogo do Google.
```
gcloud design-center spaces shared-templates list \
--google-catalog \
--location=us-central1
```
1. Identifique os IDs de modelo compartilhados para o Cloud Run e o Cloud SQL.

Adicione um componente do Cloud Run para usar como front-end.

gcloud design-center spaces application-templates components create cloud-run-1 \
--application-template=quickstart-three-tier-web-app \
--shared-template-revision-uri=google/1b5e09c8-780f-484e-b8ed-c7178f4e4342 \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID

Adicione um segundo componente do Cloud Run para usar como back-end.

gcloud design-center spaces application-templates components create cloud-run-2 \
--application-template=quickstart-three-tier-web-app \
--shared-template-revision-uri=google/1b5e09c8-780f-484e-b8ed-c7178f4e4342 \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID

Adicione um componente do Cloud SQL.

gcloud design-center spaces application-templates components create sql-postgresql-1 \
--application-template=quickstart-three-tier-web-app \
--shared-template-revision-uri=google/45be1bc2-89bc-477b-9b5d-64c41ff3b146 \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID

Conecte cloud-run-1 a cloud-run-2.

 gcloud design-center spaces application-templates components connections create frontend-to-backend \
 --application-template=quickstart-three-tier-web-app \
 --component=cloud-run-1 \
 --destination-component-uri=cloud-run-2 \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID

Conecte cloud-run-2 a sql-postgresql-1.

 gcloud design-center spaces application-templates components connections create backend-to-database \
 --application-template=quickstart-three-tier-web-app \
 --component=cloud-run-2 \
 --destination-component-uri=sql-postgresql-1 \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID

Confirme as mudanças para criar uma revisão do modelo de aplicativo.

 gcloud design-center spaces application-templates commit quickstart-three-tier-web-app \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID

Criar um rascunho de aplicativo

Tela de design

Na tela de design, clique em Configurar um app.
Clique em Criar aplicativo e siga estas etapas:
1. No campo Nome, use quickstart-three-tier-test.
2. No campo Nome de exibição, insira Quickstart three-tier test.
3. Na lista Região, selecione us-central1 (Iowa).
4. Na lista Ambiente, selecione Test.
5. Na lista Gravidade, selecione Low.
6. Na área Escopo, na lista Escopo do aplicativo, selecione Regional.
Clique em Criar aplicativo.

O sistema cria o rascunho do aplicativo.

CLI da gcloud

Identifique o URI da revisão mais recente do modelo de aplicativo.

 gcloud design-center spaces application-templates describe quickstart-three-tier-web-app \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID \
 --format='yaml(name,latestRevision)'

Crie um rascunho de aplicativo com base no modelo.

   gcloud design-center spaces applications create quickstart-three-tier-test \
   --space=SPACE \
   --location=us-central1 \
   --project=MANAGEMENT_PROJECT_ID \
   --source-application-template-revision=projects/MANAGEMENT_PROJECT_ID/locations/us-central1/spaces/SPACE/applicationTemplates/quickstart-three-tier-web-app/revisions/TEMPLATE_REVISION \
   --display-name="Quickstart three-tier test" \
   --environment-type=test \
   --criticality-type=low \
   --scope-type=regional \
   --deployment-region=us-central1

Configurar componentes

Tela de design

Na tela de design, clique em cloud-run-1 e faça o seguinte na área Configuração:
1. Na lista ID do projeto, selecione o projeto de implantação que você criou em Antes de começar. O recurso será implantado nesse projeto.
2. No campo Nome do serviço, insira frontend-service.
3. Clique em Salvar.
Na tela de design, clique em cloud-run-2 e faça o seguinte na área Configuração:
1. Na lista ID do projeto, selecione o projeto de implantação que você criou em Antes de começar. O recurso será implantado nesse projeto.
2. No campo Nome do serviço, insira backend-service.
3. Clique em Salvar.
Na tela de design, clique em sql-postgresql-1 e faça o seguinte na área Configuração:
1. Na lista ID do projeto, selecione o projeto de implantação que você criou em Antes de começar. O recurso será implantado nesse projeto.
2. No campo Nome, use database-postgresql.
3. Na lista Versão do banco de dados, selecione POSTGRES_15.
4. Na lista suspensa Zona, selecione us-central1-a.
5. Clique em Salvar.
A tela mostra uma marca de seleção verde em cada componente para indicar que você especificou os parâmetros necessários. Agora é possível implantar o rascunho do aplicativo no ambiente Test para verificação.

CLI da gcloud

Descreva o aplicativo para identificar os parâmetros de configuração necessários.

 gcloud design-center spaces applications describe quickstart-three-tier-test \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID \
 --format='yaml(name,componentParameters)'

Para cada componente, no diretório inicial, crie um arquivo JSON que contenha os valores de parâmetros obrigatórios.

Criar frontend-service.json.

 {
   "component": "projects/MANAGEMENT_PROJECT_ID/locations/us-central1/spaces/SPACE/applicationTemplates/quickstart-three-tier-web-app/components/cloud-run-1",
   "parameters": [
      {
         "key": "service_name",
         "value": "frontend-service"
      },
      {
         "key": "project_id",
         "value": "DEPLOYMENT_PROJECT_ID"
      }
   ]
 }

Criar backend-service.json.

 {
   "component": "projects/MANAGEMENT_PROJECT_ID/locations/us-central1/spaces/SPACE/applicationTemplates/quickstart-three-tier-web-app/components/cloud-run-2",
   "parameters": [
      {
         "key": "service_name",
         "value": "backend-service"
      },
      {
         "key": "project_id",
         "value": "DEPLOYMENT_PROJECT_ID"
      }
   ]
 }

Criar database-postgresql.json.

 {
   "component": "projects/MANAGEMENT_PROJECT_ID/locations/us-central1/spaces/SPACE/applicationTemplates/quickstart-three-tier-web-app/components/sql-postgresql-1",
   "parameters": [
      {
         "key": "name",
         "value": "database-postgresql"
      },
      {
         "key": "project_id",
         "value": "DEPLOYMENT_PROJECT_ID"
      },
      {
         "key": "database_version",
         "value": "POSTGRES_15"
      },
      {
         "key": "region",
         "value": "us-central1"
      },
      {
         "key": "zone",
         "value": "us-central1-a"
      }
   ]
 }

Atualize o aplicativo para configurar os parâmetros necessários.

 gcloud design-center spaces applications update quickstart-three-tier-test \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID \
 --component-parameters=./frontend-service.json \
 --component-parameters=./backend-service.json \
 --component-parameters=./database-postgresql.json

Implantar o aplicativo

Tela de design

Clique em Implantar.
Na área Selecionar uma conta de serviço, faça o seguinte:
1. Clique em Criar uma nova conta de serviço.
2. Clique em Proceed.
Clique em Implantar.

Após alguns minutos, o sistema implanta o aplicativo e cria recursos no projeto. O sistema mostra os seguintes detalhes:
- Um link para o App Hub, onde é possível conferir detalhes dos recursos implantados, incluindo links para painéis de monitoramento.
- Links para registros do Cloud Build, que podem ser usados para resolver problemas de implantação.
- Saídas como URIs de serviço são mostradas, que podem ser usadas para interagir com recursos implantados.
Para continuar este guia de início rápido, consulte Atualizar um modelo de aplicativo e reimplantar.

CLI da gcloud

Descreva o aplicativo para identificar os papéis do IAM necessários para sua conta de serviço de implantação.

 gcloud design-center spaces applications describe quickstart-three-tier-test \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID \
 --format='yaml(name,projectParameters)'

Crie uma conta de serviço para implantar o aplicativo.

 gcloud iam service-accounts create quickstart-service-account \
 --project=MANAGEMENT_PROJECT_ID \
 --display-name="Quickstart service account" \
 --description="A service account to deploy the ADC quickstart"

Adicione os papéis necessários do projeto de implantação à conta de serviço.

#!/bin/bash

PROJECT_ID="DEPLOYMENT_PROJECT_ID"
SERVICE_ACCOUNT="quickstart-service-account@MANAGEMENT_PROJECT_ID."

ROLES=(
"roles/iap.admin"
"roles/compute.networkAdmin"
"roles/compute.viewer"
"roles/run.admin"
"roles/iam.serviceAccountAdmin"
"roles/serviceusage.serviceUsageAdmin"
"roles/cloudkms.admin"
"roles/logging.logWriter"
"roles/iam.serviceAccountUser"
"roles/cloudsql.admin"
"roles/cloudkms.autokeyAdmin"
"roles/storage.admin"
"roles/serviceusage.serviceUsageViewer"
"roles/resourcemanager.projectIamAdmin"
"roles/cloudkms.cryptoKeyEncrypterDecrypter"
)

for role in "${ROLES[@]}"; do
echo "Adding role: ${role}"
gcloud projects add-iam-policy-binding "${PROJECT_ID}" \
   --member="serviceAccount:${SERVICE_ACCOUNT}" \
   --role="${role}"
echo "---"
done

echo "Finished adding roles."

Adicione os papéis necessários do projeto de gerenciamento à conta de serviço.

#!/bin/bash

PROJECT_ID="MANAGEMENT_PROJECT_ID"
SERVICE_ACCOUNT="quickstart-service-account@MANAGEMENT_PROJECT_ID."

ROLES=(
"roles/config.agent"
"roles/apphub.editor"
)

for role in "${ROLES[@]}"; do
echo "Adding role: ${role}"
gcloud projects add-iam-policy-binding "${PROJECT_ID}" \
   --member="serviceAccount:${SERVICE_ACCOUNT}" \
   --role="${role}"
echo "---"
done

echo "Finished adding roles."

Identifique o número do seu projeto de gerenciamento.

gcloud projects describe MANAGEMENT_PROJECT_ID \
--format="value(projectNumber)"

Adicione uma vinculação de política do IAM para a função roles/iam.serviceAccountUser no seu projeto de gerenciamento.

gcloud iam service-accounts add-iam-policy-binding projects/MANAGEMENT_PROJECT_ID/serviceAccounts/quickstart-service-account@MANAGEMENT_PROJECT_ID. \
--project=MANAGEMENT_PROJECT_ID \
--member="serviceAccount:service-MANAGEMENT_PROJECT_NUMBER@gcp-sa-designcenter." \
--role="roles/iam.serviceAccountUser"

Atualize o aplicativo para usar sua conta de serviço.

gcloud design-center spaces applications update quickstart-three-tier-test \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID \
--service-account=projects/MANAGEMENT_PROJECT_ID/serviceAccounts/quickstart-service-account@MANAGEMENT_PROJECT_ID.

Conceda ao usuário a permissão actAs na conta de serviço.

gcloud iam service-accounts add-iam-policy-binding quickstart-service-account@MANAGEMENT_PROJECT_ID. \
--project=MANAGEMENT_PROJECT_ID \
--member="user:USER" \
--role="roles/iam.serviceAccountUser"

USER é seu usuário Google Cloud . Por exemplo, dana@example.com.

Visualize o aplicativo:

A geração da prévia leva alguns minutos.

gcloud design-center spaces applications preview quickstart-three-tier-test \
--location=us-central1 \
--space=SPACE \
--project=MANAGEMENT_PROJECT_ID

Implante o aplicativo.

gcloud design-center spaces applications deploy quickstart-three-tier-test \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID \
--async

Identifique o ID da operação.

A implantação leva alguns minutos para ser concluída. Acompanhe o status da implantação.

gcloud design-center operations describe operation-OPERATION_ID \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID

Quando a implantação for concluída, identifique os parâmetros de saída do aplicativo.

 gcloud design-center spaces applications describe quickstart-three-tier-test \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID \
 --format='yaml(name,appParameters,componentParameters,deploymentMetadata,deploymentRevision,previewReference)'

Opcional: monitorar a implantação

Depois de implantar um aplicativo, use o Application Monitoring para ver a telemetria do aplicativo e monitorar a integridade e o desempenho:

No console do Google Cloud , acesse a página Monitoramento de aplicativos:
Acessar Monitoramento de aplicativos

Se você usar a barra de pesquisa para encontrar essa página, selecione o resultado com o subtítulo Monitoring.
No seletor de projetos do console Google Cloud , selecione o projeto de gerenciamento.
Para instruções detalhadas sobre como usar os painéis predefinidos e analisar seus dados de telemetria, consulte Ver telemetria de aplicativos.

Você também pode acessar mais informações sobre integridade e desempenho no Cloud Hub, incluindo falhas de implantação e implantações que podem ser atualizadas, informações sobre incidentes que afetam seus aplicativos e serviços que estão perto dos limites de cota. Google Cloud

Limpar

Para evitar cobranças na conta do Google Cloud pelos recursos usados nesta página, exclua o projeto do Google Cloud e os recursos.

Excluir o aplicativo implantado

No menu de navegação, clique em Aplicativos.

Acesse Aplicativos
Na tabela, clique em Guia de início rápido do app da Web de três níveis.
Clique em Ações e selecione Excluir aplicativo.
No campo Excluir, insira Quickstart three-tier web app.
Clique em Excluir.

O sistema exclui o aplicativo, incluindo:

Os detalhes do aplicativo são removidos do App Design Center.
O aplicativo do App Hub subjacente é excluído.
Os recursos subjacentes são excluídos.

Excluir o projeto

Para excluir o projeto de implantação que você criou em Antes de começar, faça o seguinte:

No console Google Cloud , acesse a página Gerenciar recursos.
Acessar "Gerenciar recursos"
Na lista de projetos, selecione o projeto que você quer excluir e clique em Excluir.
No prompt, digite o ID do projeto e clique em Encerrar.

A seguir

Saiba como modificar sua arquitetura atualizando um modelo e reimplantando.
Revise os principais conceitos e benefícios com a visão geral do App Design Center.
Crie modelos usando linguagem natural com a ajuda do Gemini.
Duplique e personalize as arquiteturas de modelo em Início rápido: personalizar e implantar um modelo do Google.
Defina suas próprias configurações criando modelos de aplicativos.