Crea y verifica una plantilla

Crea y verifica una plantilla

En esta guía de inicio rápido, se explica cómo crear e implementar una plantilla de aplicación web de tres niveles que incluye componentes de frontend, backend y base de datos. En la siguiente imagen, se muestra el lienzo de diseño, que incluye los componentes y las conexiones de la aplicación.

Diseña la plantilla con una de las siguientes opciones:

• Es el lienzo de diseño en Application Design Center.
• Instrucciones en lenguaje natural en Gemini Cloud Assist.
• Google Cloud CLI del Centro de diseño de apps.

Después de completar el diseño, verifica la plantilla implementando una aplicación de prueba en App Design Center.

---

Para seguir la guía paso a paso sobre esta tarea directamente en la consola Google Cloud , haz clic en Guiarme:

Guiarme

---

Antes de comenzar

1. Configura App Design Center.

2. Crea un proyecto secundario en tu carpeta habilitada para apps.

   Implementarás recursos Google Cloud en este proyecto cuando implementes tu aplicación.

3. Asegúrate de tener habilitada la facturación para tu proyecto subordinado.

Configura las herramientas

Puedes usar una de las siguientes opciones para completar esta guía de inicio rápido.

• Usa el lienzo de diseño en la consola de Google Cloud .

• Para usar Gemini Cloud Assist y crear tu diseño, consulta Configura Gemini Cloud Assist.

Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

Install the Google Cloud CLI.

Nota: Si instalaste gcloud CLI anteriormente, asegúrate de tener la versión más reciente ejecutando gcloud components update.

Si usas un proveedor de identidad externo (IdP), primero debes acceder a la gcloud CLI con tu identidad federada.

Para inicializar gcloud CLI, ejecuta el siguiente comando:

gcloud init

Install the Google Cloud CLI.

Nota: Si instalaste gcloud CLI anteriormente, asegúrate de tener la versión más reciente ejecutando gcloud components update.

Si usas un proveedor de identidad externo (IdP), primero debes acceder a la gcloud CLI con tu identidad federada.

Para inicializar gcloud CLI, ejecuta el siguiente comando:

gcloud init

Asegúrate de tener los roles necesarios

1. Para crear plantillas, asegúrate de tener uno de los siguientes roles en el proyecto de administración:

   • Administrador de App Design Center (roles/designcenter.admin)
   • Usuario de App Design Center (roles/designcenter.user)

2. Para implementar aplicaciones, asegúrate de tener uno de los siguientes roles en el proyecto de administración:

   • Administrador de aplicaciones (roles/designcenter.applicationAdmin)
   • Editor de aplicaciones (roles/designcenter.applicationEditor)

3. Para crear una cuenta de servicio durante la implementación, asegúrate de tener los siguientes roles:

   • Para crear cuentas de servicio, debes tener el rol de Creador de cuentas de servicio(roles/iam.serviceAccountCreator) en el proyecto de administración.

   • Para otorgar acceso a una cuenta de servicio a tu proyecto subordinado, debes tener el rol de Administrador de IAM del proyecto (roles/resourcemanager.projectIamAdmin) en el proyecto subordinado.

Crea una plantilla nueva y agrega detalles

Lienzo de diseño

1. En la consola de Google Cloud , ve a la página Plantillas.

   Ir a Plantillas

2. Haz clic en Crear plantilla y escribe los siguientes detalles:

   1. En el campo ID de plantilla, ingresa quickstart-three-tier-web-app.

   2. En el campo Nombre de la plantilla, ingresa Quickstart three-tier web app.

   3. En el campo Descripción, ingresa A template to generate a three-tier web application.

   4. Haz clic en Crear Plantilla.

   Se creará la plantilla y se mostrará el lienzo de diseño.

3. En el área Componentes, haz clic en los siguientes componentes para agregarlos al lienzo de diseño:

   • Cloud Run (agrega dos componentes)
   • Cloud SQL (PostgreSQL)

4. Para crear conexiones entre componentes, haz lo siguiente:

   1. Desde el punto azul en la parte inferior de cloud-run-1, arrastra hasta el punto azul en la parte superior de cloud-run-2.

   2. Desde el punto azul en la parte inferior de cloud-run-2, arrastra hasta el punto azul en la parte superior de sql-postgresql-1.

   La plantilla contiene tres componentes. El lienzo muestra líneas entre los componentes para representar las conexiones.

Gemini Cloud Assist

1. En la barra de herramientas de la consola de Google Cloud , haz clic en spark Abrir o cerrar el chat de Gemini Cloud Assist.

   Se abrirá el panel de Cloud Assist.

2. En el chat de Gemini Cloud Assist, ingresa la siguiente instrucción:

   I want to create a three-tier web application.
   

   Gemini Cloud Assist genera un diseño básico para una aplicación web de tres niveles.

3. Para quitar los balanceadores de cargas y los componentes de Secret Manager, ingresa la siguiente instrucción:

   I don't need load balancers or Secret Manager.
   

   Gemini Cloud Assist actualiza el diseño para quitar los componentes.

4. Revisa el diseño actualizado que incluye los siguientes componentes:

   • Cloud Run (dos componentes)
   • Cloud SQL para PostgreSQL

5. Haz clic en Editar diseño de la app.

   Aparecerá la página Crear una plantilla nueva.

6. Ingresa los siguientes detalles de la plantilla:

   1. En el campo ID de plantilla, ingresa quickstart-three-tier-web-app.

   2. En el campo Nombre de la plantilla, ingresa Quickstart three-tier web app.

   3. En el campo Descripción, ingresa A template to generate a three-tier web application.

7. Haz clic en Crear Plantilla.

   El sistema creará una plantilla nueva y mostrará el lienzo de diseño.

gcloud CLI

1. Crea una plantilla de aplicación.

   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
   

2. Enumera las plantillas compartidas en el catálogo de Google.

   gcloud design-center spaces shared-templates list \
   --google-catalog \
   --location=us-central1
   

   1. Identifica los IDs de plantillas compartidas para Cloud Run y Cloud SQL.

3. Agrega un componente de Cloud Run para usarlo como frontend.

   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
   

4. Agrega un segundo componente de Cloud Run para usarlo como backend.

   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
   

5. Agrega un componente de 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
   

6. Conecta 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
   

7. Conecta 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
   

8. Confirma los cambios para crear una revisión de la plantilla de la aplicación.

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

Crea un borrador de la aplicación

Lienzo de diseño

1. En el lienzo de diseño, haz clic en Configurar una app.

2. Haz clic en Create nueva aplicación y haz lo siguiente:

   1. En el campo Nombre, ingresa quickstart-three-tier-test.

   2. En el campo Nombre visible, escribe Quickstart three-tier test.

   3. En la lista Región, selecciona us-central1 (Iowa).

   4. En la lista Entorno, selecciona Test.

   5. En la lista Importancia, selecciona Low.

   6. En el área Permiso, en la lista Permiso de la aplicación, selecciona Regional.

3. Haz clic en Crear aplicación.

   El sistema crea el borrador de la aplicación.

gcloud CLI

1. Identifica el URI de la revisión más reciente de la plantilla de tu aplicación.

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

2. Crea un borrador de aplicación basado en tu plantilla.

      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
   

Configura componentes

Lienzo de diseño

1. En el lienzo de diseño, haz clic en cloud-run-1 y haz lo siguiente en el área Configuración:

   1. En la lista ID del proyecto, selecciona el proyecto secundario que creaste en Antes de comenzar. El recurso se implementará en este proyecto.

   2. En el campo Nombre del servicio, ingresa frontend-service.

   3. Haz clic en Guardar.

2. En el lienzo de diseño, haz clic en cloud-run-2 y haz lo siguiente en el área Configuración:

   1. En la lista ID del proyecto, selecciona el proyecto secundario que creaste en Antes de comenzar. El recurso se implementará en este proyecto.

   2. En el campo Nombre del servicio, ingresa backend-service.

   3. Haz clic en Guardar.

3. En el lienzo de diseño, haz clic en sql-postgresql-1 y, luego, haz lo siguiente en el área Configuración:

   1. En la lista ID del proyecto, selecciona el proyecto secundario que creaste en Antes de comenzar. El recurso se implementará en este proyecto.

   2. En el campo Nombre, ingresa database-postgresql.

   3. En la lista Versión de la base de datos, selecciona POSTGRES_15.

   4. En la lista desplegable Zona, selecciona us-central1-a.

   5. Haz clic en Guardar.

   El lienzo muestra una marca de verificación verde en cada componente para indicar que especificaste los parámetros obligatorios. Ahora puedes implementar el borrador de la aplicación en el entorno de Test para su verificación.

gcloud CLI

1. Describe la aplicación para identificar los parámetros de configuración necesarios.

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

2. Para cada componente, en tu directorio principal, crea un archivo JSON que contenga los valores de parámetros obligatorios.

   1. Crea 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"
            }
         ]
       }
      

   2. Crea 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"
            }
         ]
       }
      

   3. Crea 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"
            }
         ]
       }
      

3. Actualiza la aplicación para configurar los parámetros requeridos.

    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
   

Implemente la aplicación

Lienzo de diseño

1. Haz clic en Implementar.

2. En el área Selecciona una cuenta de servicio, haz lo siguiente:

   1. Haz clic en Crear una cuenta de servicio nueva.

   2. Haz clic en Continuar.

3. Haz clic en Implementar.

   Después de unos minutos, el sistema implementa la aplicación y crea recursos en tu proyecto. El sistema muestra los siguientes detalles:

   • Un vínculo a App Hub, donde puedes ver los detalles de los recursos implementados, incluidos los vínculos a los paneles de supervisión
   • Vínculos a los registros de Cloud Build, que puedes usar para corregir errores de implementación
   • Resultados como los URIs de servicio, que puedes usar para interactuar con los recursos implementados

4. Para continuar con esta guía de inicio rápido, consulta Actualiza una plantilla de aplicación y vuelve a implementarla.

gcloud CLI

1. Describe la aplicación para identificar los roles de IAM necesarios para tu cuenta de servicio de implementación.

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

2. Crea una cuenta de servicio nueva para implementar la aplicación.

    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"
   

3. Agrega los roles necesarios del proyecto de implementación a la cuenta de servicio.

   #!/bin/bash
   
   PROJECT_ID="DEPLOYMENT_PROJECT_ID"
   SERVICE_ACCOUNT="quickstart-service-account@MANAGEMENT_PROJECT_ID.iam.gserviceaccount.com"
   
   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."
   

4. Agrega los roles necesarios del proyecto de administración a la cuenta de servicio.

   #!/bin/bash
   
   PROJECT_ID="MANAGEMENT_PROJECT_ID"
   SERVICE_ACCOUNT="quickstart-service-account@MANAGEMENT_PROJECT_ID.iam.gserviceaccount.com"
   
   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."
   

5. Identifica el número de tu proyecto de administración.

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

6. Agrega una vinculación de política de IAM para el rol roles/iam.serviceAccountUser en tu proyecto de administración.

   gcloud iam service-accounts add-iam-policy-binding projects/MANAGEMENT_PROJECT_ID/serviceAccounts/quickstart-service-account@MANAGEMENT_PROJECT_ID.iam.gserviceaccount.com \
   --project=MANAGEMENT_PROJECT_ID \
   --member="serviceAccount:[e-mail]" \
   --role="roles/iam.serviceAccountUser"
   

7. Actualiza la aplicación para que use tu cuenta de servicio.

   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.iam.gserviceaccount.com
   

8. Otorga a tu usuario permiso actAs en tu cuenta de servicio.

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

   USER es tu usuario de Google Cloud . Por ejemplo, [e-mail].

9. Obtén una vista previa de la aplicación:

   La generación de la vista previa tarda unos minutos.

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

10. Implemente la aplicación.

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

11. Identifica el ID de la operación.

12. La implementación tarda unos minutos en completarse. Haz un seguimiento del estado de la implementación.

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

13. Cuando se complete la implementación, identifica los parámetros de salida de la aplicación.

     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: Supervisa tu implementación

Después de implementar una aplicación, puedes usar Application Monitoring para ver la telemetría de la aplicación y supervisar el estado y el rendimiento:

1. En la consola de Google Cloud , ve a la página Supervisión de aplicaciones:

   Ir a Monitoring de aplicaciones

   Si usas la barra de búsqueda para encontrar esta página, selecciona el resultado cuyo subtítulo es Monitoring.

2. En el selector de proyectos de la consola de Google Cloud , selecciona el proyecto de administración.

3. Para obtener instrucciones detalladas sobre cómo usar los paneles predefinidos y explorar tus datos de telemetría, consulta Cómo ver la telemetría de la aplicación.

También puedes obtener información adicional sobre el estado y el rendimiento en Cloud Hub, incluidos los errores de implementación y las implementaciones que se pueden actualizar, información sobre los incidentes Google Cloud que afectan tus aplicaciones y los servicios que están cerca de sus límites de cuota.

Realiza una limpieza

Para evitar que se apliquen cargos a tu cuenta de Google Cloud por los recursos que usaste en esta página, borra el proyecto de Google Cloud que tiene los recursos.

Borra la aplicación implementada

1. En el menú de navegación, haz clic en Aplicaciones.

   Ir a Aplicaciones

2. En la tabla, haz clic en Implementa una app web de tres niveles.

3. Haz clic en Acciones y selecciona Borrar aplicación.

4. En el campo Borrar, ingresa Quickstart three-tier web app.

5. Haz clic en Borrar.

El sistema borra la aplicación, lo que incluye lo siguiente:

• Los detalles de la aplicación se quitan de App Design Center.
• Se borra la aplicación subyacente de App Hub.
• Se borran los recursos subyacentes.

Opcional: borra el proyecto

Para borrar el proyecto subordinado que creaste en Antes de comenzar, haz lo siguiente:

Precaución: Si borras un proyecto, todos los recursos del proyecto se borrarán de forma permanente.

1. En la Google Cloud consola, ve a la página Administrar recursos.

   Ir a Administrar recursos

2. En la lista de proyectos, elige el proyecto que quieres borrar y haz clic en Borrar.
3. Cuando se te solicite, escribe el ID del proyecto y, luego, haz clic en Cerrar.

¿Qué sigue?

• Actualiza una plantilla de aplicación y vuelve a implementarla
• Descripción general de App Design Center
• Diseña una aplicación con la asistencia de Gemini
• Aprovecha las plantillas creadas por Google
• Diseña plantillas de aplicaciones