Zelfstudie: Een PostgreSQL-databaseverbinding toevoegen in Azure Static Web Apps (preview)

In deze zelfstudie leert u hoe u een Database for PostgreSQL Single Server- of Flexible Server-database verbindt met uw statische web-app. Zodra de configuratie is uitgevoerd, kunt u REST- of GraphQL-aanvragen indienen bij het ingebouwde /data-api eindpunt om gegevens te bewerken zonder dat u back-endcode hoeft te schrijven.

In deze zelfstudie leert u hoe u een Azure-database gebruikt voor lokale ontwikkelingsdoeleinden, maar u kunt ook een lokale databaseserver gebruiken voor uw lokale ontwikkelingsbehoeften.

In deze zelfstudie leert u het volgende:

Vereisten

Als u deze zelfstudie wilt voltooien, moet u een bestaande Azure Database for PostgreSQL Flexibele server of enkele server en statische web-app hebben. Daarnaast moet u Azure Data Studio installeren.

Begin met het configureren van uw database om te werken met de azure Static Web Apps-databaseverbindingsfunctie.

Databaseconnectiviteit configureren

Azure Static Web Apps moet netwerktoegang tot uw database hebben om databaseverbindingen te laten werken. Als u een Azure-database wilt gebruiken voor lokale ontwikkeling, moet u uw database configureren om aanvragen van uw eigen IP-adres toe te staan.

1. Ga in Azure Portal naar uw Azure Database for PostgreSQL-server.

2. Als u Azure Database for PostgreSQL Flexible Server gebruikt, selecteert u Netwerken in de sectie Instellingen. Als u Azure Database for PostgreSQL Single Server gebruikt, selecteert u in de sectie Instellingen de optie Verbindingsbeveiliging.

3. Selecteer in de sectie Firewallregels de knop Uw huidige IP-adres van de client toevoegen. Deze stap zorgt ervoor dat u deze database kunt gebruiken voor uw lokale ontwikkeling.

4. Schakel in de sectie Firewallregels het selectievakje Openbare toegang vanuit elke Azure-service in Azure naar deze server toestaan in. Als u Azure Database for PostgreSQL Single Server gebruikt, heeft deze wisselknop het label Toegang tot Azure-services toestaan. Deze stap zorgt ervoor dat uw geïmplementeerde Static Web Apps-resource toegang heeft tot uw database.

5. Selecteer Opslaan.

Database-verbindingsreeks ophalen voor lokale ontwikkeling

Als u uw Azure-database wilt gebruiken voor lokale ontwikkeling, moet u de verbindingsreeks van uw database ophalen. U kunt deze stap overslaan als u van plan bent om een lokale database te gebruiken voor ontwikkelingsdoeleinden.

1. Ga in Azure Portal naar uw Azure Database for PostgreSQL-server.

2. Selecteer in de sectie Instellingen de optie Verbindingsreeksen.

3. Kopieer in het vak ADO.NET de verbindingsreeks en zet deze opzij in een teksteditor.

4. Vervang de {your_password} tijdelijke aanduiding in de verbindingsreeks door uw wachtwoord.

5. Vervang de {your_database} tijdelijke aanduiding door de databasenaam MyTestPersonDatabase. U maakt de MyTestPersonDatabase volgende stappen.

6. Voeg Trust Server Certificate=True; toe aan de verbindingsreeks om deze verbindingsreeks te gebruiken voor lokale ontwikkeling.

Voorbeeldgegevens maken

Maak een voorbeeldtabel en seed deze met voorbeeldgegevens zodat deze overeenkomt met de zelfstudie. In deze zelfstudie wordt Gebruikgemaakt van Azure Data Studio, maar u kunt PgAdmin of een ander hulpprogramma gebruiken.

1. Maak in Azure Data Studio een verbinding met uw Azure Database for PostgreSQL-server

2. Klik met de rechtermuisknop op de server en selecteer Nieuwe query. Voer de volgende query's uit om een database met de naam MyTestPersonDatabasete maken.

   CREATE DATABASE "MyTestPersonDatabase";
   

3. Klik met de rechtermuisknop op de server en selecteer Vernieuwen.

4. Klik met de rechtermuisknop op uw MyTestPersonDatabase query en selecteer Nieuwe query. Voer de volgende query uit om een nieuwe tabel met de naam MyTestPersonTablete maken.

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

5. Voer de volgende query's uit om gegevens toe te voegen aan de tabel MyTestPersonTable .

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

De statische web-app configureren

De rest van deze zelfstudie is gericht op het bewerken van de broncode van uw statische web-app om lokaal gebruik te maken van databaseverbindingen.

1. Schakel over naar de main vertakking.

   • Bash
   • Powershell

   git checkout main
   

2. Synchroniseer uw lokale versie met wat zich op GitHub bevindt met behulp van git pull.

   • Bash
   • Powershell

   git pull origin main
   

Het databaseconfiguratiebestand maken

Maak vervolgens het configuratiebestand dat uw statische web-app gebruikt om te interfacen met de database.

1. Open uw terminal en maak een nieuwe variabele om uw verbindingsreeks op te slaan. De specifieke syntaxis kan variëren, afhankelijk van het shell-type dat u gebruikt.

   • Bash
   • Powershell

   export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   Zorg ervoor dat u de verbindingsreekswaarde vervangt <YOUR_CONNECTION_STRING> die u in een teksteditor hebt opgeslagen.

2. Gebruik npm om de STATIC Web Apps CLI te installeren of bij te werken. Selecteer welke opdracht het beste is voor uw situatie.

   Als u wilt installeren, gebruikt u npm install.

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

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

   Als u wilt bijwerken, gebruikt u npm update.

   npm update
   

   npm update
   

3. Gebruik de swa db init opdracht om een databaseconfiguratiebestand te genereren.

   • Bash
   • Powershell

   swa db init --database-type postgresql
   

   Met de init opdracht wordt het bestand staticwebapp.database.config.json gemaakt in de map swa-db-connections .

4. Plak dit voorbeeld in het bestand staticwebapp.database.config.json u hebt gegenereerd.

{
  "$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"
        }
      ]
    }
  }
}

Bekijk de volgende tabel met verschillende aspecten van het configuratiebestand voordat u verdergaat met de volgende stap. Raadpleeg de documentatie van Data API Builder voor volledige documentatie over het configuratiebestand en de functionaliteit, zoals relaties en beleid voor beveiliging op itemniveau.

Nu de statische web-app is geconfigureerd om verbinding te maken met de database, kunt u de verbinding controleren.

Startpagina bijwerken

Vervang de markering tussen de body tags in het index.html-bestand door de volgende HTML.

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

De toepassing lokaal starten

U kunt nu uw website uitvoeren en gegevens rechtstreeks in de database bewerken.

1. Start de statische web-app met de databaseconfiguratie.

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

Nu de CLI is gestart, hebt u toegang tot uw database via de eindpunten zoals gedefinieerd in het staticwebapp.database.config.json-bestand .

Gegevens verwerken

De volgende frameworkagnostische opdrachten laten zien hoe u volledige CRUD-bewerkingen kunt uitvoeren in uw database.

De uitvoer voor elke functie wordt weergegeven in het consolevenster van de browser.

Open de ontwikkelhulpprogramma's door op CMD/Ctrl + Shift + I te drukken en het tabblad Console te selecteren.

Alle items weergeven

Voeg de volgende code toe tussen de script tags 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);
}

Vernieuw de pagina en selecteer de knop Lijst .

In het consolevenster van de browser wordt nu een tabel weergegeven met alle records in de database.

Hier volgt een schermopname van hoe deze eruit moet zien in uw browser.

Ophalen op id

Voeg de volgende code toe tussen de script tags 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);
}

Vernieuw de pagina en selecteer de knop Ophalen .

In het consolevenster van de browser wordt nu een tabel weergegeven met de enkele record die is aangevraagd in de database.

Bijwerken

Voeg de volgende code toe tussen de script tags 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);
}

Vernieuw de pagina en selecteer de knop Bijwerken .

In het consolevenster van de browser wordt nu een tabel weergegeven met de bijgewerkte gegevens.

Maken

Voeg de volgende code toe tussen de script tags 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);
}

Vernieuw de pagina en selecteer de knop Maken .

In het consolevenster van de browser wordt nu een tabel weergegeven met de nieuwe record in de database.

Delete

Voeg de volgende code toe tussen de script tags 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 }`);
}

Vernieuw de pagina en selecteer de knop Verwijderen .

In het consolevenster van de browser wordt nu een tabel weergegeven met het antwoord van de verwijderaanvraag.

Record verwijderd: 3

Nu u lokaal met uw site hebt gewerkt, kunt u deze nu implementeren in Azure.

Uw site implementeren

Als u deze site wilt implementeren in productie, hoeft u alleen het configuratiebestand door te voeren en uw wijzigingen naar de server te pushen.

1. Voeg de bestandswijzigingen toe die u wilt bijhouden.

   git add .
   

2. Voer de configuratiewijzigingen door.

   git commit -am "Add database configuration"
   

3. Push uw wijzigingen naar de server.

   git push origin main
   

De database verbinden met uw statische web-app

Gebruik de volgende stappen om een verbinding te maken tussen het Static Web Apps-exemplaar van uw site en uw database.

1. Open uw statische web-app in Azure Portal.

2. Selecteer databaseverbinding in de sectie Instellingen.

3. Selecteer in de sectie Productie de koppeling bestaande databasekoppeling .

4. Voer in het venster Bestaande database koppelen de volgende waarden in:

   Eigenschappen	Weergegeven als
   Databasetype	Selecteer uw databasetype in de vervolgkeuzelijst.
   Abonnement	Selecteer uw Azure-abonnement in de vervolgkeuzelijst.
   Resourcenaam	Selecteer de naam van de databaseserver met de gewenste database.
   Databasenaam	Selecteer de naam van de database die u wilt koppelen aan uw statische web-app.
   Verificatietype	Selecteer De verbindingsreeks en voer de PostgreSQL-gebruikersnaam en het wachtwoord in. Neem voor @servername PostgreSQL Single Server het achtervoegsel niet op.

5. Selecteer OK.

Controleer of uw database is verbonden met uw Static Web Apps-resource

Zodra u uw database hebt verbonden met uw statische web-app en de site klaar is met bouwen, gebruikt u de volgende stappen om de databaseverbinding te controleren.

1. Open uw statische web-app in Azure Portal.

2. Selecteer in de sectie Essentials de URL van uw Static Web Apps-resource om naar uw statische web-app te navigeren.

3. Selecteer de knop Lijst om alle items weer te geven.

   De uitvoer moet er ongeveer uitzien als in deze schermopname.

   

Resources opschonen

Als u de resources wilt verwijderen die tijdens deze zelfstudie zijn gemaakt, moet u de database ontkoppelen en de voorbeeldgegevens verwijderen.

1. Database ontkoppelen: Open uw statische web-app in Azure Portal. Selecteer in de sectie Instellingen de optie Databaseverbinding. Selecteer Details weergeven naast de gekoppelde database. Selecteer in het venster Details van databaseverbinding de knop Ontkoppelen .

2. Voorbeeldgegevens verwijderen: Verwijder de tabel met de naam MyTestPersonTablein uw database.

Volgende stappen