Oktatóanyag: PostgreSQL-adatbáziskapcsolat hozzáadása az Azure Static Web Appsben (előzetes verzió)

Ebben az oktatóanyagban megtudhatja, hogyan csatlakoztathat egy önálló Azure Database for PostgreSQL-adatbázist vagy rugalmas kiszolgálói adatbázist a statikus webalkalmazáshoz. A konfigurálást követően REST- vagy GraphQL-kéréseket kezdeményezhet a beépített /data-api végpontra, hogy háttérkód írása nélkül módosítsa az adatokat.

Az egyszerűség kedvéért ez az oktatóanyag bemutatja, hogyan használhat azure-adatbázist helyi fejlesztési célokra, de helyi adatbázis-kiszolgálót is használhat a helyi fejlesztési igényekhez.

Eben az oktatóanyagban az alábbiakkal fog megismerkedni:

Előfeltételek

Az oktatóanyag elvégzéséhez rendelkeznie kell egy meglévő rugalmas Azure Database for PostgreSQL-kiszolgálóval vagy önálló kiszolgálóval és statikus webalkalmazással. Emellett telepítenie kell az Azure Data Studiót is.

Először konfigurálja az adatbázist az Azure Static Web Apps adatbázis-kapcsolati funkciójának használatához.

Adatbázis-kapcsolat konfigurálása

Az Adatbázis-kapcsolatok működéséhez az Azure Static Web Appsnek hálózati hozzáféréssel kell rendelkeznie az adatbázishoz. Emellett az Azure-adatbázis helyi fejlesztéshez való használatához konfigurálnia kell az adatbázist, hogy engedélyezze a saját IP-címéről érkező kéréseket.

1. Nyissa meg az Azure Database for PostgreSQL-kiszolgálót az Azure Portalon.

2. Ha rugalmas Azure Database for PostgreSQL-kiszolgálót használ, a Beállítások szakaszban válassza a Hálózatkezelés lehetőséget. Ha önálló Azure Database for PostgreSQL-kiszolgálót használ, a Beállítások szakaszban válassza a Kapcsolatbiztonság lehetőséget.

3. A Tűzfalszabályok szakaszban válassza az Aktuális ügyfél IP-címének hozzáadása gombot. Ez a lépés biztosítja, hogy ezt az adatbázist a helyi fejlesztéshez használja.

4. A Tűzfalszabályok szakaszban jelölje be az Azure bármely azure-szolgáltatásának nyilvános hozzáférésének engedélyezése a kiszolgálóhoz jelölőnégyzetet. Ha önálló Azure Database for PostgreSQL-kiszolgálót használ, ez a kapcsoló az Azure-szolgáltatásokhoz való hozzáférés engedélyezése címkével van ellátva. Ez a lépés biztosítja, hogy az üzembe helyezett Static Web Apps-erőforrás hozzáférhessen az adatbázishoz.

5. Válassza a Mentés lehetőséget.

Adatbázis-kapcsolati sztring lekérése helyi fejlesztéshez

Az Azure-adatbázis helyi fejlesztéshez való használatához le kell kérnie az adatbázis kapcsolati sztring. Ezt a lépést kihagyhatja, ha fejlesztési célokra helyi adatbázist kíván használni.

1. Nyissa meg az Azure Database for PostgreSQL-kiszolgálót az Azure Portalon.

2. A Beállítások szakaszban válassza a Kapcsolati sztringek lehetőséget.

3. A ADO.NET mezőből másolja ki a kapcsolati sztring, és tegye félre egy szövegszerkesztőben.

4. Cserélje le a {your_password} helyőrzőt a kapcsolati sztring a jelszavára.

5. Cserélje le a {your_database} helyőrzőt az adatbázis nevére MyTestPersonDatabase. A következő lépésekben hozza létre.MyTestPersonDatabase

6. Fűzze hozzá Trust Server Certificate=True; a kapcsolati sztring a kapcsolati sztring helyi fejlesztéshez való használatához.

Mintaadatok létrehozása

Hozzon létre egy mintatáblát, és az oktatóanyagnak megfelelő mintaadatokkal szórja be. Ez az oktatóanyag az Azure Data Studiót használja, de használhatja a PgAdmint vagy bármely más eszközt.

1. Az Azure Data Studióban hozzon létre kapcsolatot az Azure Database for PostgreSQL-kiszolgálóval

2. Kattintson a jobb gombbal a kiszolgálóra, és válassza az Új lekérdezés lehetőséget. Futtassa a következő lekérdezést egy adatbázis létrehozásához MyTestPersonDatabase.

   CREATE DATABASE "MyTestPersonDatabase";
   

3. Kattintson a jobb gombbal a kiszolgálóra, és válassza a Frissítés lehetőséget.

4. Kattintson a jobb gombbal a saját lekérdezéséreMyTestPersonDatabase, és válassza az Új lekérdezés lehetőséget. Futtassa a következő lekérdezést egy új, névvel ellátott MyTestPersonTabletábla létrehozásához.

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

5. Futtassa az alábbi lekérdezéseket, hogy adatokat adjon hozzá a MyTestPersonTable táblához.

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

A statikus webalkalmazás konfigurálása

Az oktatóanyag további része a statikus webalkalmazás forráskódjának szerkesztésére összpontosít, hogy helyileg használhassa az adatbázis-kapcsolatokat.

1. Váltson az main ágra.

   • Erősen megüt
   • PowerShell

   git checkout main
   

2. Szinkronizálja a helyi verziót a GitHubon találhatóakkal a használatával git pull.

   • Erősen megüt
   • PowerShell

   git pull origin main
   

Az adatbázis konfigurációs fájljának létrehozása

Ezután hozza létre azt a konfigurációs fájlt, amelyet a statikus webalkalmazás az adatbázishoz való kapcsolódáshoz használ.

1. Nyissa meg a terminált, és hozzon létre egy új változót a kapcsolati sztring tárolásához. A megadott szintaxis a használt rendszerhéj típusától függően változhat.

   • Erősen megüt
   • PowerShell

   export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   Cserélje le <YOUR_CONNECTION_STRING> a szövegszerkesztőben félretett kapcsolati sztringértékre.

2. Az npm használatával telepítheti vagy frissítheti a Static Web Apps parancssori felületét. Válassza ki a helyzetének leginkább megfelelő parancsot.

   A telepítéshez használja a következőt npm install: .

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

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

   A frissítéshez használja a következőt npm update: .

   npm update
   

   npm update
   

3. swa db init A parancs használatával hozzon létre egy adatbázis-konfigurációs fájlt.

   • Erősen megüt
   • PowerShell

   swa db init --database-type postgresql
   

   A init parancs létrehozza a staticwebapp.database.config.json fájlt a swa-db-connections mappában.

4. Illessze be ezt a mintát a létrehozott fájlba staticwebapp.database.config.json .

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

Mielőtt továbblépne a következő lépésre, tekintse át az alábbi táblázatot, amely a konfigurációs fájl különböző aspektusait ismerteti. A konfigurációs fájl és a funkciók, például a kapcsolatok és az elemszintű biztonságra vonatkozó szabályzatok teljes dokumentációját a Data API Builder dokumentációjában találja.

Az adatbázishoz való csatlakozáshoz konfigurált statikus webalkalmazással most már ellenőrizheti a kapcsolatot.

Kezdőlap frissítése

Cserélje le a korrektúrát a bodyindex.html fájl címkéi között a következő HTML-fájlra.

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

Az alkalmazás helyi indítása

Most már futtathatja a webhelyét, és közvetlenül kezelheti az adatbázisban lévő adatokat.

1. Indítsa el a statikus webalkalmazást az adatbázis konfigurációjával.

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

A parancssori felület elindítása után az adatbázist a staticwebapp.database.config.json fájlban meghatározott végpontokon keresztül érheti el.

Adatok módosítása

Az alábbi keretrendszer-agnosztikus parancsok bemutatják, hogyan végezhet teljes CRUD-műveleteket az adatbázison.

Az egyes függvények kimenete a böngésző konzolablakában jelenik meg.

Nyissa meg a fejlesztői eszközöket a CMD/CTRL SHIFT + I billentyűkombináció + lenyomásával, és válassza a Konzol lapot.

Az összes elem listázása

Adja hozzá a következő kódot a címkék közé a scriptindex.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);
}

Frissítse a lapot, és válassza a Lista gombot.

A böngésző konzolablakában megjelenik egy tábla, amely az adatbázis összes rekordját felsorolja.

Íme egy képernyőkép arról, hogy milyennek kell lennie a böngészőben.

Lekérés azonosító alapján

Adja hozzá a következő kódot a címkék közé a scriptindex.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);
}

Frissítse a lapot, és válassza a Beolvasás gombot.

A böngésző konzolablakában megjelenik egy tábla, amely az adatbázisból kért egyetlen rekordot tartalmazza.

Frissítés

Adja hozzá a következő kódot a címkék közé a scriptindex.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);
}

Frissítse a lapot, és válassza a Frissítés gombot.

A böngésző konzolablakában megjelenik egy táblázat, amelyen a frissített adatok láthatók.

Létrehozás

Adja hozzá a következő kódot a címkék közé a scriptindex.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);
}

Frissítse a lapot, és válassza a Létrehozás gombot.

A böngésző konzolablakában megjelenik egy tábla, amelyen az új rekord látható az adatbázisban.

Törlés

Adja hozzá a következő kódot a címkék közé a scriptindex.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 }`);
}

Frissítse a lapot, és válassza a Törlés gombot.

A böngésző konzolablakában megjelenik egy tábla, amely a törlési kérelem válaszát mutatja.

Törölt rekord: 3

Most, hogy helyileg dolgozott a webhelyével, üzembe helyezheti az Azure-ban.

A webhely üzembe helyezése

A webhely éles környezetben való üzembe helyezéséhez csak véglegesítenie kell a konfigurációs fájlt, és le kell küldenie a módosításokat a kiszolgálóra.

1. Adja hozzá a követendő fájlmódosításokat.

   git add .
   

2. Véglegesítse a konfiguráció módosításait.

   git commit -am "Add database configuration"
   

3. Küldje el a módosításokat a kiszolgálóra.

   git push origin main
   

Az adatbázis csatlakoztatása a statikus webalkalmazáshoz

Az alábbi lépésekkel kapcsolatot hozhat létre a webhely Statikus Web Apps-példánya és az adatbázis között.

1. Nyissa meg statikus webalkalmazását az Azure Portalon.

2. A Beállítások szakaszban válassza az Adatbázis-kapcsolat lehetőséget.

3. Az Éles környezet szakaszban válassza a Meglévő adatbázis csatolása hivatkozást.

4. A Meglévő adatbázis csatolása ablakban adja meg a következő értékeket:

   Tulajdonság	Érték
   Adatbázis típusa	Válassza ki az adatbázis típusát a legördülő listából.
   Előfizetés	Válassza ki azure-előfizetését a legördülő listából.
   Erőforrás neve	Válassza ki a kívánt adatbázist tartalmazó adatbázis-kiszolgáló nevét.
   Adatbázis neve	Válassza ki a statikus webalkalmazáshoz csatolni kívánt adatbázis nevét.
   Hitelesítés típusa	Válassza a Kapcsolati sztringet, és adja meg a PostgreSQL felhasználónevet és jelszót. Az önálló PostgreSQL-kiszolgáló esetében ne tartalmazza az @servername utótagot.

5. Kattintson az OK gombra.

Ellenőrizze, hogy az adatbázis csatlakoztatva van-e a Static Web Apps-erőforráshoz

Miután csatlakoztatta az adatbázist a statikus webalkalmazáshoz, és a webhely elkészült, az alábbi lépésekkel ellenőrizze az adatbázis-kapcsolatot.

1. Nyissa meg statikus webalkalmazását az Azure Portalon.

2. Az Essentials szakaszban válassza ki a Static Web Apps-erőforrás URL-címét a statikus webalkalmazáshoz való navigáláshoz.

3. A Lista gombra kattintva listázhatja az összes elemet.

   A kimenetnek a képernyőképen láthatóhoz hasonlónak kell lennie.

   

Az erőforrások eltávolítása

Ha el szeretné távolítani az oktatóanyag során létrehozott erőforrásokat, le kell választania az adatbázist, és el kell távolítania a mintaadatokat.

1. Adatbázis leválasztása: Nyissa meg a statikus webalkalmazást az Azure Portalon. A Beállítások szakaszban válassza az Adatbázis-kapcsolat lehetőséget. A csatolt adatbázis mellett válassza a Részletek megtekintése lehetőséget. Az Adatbázis kapcsolat részletei ablakban válassza a Leválasztás gombot.

2. Mintaadatok eltávolítása: Az adatbázisban törölje a névvel ellátott MyTestPersonTabletáblát.

Következő lépések