Oktatóanyag: Azure Cosmos DB-adatbázis-kapcsolat hozzáadása az Azure Static Web Appsben (előzetes verzió)

Ebben az oktatóanyagban megtudhatja, hogyan csatlakoztathat egy Azure Cosmos DB for NoSQL-adatbázist a statikus webalkalmazáshoz. A konfigurálást követően GraphQL-kéréseket intézhet a beépített /data-api végponthoz, hogy háttérkód írása nélkül manipulálja 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ő Azure Cosmos DB for NoSQL-adatbázissal és statikus webalkalmazással.

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 Cosmos DB for NoSQL-fiókját az Azure Portalon.

2. A Beállítások szakaszban válassza a Hálózatkezelés elemet.

3. A Nyilvános hozzáférés szakaszban válassza a Minden hálózat lehetőséget. Ez a művelet lehetővé teszi a felhőalapú adatbázis helyi fejlesztéshez való használatát, hogy az üzembe helyezett Static Web Apps-erőforrás hozzáférhessen az adatbázishoz, és hogy lekérdezhesse az adatbázist a portálról.

4. 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 Cosmos DB for NoSQL-fiókját az Azure Portalon.

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

3. Az ELSŐDLEGES KAPCSOLAT SZTRING mezőjéből másolja ki a kapcsolati sztring, és tegye félre egy szövegszerkesztőben.

Mintaadatok létrehozása

Hozzon létre egy mintatáblát, és az oktatóanyagnak megfelelő mintaadatokkal szórja be.

1. A bal oldali navigációs ablakban válassza az Adatkezelő lehetőséget.

2. Válassza az Új tároló lehetőséget. Adja meg az adatbázis-azonosítót értékként Create new, majd adja meg MyTestPersonDatabase értékként.

3. Adja meg a következő tárolóazonosítóját MyTestPersonContainer: .

4. Adjon meg egy partíciókulcsot id (ez az érték előtaggal van elnevezett /).

5. Kattintson az OK gombra.

6. Válassza ki a MyTestPersonContainer tárolót.

7. Jelölje ki az elemeket.

8. Válassza az Új elem lehetőséget, és adja meg a következő értéket:

   {
       "id": "1",
       "Name": "Sunny"
   }
   

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.

   git checkout main
   

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

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

   • Erősen megüt
   • PowerShell

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

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

   • Erősen megüt
   • PowerShell

   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 cosmosdb_nosql --cosmosdb_nosql-database MyTestPersonDatabase
   

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

4. Illessze be ezt a mintasémát a létrehozott staticwebapp.database.schema.gql fájlba.

   Mivel a Cosmos DB for NoSQL egy séma-agnosztikus adatbázis, az Azure Static Web Apps adatbázis-kapcsolatai nem tudják kinyerni az adatbázis sémáját. A staticwebapp.database.schema.gql fájl lehetővé teszi a Cosmos DB for NoSQL-adatbázis sémájának megadását a Static Web Appshez.

   type Person @model {
     id: ID
     Name: String
   }
   

5. Illessze be ezt a mintakonfigurációt a létrehozott fájlba staticwebapp.database.config.json . Figyelje meg, hogy a Cosmos DB for NoSQL több lehetőséget is kínál az objektumban a data-source Cosmos DB-adatbázis és az adatbázis-kapcsolatokhoz szükséges sémafájl jelzésére az adatbázis sémájának megértéséhez.

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "cosmosdb_nosql",
    "options": {
      "database": "MyTestPersonDatabase",
      "schema": "staticwebapp.database.schema.gql"
    },
    "connection-string": "@env('DATABASE_CONNECTION_STRING')"
  },
  "runtime": {
    "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": "MyTestPersonContainer",
      "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. 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
   

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

   npm update
   

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

   swa start ./src --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.

A http://localhost:4280/data-api/graphql végpont elfogadja a GraphQL-lekérdezéseket és a mutációkat.

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 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);
}

Ebben a példában:

• A GraphQL-lekérdezés kiválasztja az Id adatbázis mezőit és Name mezőit.
• A kiszolgálónak átadott kéréshez hasznos adatra van szükség, amelyben a query tulajdonság tartalmazza a lekérdezésdefiníciót.
• A válasz hasznos adatai a data.people.items tulajdonságban találhatók.

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 gql = `
    query getById($id: ID!) {
      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);
}

Ebben a példában:

• A GraphQL-lekérdezés kiválasztja az id adatbázis mezőit és Name mezőit.
• A kiszolgálónak átadott kéréshez hasznos adatra van szükség, amelyben a query tulajdonság tartalmazza a lekérdezésdefiníciót.
• A válasz hasznos adatai a data.person_by_pk tulajdonságban találhatók.

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 = {
    id: id,
    Name: "Molly"
  };

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

  const query = {
    query: gql,
    variables: {
      id: id,
      _partitionKeyValue: 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);
}

Ebben a példában:

• A GraphQL-lekérdezés kiválasztja az id adatbázis mezőit és Name mezőit.
• Az query objektum a GraphQL-lekérdezést tárolja a query tulajdonságban.
• A GraphQL függvény argumentumértékei a query.variables tulajdonságon keresztül lesznek átadva.
• A kiszolgálónak átadott kéréshez hasznos adatra van szükség, amelyben a query tulajdonság tartalmazza a lekérdezésdefiníciót.
• A válasz hasznos adatai a data.updatePerson tulajdonságban találhatók.

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 = {
    id: "3",
    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);
}

Ebben a példában:

• A GraphQL-lekérdezés kiválasztja az id adatbázis mezőit és Name mezőit.
• Az query objektum a GraphQL-lekérdezést tárolja a query tulajdonságban.
• A GraphQL függvény argumentumértékei a query.variables tulajdonságon keresztül lesznek átadva.
• A kiszolgálónak átadott kéréshez hasznos adatra van szükség, amelyben a query tulajdonság tartalmazza a lekérdezésdefiníciót.
• A válasz hasznos adatai a data.updatePerson tulajdonságban találhatók.

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 gql = `
    mutation del($id: ID!, $_partitionKeyValue: String!) {
      deletePerson(id: $id, _partitionKeyValue: $_partitionKeyValue) {
        id
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
    _partitionKeyValue: 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: ${ JSON.stringify(result.data) }`);
}

Ebben a példában:

• A GraphQL-lekérdezés kiválasztja a Id mezőt az adatbázisból.
• Az query objektum a GraphQL-lekérdezést tárolja a query tulajdonságban.
• A GraphQL függvény argumentumértékei a query.variables tulajdonságon keresztül lesznek átadva.
• A kiszolgálónak átadott kéréshez hasznos adatra van szükség, amelyben a query tulajdonság tartalmazza a lekérdezésdefiníciót.
• A válasz hasznos adatai a data.deletePerson tulajdonságban találhatók.

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

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. Véglegesítse a konfiguráció módosításait.

   git commit -am "Add database configuration"
   

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

   git push origin main
   

3. Várjon, amíg a webalkalmazás létrejön.

4. Nyissa meg a statikus webalkalmazást a böngészőben.

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

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

   

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.
   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 sztring lehetőséget.

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 MyTestPersonContainertáblát.

Következő lépések