Esercitazione - Aggiungere una connessione al database PostgreSQL in App Web statiche di Azure (anteprima)

In questa esercitazione si apprenderà come connettere un database di server singolo o flessibile di Database di Azure per PostgreSQL all'app Web statica. Dopo la configurazione, è possibile effettuare richieste REST o GraphQL all'endpoint predefinito /data-api per manipolare i dati senza la necessità di scrivere codice back-end.

Per semplicità, questa esercitazione illustra come usare un database di Azure a scopo di sviluppo locale, ma è anche possibile usare un server di database locale per le esigenze di sviluppo locali.

In questa esercitazione si apprenderà come:

Prerequisiti

Per completare questa esercitazione, è necessario disporre di un server flessibile o singolo di Database di Azure per PostgreSQL esistente e di un'app Web statica. È anche necessario installare Visual Studio Code.

Per iniziare, configurare il database in modo che si possa usare con la funzionalità di connessione al database di App Web statiche di Azure.

Configurare la conettività del database

App Web statiche di Azure deve disporre dell'accesso di rete al database per consentire il funzionamento delle connessioni al database. Per usare un database di Azure per lo sviluppo locale, è inoltre necessario configurare il database in modo da consentire le richieste provenienti dal proprio indirizzo IP.

1. Andare al server di Database di Azure per PostgreSQL nel portale di Azure.

2. Se si usa il server flessibile di Database di Azure per PostgreSQL, nella sezione Impostazioni selezionare Rete. Se si usa il server singolo di Database di Azure per PostgreSQL, nella sezione Impostazioni selezionare Sicurezza connessione.

3. Nella sezione Regole del firewall selezionare il pulsante Aggiungi l'indirizzo IP cliente corrente. Questo passaggio garantisce che sia possibile usare il database per lo sviluppo locale.

4. Nella sezione Regole del firewall selezionare la casella di controllo Consenti l'accesso pubblico da qualsiasi servizio di Azure all'interno di Azure a questo server. Se si usa il server singolo di Database di Azure per PostgreSQL, questa opzione è contrassegnata con l'etichetta Consenti l'accesso ai servizi di Azure. Questo passaggio garantisce che la risorsa App Web statiche distribuita possa accedere al database.

5. Selezionare Salva.

Ottenere la stringa di connessione al database per lo sviluppo locale

Per usare il database di Azure per lo sviluppo locale, è necessario recuperare la stringa di connessione del database. È possibile ignorare questo passaggio se si prevede di usare un database locale a scopo di sviluppo.

1. Andare al server di Database di Azure per PostgreSQL nel portale di Azure.

2. Nella sezione Impostazioni selezionare Stringhe di connessione.

3. Nella casella ADO.NET copiare la stringa di connessione e salvarla in un editor di testo.

4. Sostituire il segnaposto {your_password} nella stringa di connessione con la propria password.

5. Sostituire il segnaposto {your_database} con il nome del database MyTestPersonDatabase. Il database MyTestPersonDatabase verrà creato nei passaggi successivi.

6. Aggiungere Trust Server Certificate=True; alla stringa di connessione in modo da usarla per lo sviluppo locale.

Creare dati di esempio

Creare una tabella di esempio e popolarla con i dati di esempio in modo che corrispondano all'esercitazione. Questa esercitazione usa Visual Studio Code, ma è possibile usare PgAdmin o qualsiasi altro strumento.

1. In Visual Studio Code crea una connessione al Database di Azure per il server PostgreSQL

2. Fare clic con il pulsante destro del mouse sul server, quindi selezionare Nuova query. Eseguire la query seguente per creare un database denominato MyTestPersonDatabase.

   CREATE DATABASE "MyTestPersonDatabase";
   

3. Fare clic con il pulsante destro del mouse sul server, quindi scegliere Aggiorna.

4. Fare clic con il pulsante destro del mouse su MyTestPersonDatabase, quindi selezionare Nuova query. Eseguire la query seguente per creare una nuova tabella denominata MyTestPersonTable.

   CREATE TABLE "MyTestPersonTable" (
       "Id" SERIAL PRIMARY KEY,
       "Name" VARCHAR(25) NULL
   );
   

5. Eseguire le query seguenti per aggiungere dati nella tabella MyTestPersonTable .

   INSERT INTO "MyTestPersonTable" ("Name")
   VALUES ('Sunny');
   
   INSERT INTO "MyTestPersonTable" ("Name")
   VALUES ('Dheeraj');
   

Configurare l'app Web statica

La parte restante di questa esercitazione è incentrata sulla modifica del codice sorgente dell'app Web statica per l'uso delle connessioni al database in locale.

1. Passare al ramo main.

   • Bash
   • PowerShell

   git checkout main
   

2. Sincronizzare la versione locale con gli elementi in GitHub usando git pull.

   • Bash
   • PowerShell

   git pull origin main
   

Creare il file di configurazione del database

Creare quindi il file di configurazione usato dall'app Web statica per interagire con il database.

1. Aprire il terminale e creare una nuova variabile per contenere la stringa di connessione. La sintassi specifica può variare a seconda del tipo di shell in uso.

   • Bash
   • PowerShell

   export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   Sostituire <YOUR_CONNECTION_STRING> con il valore della stringa di connessione impostato in un editor di testo.

2. Usare npm per installare o aggiornare l'interfaccia della riga di comando di App Web statiche. Selezionare il comando più adatto per la situazione.

   Per l'installazione, usare npm install.

   npm install -g @azure/static-web-apps-cli
   

   npm install -g @azure/static-web-apps-cli
   

   Per l'aggiornamento, usare npm update.

   npm update
   

   npm update
   

3. Usare il comando swa db init per generare un file di configurazione del database.

   • Bash
   • PowerShell

   swa db init --database-type postgresql
   

   Il comando init crea il file staticwebapp.database.config.json nella cartella swa-db-connections.

4. Incollare questo esempio nel file staticwebapp.database.config.json generato.

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "postgresql",
    "options": {
      "set-session-context": false 
    },
    "connection-string": "@env('DATABASE_CONNECTION_STRING')"
  },
  "runtime": {
    "rest": {
      "enabled": true,
      "path": "/rest"
    },
    "graphql": {
      "allow-introspection": true,
      "enabled": true,
      "path": "/graphql"
    },
    "host": {
      "mode": "production",
      "cors": {
        "origins": ["http://localhost:4280"],
        "allow-credentials": false
      },
      "authentication": {
        "provider": "StaticWebApps"
      }
    }
  },
  "entities": {
    "Person": {
      "source": "MyTestPersonTable",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

Prima di andare al passaggio successivo, esaminare la tabella seguente che illustra i diversi aspetti del file di configurazione. Per la documentazione completa sul file di configurazione e sulle funzionalità, ad esempio relazioni e criteri per la sicurezza a livello di elemento, vedere la documentazione del generatore di API dati.

Dopo aver configurato l'app Web statica per connettersi al database, è ora possibile verificare la connessione.

Aggiornare la home page

Sostituire il markup tra i tag body nel file index.html con il codice HTML seguente.

<h1>Static Web Apps Database Connections</h1>
<blockquote>
    Open the console in the browser developer tools to see the API responses.
</blockquote>
<div>
    <button id="list" onclick="list()">List</button>
    <button id="get" onclick="get()">Get</button>
    <button id="update" onclick="update()">Update</button>
    <button id="create" onclick="create()">Create</button>
    <button id="delete" onclick="del()">Delete</button>
</div>
<script>
    // add JavaScript here
</script>

Avviare l'applicazione in locale

È ora possibile eseguire il sito Web e manipolare direttamente i dati nel database.

1. Avviare l'app Web statica con la configurazione del database.

   swa start --data-api-location swa-db-connections
   

Ora che l'interfaccia della riga di comando è stata avviata, è possibile accedere al database tramite gli endpoint definiti nel file staticwebapp.database.config.json.

Manipolare i dati

I comandi indipendenti dal framework seguenti illustrano come eseguire operazioni CRUD complete nel database.

L'output per ogni funzione viene visualizzato nella finestra della console del browser.

Premere CMD/CTRL + SHIFT + I per aprire gli strumenti di sviluppo, quindi selezionare la scheda Console.

Elencare tutti gli elementi

Aggiungere il codice seguente tra i tag script in index.html.

async function list() {
  const endpoint = '/data-api/rest/Person';
  const response = await fetch(endpoint);
  const data = await response.json();
  console.table(data.value);
}

async function list() {

  const query = `
      {
        people {
          items {
            Id
            Name
          }
        }
      }`;

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query: query })
  });
  const result = await response.json();
  console.table(result.data.people.items);
}

Aggiornare la pagina e selezionare il pulsante Elenca .

La finestra della console del browser visualizza ora una tabella che elenca tutti i record nel database.

Ecco uno screenshot di cosa dovrebbe apparire nel browser.

Recuperare per ID

Aggiungere il codice seguente tra i tag script in index.html.

async function get() {
  const id = 1;
  const endpoint = `/data-api/rest/Person/Id`;
  const response = await fetch(`${endpoint}/${id}`);
  const result = await response.json();
  console.table(result.value);
}

async function get() {

  const id = 1;

  const gql = `
    query getById($id: Int!) {
      person_by_pk(Id: $id) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
    },
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query),
  });
  const result = await response.json();
  console.table(result.data.person_by_pk);
}

Aggiornare la pagina e selezionare il pulsante Ottieni .

La finestra della console del browser visualizza ora una tabella che elenca il singolo record richiesto dal database.

Aggiornamento

Aggiungere il codice seguente tra i tag script in index.html.

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const gql = `
    mutation update($id: Int!, $item: UpdatePersonInput!) {
      updatePerson(Id: $id, item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const res = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await res.json();
  console.table(result.data.updatePerson);
}

Aggiornare la pagina e selezionare il pulsante Aggiorna .

La finestra della console del browser visualizza ora una tabella che mostra i dati aggiornati.

Create

Aggiungere il codice seguente tra i tag script in index.html.

async function create() {

  const data = {
    Name: "Pedro"
  };

  const endpoint = `/data-api/rest/Person/`;
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

async function create() {

  const data = {
    Name: "Pedro"
  };

  const gql = `
    mutation create($item: CreatePersonInput!) {
      createPerson(item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const result = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const response = await result.json();
  console.table(response.data.createPerson);
}

Aggiornare la pagina e selezionare il pulsante Crea .

La finestra della console del browser visualizza ora una tabella che mostra il nuovo record nel database.

Delete

Aggiungere il codice seguente tra i tag script in index.html.

async function del() {
  const id = 3;
  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "DELETE"
  });
  if(response.ok) {
    console.log(`Record deleted: ${ id }`)
  } else {
    console.log(response);
  }
}

async function del() {

  const id = 3;

  const gql = `
    mutation del($id: Int!) {
      deletePerson(Id: $id) {
        Id
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id
    }
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await response.json();
  console.log(`Record deleted: ${ result.data.deletePerson.Id }`);
}

Aggiornare la pagina e selezionare il pulsante Elimina .

La finestra della console del browser visualizza ora una tabella che mostra la risposta alla richiesta di eliminazione.

Record eliminati: 3

Dopo aver usato il sito in locale, è possibile distribuirlo in Azure.

Distribuire il sito

Per distribuire il sito nell'ambiente di produzione, è sufficiente eseguire il commit del file di configurazione e il push delle modifiche nel server.

1. Aggiungere le modifiche apportate al file per tenerne traccia.

   git add .
   

2. Eseguire il commit delle modifiche di configurazione.

   git commit -am "Add database configuration"
   

3. Eseguire il push delle modifiche nel server.

   git push origin main
   

Connettere il database all'app Web statica

Usare la procedura seguente per creare una connessione tra l'istanza di App Web statiche del sito e il database.

1. Aprire l'app Web statica nel portale di Azure.

2. Nella sezione Impostazioni selezionare Connessione database.

3. Nella sezione Produzione selezionare il collegamento Collega database esistente.

4. Nella finestra Collega database esistente immettere i valori seguenti:

   Proprietà	valore
   Tipo di database	Selezionare il tipo di database nell'elenco a discesa.
   Subscription	Selezionare la sottoscrizione di Azure nell'elenco a discesa.
   Nome risorsa	Selezionare il nome del server di database del database desiderato.
   Nome database	Selezionare il nome del database da collegare all'app Web statica.
   Tipo di autenticazione	Selezionare Stringa di connessione e immettere il nome utente e la password per PostgreSQL. Per il server singolo PostgreSQL, non includere il suffisso @servername.

5. Selezionare OK.

Verificare che il database sia connesso alla risorsa App Web statiche

Dopo aver connesso il database all'app Web statica e aver completato la compilazione del sito, seguire questa procedura per verificare la connessione al database.

1. Aprire l'app Web statica nel portale di Azure.

2. Nella sezione Informazioni di base selezionare l'URL della risorsa App Web statiche per spostarsi nell'app Web statica.

3. Selezionare il pulsante Elenca per elencare tutti gli elementi.

   L'output deve essere simile a quello mostrato in questo screenshot.

   

Pulire le risorse

Per rimuovere le risorse create durante l'esercitazione, è necessario scollegare il database e rimuovere i dati di esempio.

1. Scollega database: aprire l'app Web statica nel portale di Azure. Nella sezione Impostazioni selezionare Connessione database. Accanto al database collegato, selezionare Visualizza dettagli. Nella finestra Dettagli connessione database, selezionare il pulsante Scollega.

2. Rimuovere i dati di esempio: nel database, eliminare la tabella denominata MyTestPersonTable.

Passaggi successivi