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.
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.
Nyissa meg az Azure Database for PostgreSQL-kiszolgálót az Azure Portalon.
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.
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.
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.
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.
Nyissa meg az Azure Database for PostgreSQL-kiszolgálót az Azure Portalon.
A Beállítások szakaszban válassza a Kapcsolati sztringek lehetőséget.
A ADO.NET mezőből másolja ki a kapcsolati sztring, és tegye félre egy szövegszerkesztőben.
Cserélje le a
{your_password}
helyőrzőt a kapcsolati sztring a jelszavára.Cserélje le a
{your_database}
helyőrzőt az adatbázis nevéreMyTestPersonDatabase
. A következő lépésekben hozza létre.MyTestPersonDatabase
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.
Az Azure Data Studióban hozzon létre kapcsolatot az Azure Database for PostgreSQL-kiszolgálóval
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";
Kattintson a jobb gombbal a kiszolgálóra, és válassza a Frissítés lehetőséget.
Kattintson a jobb gombbal a saját lekérdezésére
MyTestPersonDatabase
, és válassza az Új lekérdezés lehetőséget. Futtassa a következő lekérdezést egy új, névvel ellátottMyTestPersonTable
tábla létrehozásához.CREATE TABLE "MyTestPersonTable" ( "Id" SERIAL PRIMARY KEY, "Name" VARCHAR(25) NULL );
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.
Váltson az
main
ágra.git checkout main
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.
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.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
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.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.mode
graphql.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 false
pedig 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 body
index.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.
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 GET
az PUT
POST
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 script
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);
}
Ebben a példában:
- Az API alapértelmezett kérése az
fetch
igétGET
haszná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 ésName
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.
Lekérés azonosító alapján
Adja hozzá a következő kódot a címkék közé a script
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);
}
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 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 ésName
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 script
index.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 ésName
mezőit. - Az
query
objektum a GraphQL-lekérdezést tárolja aquery
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 script
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);
}
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 ésName
mezőit. - Az
query
objektum a GraphQL-lekérdezést tárolja aquery
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 script
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);
}
}
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 aquery
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.
Adja hozzá a követendő fájlmódosításokat.
git add .
Véglegesítse a konfiguráció módosításait.
git commit -am "Add database configuration"
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.
Nyissa meg statikus webalkalmazását az Azure Portalon.
A Beállítások szakaszban válassza az Adatbázis-kapcsolat lehetőséget.
Az Éles környezet szakaszban válassza a Meglévő adatbázis csatolása hivatkozást.
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.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.
Nyissa meg statikus webalkalmazását az Azure Portalon.
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.
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.
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.
Mintaadatok eltávolítása: Az adatbázisban törölje a névvel ellátott
MyTestPersonTable
táblát.