Crea e verifica un modello

Questa guida rapida ti aiuta a creare e implementare un modello di applicazione web a tre livelli che include componenti frontend, backend e database. L'immagine seguente mostra il canvas di progettazione, che include i componenti e le connessioni dell'applicazione.

Un'applicazione web a tre livelli nel canvas di progettazione. L'applicazione include componenti frontend, backend e database.

Progetta il modello utilizzando uno dei seguenti elementi:

Dopo aver completato la progettazione, verifica il modello eseguendo il deployment di un'applicazione di test in App Design Center.


Per seguire le indicazioni dettagliate per questa attività direttamente nella console Google Cloud , fai clic su Procedura guidata:

Procedura guidata


Prima di iniziare

  1. Configura App Design Center.

  2. Crea un progetto discendente nella cartella app.

    Quando esegui il deployment dell'applicazione, esegui il deployment delle risorse Google Cloud in questo progetto.

  3. Verifica che la fatturazione sia attivata per il tuo progetto discendente.

Configurare gli strumenti

Per completare questa guida rapida, puoi utilizzare uno dei seguenti strumenti.

  • Utilizza il canvas di progettazione nella console Google Cloud .

  • Per utilizzare Gemini Cloud Assist per creare il tuo progetto, 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.

  • Se utilizzi un provider di identità (IdP) esterno, devi prima accedere a gcloud CLI con la tua identità federata.

  • Per inizializzare gcloud CLI, esegui questo comando:

    gcloud init
  • Install the Google Cloud CLI.

  • Se utilizzi un provider di identità (IdP) esterno, devi prima accedere a gcloud CLI con la tua identità federata.

  • Per inizializzare gcloud CLI, esegui questo comando:

    gcloud init
  • Assicurati di disporre dei ruoli richiesti

    1. Per creare i modelli, assicurati di disporre di uno dei seguenti ruoli nel progetto di gestione:

    2. Per eseguire il deployment delle applicazioni, assicurati di disporre di uno dei seguenti ruoli nel progetto di gestione:

    3. Per creare un service account durante il deployment, assicurati di disporre dei seguenti ruoli:

      • Per creare service account, devi disporre del ruolo Creazione service account(roles/iam.serviceAccountCreator) nel progetto di gestione.

      • Per concedere a un service account l'accesso al progetto discendente, devi disporre del ruolo Project IAM Admin (roles/resourcemanager.projectIamAdmin) sul progetto discendente.

    Crea un nuovo modello e aggiungi i dettagli

    Canvas di progettazione

    1. Nella console Google Cloud , vai alla pagina Modelli.

      Vai ai Modelli

    2. Fai clic su Crea modello e inserisci i seguenti dettagli:

      1. Nel campo ID modello, inserisci quickstart-three-tier-web-app.

      2. Nel campo Nome modello, inserisci Quickstart three-tier web app .

      3. Nel campo Descrizione, inserisci A template to generate a three-tier web application.

      4. Fai clic su Crea modello.

      Il modello viene creato e viene visualizzata l'area di progettazione.

    3. Nell'area Componenti, fai clic sui seguenti componenti per aggiungerli al canvas di progettazione:

      • Cloud Run (aggiungi due componenti)
      • Cloud SQL (PostgreSQL)
    4. Per creare connessioni tra i componenti:

      1. Dal punto blu nella parte inferiore di cloud-run-1, trascina fino al punto blu nella parte superiore di cloud-run-2.

      2. Trascina il punto blu nella parte inferiore di cloud-run-2 al punto blu nella parte superiore di sql-postgresql-1.

      Il modello contiene tre componenti. La tela viene visualizzata tra i componenti per rappresentare le connessioni.

    Gemini Cloud Assist

    1. Nella barra degli strumenti della console Google Cloud , fai clic su stella Apri o chiudi la chat di Gemini Cloud Assist.

      Si apre il riquadro Cloud Assist.

    2. Nella chat di Gemini Cloud Assist, inserisci il seguente prompt:

      I want to create a three-tier web application.
      

      Gemini Cloud Assist genera un progetto di base per un'applicazione web a tre livelli.

    3. Per rimuovere i bilanciatori del carico e i componenti di Secret Manager, inserisci il seguente prompt:

      I don't need load balancers or Secret Manager.
      

      Gemini Cloud Assist aggiorna il progetto per rimuovere i componenti.

    4. Esamina il design aggiornato che include i seguenti componenti:

      • Cloud Run (due componenti)
      • Cloud SQL per PostgreSQL
    5. Fai clic su Modifica design dell'app.

      Viene visualizzata la pagina Crea un nuovo modello.

    6. Inserisci i seguenti dettagli del modello:

      1. Nel campo ID modello, inserisci quickstart-three-tier-web-app.

      2. Nel campo Nome modello, inserisci Quickstart three-tier web app .

      3. Nel campo Descrizione, inserisci A template to generate a three-tier web application.

    7. Fai clic su Crea modello.

      Il sistema crea un nuovo modello e visualizza il canvas di progettazione.

    Interfaccia a riga di comando gcloud

    1. Crea un modello di applicazione.

      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. Elenca i modelli condivisi nel catalogo Google.

      gcloud design-center spaces shared-templates list \
      --google-catalog \
      --location=us-central1
      
      1. Identifica gli ID modello condivisi per Cloud Run e Cloud SQL.
    3. Aggiungi un componente Cloud Run da utilizzare come 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. Aggiungi un secondo componente Cloud Run da utilizzare come 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. Aggiungi un componente 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. Connetti 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. Connetti 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. Esegui il commit delle modifiche per creare una revisione del modello di applicazione.

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

    Creare una bozza di richiesta

    Canvas di progettazione

    1. Nell'area di progettazione, fai clic su Configura un'app.

    2. Fai clic su Crea nuova applicazione e procedi nel seguente modo:

      1. Nel campo Nome, inserisci quickstart-three-tier-test.

      2. Nel campo Nome visualizzato, inserisci Quickstart three-tier test.

      3. Nell'elenco Regione, seleziona us-central1 (Iowa).

      4. Nell'elenco Ambiente, seleziona Test.

      5. Nell'elenco Criticalità, seleziona Low.

      6. Nell'area Ambito, seleziona Regional dall'elenco Ambito applicazione.

    3. Fai clic su Crea applicazione.

      Il sistema crea la bozza di richiesta.

    Interfaccia a riga di comando gcloud

    1. Identifica l'URI dell'ultima revisione del template di applicazione.

       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 una bozza di richiesta basata sul modello.

         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
      

    Configurare i componenti

    Canvas di progettazione

    1. Nel canvas di progettazione, fai clic su cloud-run-1 e segui questi passaggi nell'area Configurazione:

      1. Dall'elenco ID progetto, seleziona il progetto discendente creato in Prima di iniziare. La risorsa verrà sottoposta a deployment in questo progetto.

      2. Nel campo Nome servizio, inserisci frontend-service.

      3. Fai clic su Salva.

    2. Nel canvas di progettazione, fai clic su cloud-run-2 e segui questi passaggi nell'area Configurazione:

      1. Dall'elenco ID progetto, seleziona il progetto discendente creato in Prima di iniziare. La risorsa verrà sottoposta a deployment in questo progetto.

      2. Nel campo Nome servizio, inserisci backend-service.

      3. Fai clic su Salva.

    3. Nel canvas di progettazione, fai clic su sql-postgresql-1 e segui questi passaggi nell'area Configurazione:

      1. Dall'elenco ID progetto, seleziona il progetto discendente creato in Prima di iniziare. La risorsa verrà sottoposta a deployment in questo progetto.

      2. Nel campo Nome, inserisci database-postgresql.

      3. Nell'elenco Versione database, seleziona POSTGRES_15.

      4. Dall'elenco a discesa Zona, seleziona us-central1-a.

      5. Fai clic su Salva.

      Il canvas mostra un segno di spunta verde in ogni componente per indicare che hai specificato i parametri richiesti. Ora puoi eseguire il deployment della bozza dell'applicazione nell'ambiente Test per la verifica.

    Interfaccia a riga di comando gcloud

    1. Descrivi l'applicazione per identificare i parametri di configurazione richiesti.

       gcloud design-center spaces applications describe quickstart-three-tier-test \
       --space=SPACE \
       --location=us-central1 \
       --project=MANAGEMENT_PROJECT_ID \
       --format='yaml(name,componentParameters)'
      
    2. Per ogni componente, nella tua directory home, crea un file JSON che contenga i valori dei parametri obbligatori.

      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. Aggiorna l'applicazione per configurare i parametri richiesti.

       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
      

    Esegui il deployment dell'applicazione

    Canvas di progettazione

    1. Fai clic su Esegui il deployment.

    2. Nell'area Seleziona un service account:

      1. Fai clic su Crea un nuovo service account.

      2. Fai clic su Procedi.

    3. Fai clic su Esegui il deployment.

      Dopo alcuni minuti, il sistema esegue il deployment dell'applicazione e crea risorse nel tuo progetto. Il sistema mostra i seguenti dettagli:

      • Un link ad App Hub, dove puoi visualizzare i dettagli delle risorse di cui è stato eseguito il deployment, inclusi i link alle dashboard di monitoraggio.
      • Link ai log di Cloud Build, che puoi utilizzare per risolvere gli errori di deployment.
      • Vengono visualizzati output come gli URI del servizio, che puoi utilizzare per interagire con le risorse di cui è stato eseguito il deployment.
    4. Per continuare a utilizzare questa guida rapida, consulta Aggiornare un modello di applicazione ed eseguire nuovamente il deployment.

    Interfaccia a riga di comando gcloud

    1. Descrivi l'applicazione per identificare i ruoli IAM richiesti per il account di servizio di deployment.

       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 un nuovo account di servizio per eseguire il deployment dell'applicazione.

       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. Aggiungi i ruoli del progetto di deployment richiesti al account di servizio.

      #!/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. Aggiungi i ruoli di progetto di gestione richiesti all'account di servizio.

      #!/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 il numero del progetto di gestione.

      gcloud projects describe MANAGEMENT_PROJECT_ID \
      --format="value(projectNumber)"
      
    6. Aggiungi un'associazione di policy IAM per il ruolo roles/iam.serviceAccountUser nel progetto di gestione.

      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:service-MANAGEMENT_PROJECT_NUMBER@gcp-sa-designcenter.iam.gserviceaccount.com" \
      --role="roles/iam.serviceAccountUser"
      
    7. Aggiorna l'applicazione per utilizzare il account di servizio.

      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. Concedi all'utente l'autorizzazione actAs per il account di servizio.

      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 è il tuo utente Google Cloud . Ad esempio dana@example.com.

    9. Visualizza l'anteprima dell'applicazione:

      La generazione dell'anteprima richiede alcuni minuti.

      gcloud design-center spaces applications preview quickstart-three-tier-test \
      --location=us-central1 \
      --space=SPACE \
      --project=MANAGEMENT_PROJECT_ID
      
    10. Esegui il deployment dell'applicazione.

      gcloud design-center spaces applications deploy quickstart-three-tier-test \
      --space=SPACE \
      --location=us-central1 \
      --project=MANAGEMENT_PROJECT_ID \
      --async
      
    11. Identifica l'ID operazione.

    12. Il completamento del deployment richiede alcuni minuti. Monitora lo stato del deployment.

      gcloud design-center operations describe operation-OPERATION_ID \
      --space=SPACE \
      --location=us-central1 \
      --project=MANAGEMENT_PROJECT_ID
      
    13. Al termine del deployment, identifica i parametri di output dell'applicazione.

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

    (Facoltativo) Monitorare l'implementazione

    Dopo aver eseguito il deployment di un'applicazione, puoi utilizzare Application Monitoring per visualizzare la telemetria dell'applicazione e monitorare integrità e prestazioni:

    1. Nella console Google Cloud , vai alla pagina Monitoraggio delle applicazioni:

      Vai a Application Monitoring

      Se utilizzi la barra di ricerca per trovare questa pagina, seleziona il risultato con il sottotitolo Monitoring.

    2. Nel selettore di progetti della console Google Cloud , seleziona il progetto di gestione.

    3. Per istruzioni dettagliate su come utilizzare le dashboard predefinite ed esplorare i dati di telemetria, consulta Visualizzare la telemetria delle applicazioni.

    Puoi anche ottenere ulteriori informazioni su salute e prestazioni in Cloud Hub, inclusi errori di deployment e deployment che possono essere aggiornati, informazioni sugli incidenti che influiscono sulle tue applicazioni e sui servizi che si avvicinano ai limiti di quota. Google Cloud

    Esegui la pulizia

    Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questa pagina, elimina il progetto Google Cloud con le risorse.

    Elimina l'applicazione di cui è stato eseguito il deployment

    1. Nel menu di navigazione, fai clic su Applicazioni.

      Vai a Applicazioni

    2. Nella tabella, fai clic su Quickstart three-tier web app (App web a tre livelli di avvio) rapido.

    3. Fai clic su Azioni e seleziona Elimina applicazione.

    4. Nel campo Elimina, inserisci Quickstart three-tier web app.

    5. Fai clic su Elimina.

    Il sistema elimina l'applicazione, inclusi:

    • I dettagli dell'applicazione vengono rimossi da App Design Center.
    • L'applicazione App Hub sottostante viene eliminata.
    • Le risorse sottostanti vengono eliminate.

    (Facoltativo) Elimina il progetto

    Per eliminare il progetto discendente che hai creato in Prima di iniziare:

    1. Nella console Google Cloud , vai alla pagina Gestisci risorse.

      Vai a Gestisci risorse

    2. Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare, quindi fai clic su Elimina.
    3. Al prompt, digita l'ID progetto e fai clic su Chiudi.

    Passaggi successivi