Megosztás a következőn keresztül:


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.

Feljegyzés

Ez az oktatóanyag bemutatja, hogyan használhatja a rugalmas Azure Database for PostgreSQL-kiszolgálót vagy az egykiszolgálós kiszolgálót. Ha egy másik adatbázist szeretne használni, tekintse meg az Azure Cosmos DB, az Azure SQL vagy a MySQL oktatóanyagait.

A PostgreSQL kiválasztásának eredményeit megjelenítő webböngésző a fejlesztői eszközök konzolablakában.

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

  • Rugalmas Azure Database for PostgreSQL-kiszolgáló vagy egykiszolgálós adatbázis csatolása a statikus webalkalmazáshoz
  • Adatok létrehozása, olvasása, frissítése és törlése

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.

Erőforrás Leírás
Rugalmas Azure Database for PostgreSQL-kiszolgáló vagy önálló Azure Database for PostgreSQL-adatbázis Ha még nem rendelkezik ilyen adatbázissal, kövesse az Azure Database for PostgreSQL rugalmas kiszolgálói adatbázis-útmutatójának létrehozására vonatkozó lépéseket, vagy egy önálló Azure Database for PostgreSQL-adatbázis-útmutatót . Ha kapcsolati sztring hitelesítést szeretne használni a Static Web Apps adatbázis-kapcsolataihoz, győződjön meg arról, hogy az Azure Database for PostgreSQL-kiszolgálót PostgreSQL-hitelesítéssel hozza létre. Ezt az értéket módosíthatja, ha később felügyelt identitást szeretne használni.
Meglévő statikus webalkalmazás Ha még nem rendelkezik ilyen webalkalmazással, kövesse az első lépések útmutatójának lépéseit a No Framework statikus webalkalmazás létrehozásához.
Az Azure Data Studio PostgreSQL-bővítményével Ha még nincs telepítve az Azure Data Studio, kövesse az útmutatót az Azure Data Studio telepítéséhez a PostgreSQL-bővítménysel. Másik lehetőségként bármilyen más eszközzel lekérdezheti a PostgreSQL-adatbázist, például a PgAdmint.

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.

Fontos

Az alábbi lépések feltételezik, hogy az első lépések útmutatójában létrehozott statikus webalkalmazással dolgozik. Ha másik projektet használ, mindenképpen módosítsa az alábbi git-parancsokat az ágneveknek megfelelően.

  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.

    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.

    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.

Szolgáltatás Magyarázat
Adatbázis-kapcsolat A fejlesztés során a futtatókörnyezet beolvassa a kapcsolati sztring a konfigurációs fájlban lévő kapcsolati sztring értékéből. Bár a kapcsolati sztring közvetlenül a konfigurációs fájlban is megadhatja, ajánlott az kapcsolati sztring helyi környezeti változóban tárolni. A konfigurációs fájl környezeti változó értékeire a @env('DATABASE_CONNECTION_STRING') jelölésen keresztül hivatkozhat. A kapcsolati sztring értékét felülírja a Static Web Apps az üzembe helyezett helyhez az adatbázis csatlakoztatásakor gyűjtött adatokkal.
API-végpont A REST-végpont elérhető /data-api/rest , míg a GraphQL-végpont a konfigurációs fájlban konfigurált módon érhető el /data-api/graphql . Konfigurálhatja a REST és a GraphQL elérési útját, de az /data-api előtag nem konfigurálható.
API-biztonság A runtime.host.cors beállítások lehetővé teszik az API-ra irányuló kéréseket kezdeményező engedélyezett forrásokat. Ebben az esetben a konfiguráció egy fejlesztési környezetet tükröz, és engedélyezi a helylistát http://localhost:4280 .
Entitásmodell A REST API-ban útvonalakon vagy a GraphQL-sémában típusokként közzétett entitásokat határozza meg. Ebben az esetben a Személy név a végpont számára elérhető név, míg entities.<NAME>.source az adatbázisséma és a táblaleképezés. Figyelje meg, hogy az API-végpont nevének nem kell megegyeznie a tábla nevével.
Entitás biztonsága A tömbben entity.<NAME>.permissions felsorolt engedélyszabályok szabályozzák az entitások engedélyezési beállításait. A szerepkörökkel rendelkező entitásokat ugyanúgy védheti, mint a szerepkörökkel rendelkező útvonalakat.

Feljegyzés

A konfigurációs fájl connection-stringés host.modegraphql.allow-introspection a tulajdonságok felülíródnak a webhely üzembe helyezésekor. A kapcsolati sztring felülírja az adatbázis statikus Web Apps-erőforráshoz való csatlakoztatásakor gyűjtött hitelesítési adatokkal. A host.mode tulajdonság értéke production, a értéke falsepedig a graphql.allow-introspection következő. Ezek a felülbírálások konzisztenciát biztosítanak a konfigurációs fájlokban a fejlesztési és éles számítási feladatok során, miközben biztosítják, hogy a Static Web Apps-erőforrás engedélyezett adatbázis-kapcsolatokkal biztonságos és éles üzemre kész legyen.

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.

A http://localhost:4280/data-api/rest/<ENTITY_NAME> végpont elfogadja GETaz PUTPOST adatbázis adatainak módosítására irányuló kéréseket és DELETE kéréseket.

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 endpoint = '/data-api/rest/Person';
  const response = await fetch(endpoint);
  const data = await response.json();
  console.table(data.value);
}

Ebben a példában:

  • Az API alapértelmezett kérése az fetch igét GEThasználja.
  • A válasz hasznos adatai a value tulajdonságban találhatók.
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.

ID (Azonosító) Név
0 Napfényes
2 Dheeraj

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

A fejlesztői eszközök konzolablakában található adatbázis-kijelölés eredményeit megjelenítő webböngésző.

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

Ebben a példában:

  • A végpont utótagja /person/Ida következő: .
  • Az azonosító értéke hozzá van fűzve a végpont helyének végéhez.
  • A válasz hasznos adatai a value tulajdonságban találhatók.
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);
}

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.

ID (Azonosító) Név
0 Napfényes

Frissítés

Adja hozzá a következő kódot a címkék közé a scriptindex.html.

A Statikus Web Apps támogatja az igéket és PATCH az PUT igéket is. A PUT kérések frissítik a teljes rekordot, míg PATCH részleges frissítést végeznek.

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

Ebben a példában:

  • A végpont utótagja /person/Id/a következő: .
  • Az azonosító értéke hozzá van fűzve a végpont helyének végéhez.
  • A REST-művelet az PUT adatbázisrekord frissítése.
  • A válasz hasznos adatai a value tulajdonságban találhatók.
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);
}

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.

ID (Azonosító) Név
0 Molly

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

Ebben a példában:

  • A végpont utótagja /person/a következő: .
  • A REST-művelet egy POST adatbázisrekord hozzáadása.
  • A válasz hasznos adatai a value tulajdonságban találhatók.
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);
}

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.

ID (Azonosító) Név
3 Pedro

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

Ebben a példában:

  • A végpont utótagja /person/Id/a következő: .
  • Az azonosító értéke hozzá van fűzve a végpont helyének végéhez.
  • A REST-művelet az DELETE adatbázisrekord eltávolítása.
  • Ha a törlés sikeres, a válasz hasznos adat ok tulajdonsága .true
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 }`);
}

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

    Webböngésző, amely az adatbázis rekordjainak a fejlesztői eszközök konzolablakában való listázásából származó eredményeket jeleníti meg.

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