API hozzáadása az Azure Static Web Appshez az Azure Functions használatával
Kiszolgáló nélküli API-kat adhat hozzá az Azure Functions által működtetett Azure Static Web Appshez. Ez a cikk bemutatja, hogyan adhat hozzá és helyezhet üzembe API-t egy Azure Static Web Apps-webhelyen.
Feljegyzés
A Static Web Appsben alapértelmezés szerint biztosított függvények előre konfigurálva vannak, hogy biztonságos API-végpontokat biztosítsanak, és csak a HTTP által aktivált függvényeket támogatják. Az Önálló Azure Functions-alkalmazásoktól való eltérésről további információt az Azure Functions API-támogatásában talál.
Előfeltételek
- Aktív előfizetéssel rendelkező Azure-fiók.
- Ha nincs fiókja, ingyenesen létrehozhat egyet.
- Visual Studio Code.
- Azure Static Web Apps-bővítmény a Visual Studio Code-hoz.
- Azure Functions-bővítmény a Visual Studio Code-hoz.
- Node.js v18-at az előtérbeli alkalmazás és az API futtatásához.
Tipp.
Az nvm eszközzel több Node.js is felügyelhet a fejlesztői rendszeren. Windows rendszeren a Windows NVM a Wingeten keresztül telepíthető.
A statikus webalkalmazás létrehozása
API hozzáadása előtt hozzon létre és helyezzen üzembe egy előtéralkalmazást az Azure Static Web Appsben az Első statikus webhely létrehozása az Azure Static Web Apps rövid útmutatójával.
Miután üzembe helyezett egy előtéralkalmazást az Azure Static Web Appsben, klónozza az alkalmazásadattárat. Az adattárat például a git
parancssor használatával klónozhatja.
A következő parancs futtatása előtt cserélje le <YOUR_GITHUB_USERNAME>
a GitHub-felhasználónevét.
git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-first-static-web-app
Nyissa meg az alkalmazás adattárának gyökerét a Visual Studio Code-ban. A mappastruktúra tartalmazza az előtérbeli alkalmazás forrását és a Static Web Apps GitHub-munkafolyamatot a .github/workflows mappában.
├── .github
│ └── workflows
│ └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and files from your static web app)
Az API létrehozása
Azure Functions-projektet hoz létre a statikus webalkalmazás API-ja számára. Alapértelmezés szerint a Static Web Apps Visual Studio Code bővítmény egy API nevű mappában hozza létre a projektet az adattár gyökerében.
Nyissa meg a Parancskatalógust az F1 billentyűvel.
Válassza az Azure Static Web Apps: HTTP-függvény létrehozása... lehetőséget. Ha a rendszer kéri az Azure Functions-bővítmény telepítését, telepítse, és futtassa újra ezt a parancsot.
Amikor a rendszer kéri, adja meg a következő értékeket:
Felszólítás Érték Válasszon nyelvet JavaScript Programozási modell kiválasztása V4 Függvénynév megadása üzenet Tipp.
A programozási modellek közötti különbségekről az Azure Functions fejlesztői útmutatójában olvashat bővebben
Egy Azure Functions-projekt egy HTTP által aktivált függvénnyel jön létre. Az alkalmazás most már az alábbi példához hasonló projektstruktúrával rendelkezik.
├── .github │ └── workflows │ └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml │ ├── api ├── └──src │ │ │ functions │ │ │ └── message.js │ │ └── index.js │ ├── .funcignore │ ├── host.json │ ├── local.settings.json │ ├── package-lock.json │ └── package.json │ └── (...plus other folders and files from your static web app)
Ezután módosítsa a függvényt
message
úgy, hogy egy üzenetet adjon vissza az előtérnek. Frissítse az src/functions/message.js függvényt az alábbi kóddal.const { app } = require('@azure/functions'); app.http('message', { methods: ['GET', 'POST'], authLevel: 'anonymous', handler: async (request, context) => { return { body: `Hello, from the API!` }; } });
Tipp.
További API-függvényeket az Azure Static Web Apps: HTTP-függvény létrehozása... parancs ismételt futtatásával adhat hozzá.
Az előtérbeli alkalmazás frissítése az API meghívásához
Frissítse az előtérbeli alkalmazást, hogy meghívja az API-t, /api/message
és megjelenítse a válaszüzenetet.
Ha a rövid útmutatók segítségével hozta létre az alkalmazást, a frissítések alkalmazásához kövesse az alábbi utasításokat.
Frissítse a src/index.html fájl tartalmát a következő kóddal, hogy lekérje a szöveget az API-függvényből, és megjelenítse a képernyőn.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Vanilla JavaScript App</title>
</head>
<body>
<main>
<h1>Vanilla JavaScript App</h1>
<p>Loading content from the API: <b id="name">...</b></p>
</main>
<script>
(async function() {
const { text } = await( await fetch(`/api/message`)).json();
document.querySelector('#name').textContent = text;
}());
</script>
</body>
</html>
Az előtér és az API helyi futtatása
Az előtéralkalmazás és az API helyi együttes futtatásához az Azure Static Web Apps egy cli-t biztosít, amely a felhőkörnyezetet emulálja. A parancssori felület az Azure Functions Core Tools használatával futtatja az API-t.
Parancssori eszközök telepítése
Győződjön meg arról, hogy telepítve vannak a szükséges parancssori eszközök.
Fontos
A Static Web Apps cli-ből származó központi telepítések biztonságának javítása érdekében egy olyan kompatibilitástörő változás jelent meg, amely megköveteli, hogy 2025. január 15-ig frissítsen a Static Web Apps CLI legújabb (2.0.2) verziójára.
npm install -g @azure/static-web-apps-cli
Tipp.
Ha nem szeretné globálisan telepíteni a swa
parancssort, az alábbi utasítások helyett használhatja npx swa
swa
.
Előtérbeli alkalmazás létrehozása
Ha az alkalmazás keretrendszert használ, hozza létre az alkalmazást a kimenet létrehozásához a Static Web Apps parancssori felület futtatása előtt.
Nincs szükség az alkalmazás összeállítására.
Az alkalmazás helyi futtatása
Futtassa együtt az előtéralkalmazást és az API-t úgy, hogy elindítja az alkalmazást a Static Web Apps parancssori felületével. Az alkalmazás két részének ily módon történő futtatása lehetővé teszi, hogy a parancssori felület egy mappából szolgálja ki az előtér buildkimenetét, és elérhetővé teszi az API-t a futó alkalmazás számára.
Az adattár gyökerében indítsa el a Static Web Apps parancssori felületét a
start
paranccsal. Módosítsa az argumentumokat, ha az alkalmazás más mappastruktúrával rendelkezik.Adja át az aktuális mappát (
src
) és az API-mappát (api
) a parancssori felületnek.swa start src --api-location api
Előfordulhat, hogy a Windows Tűzfal kéri, hogy az Azure Functions-futtatókörnyezet hozzáférjen az internethez. Válassza ki az Engedélyezés lehetőséget.
Amikor a parancssori felületi folyamatok elindulnak, a következő címen
http://localhost:4280/
érheti el az alkalmazást: . Figyelje meg, hogy a lap hogyan hívja meg az API-t, és hogyan jeleníti meg a kimenetét.Hello from the API
A parancssori felület leállításához írja be a Ctrl + C billentyűkombinációt.
API-hely hozzáadása a munkafolyamathoz
Mielőtt üzembe helyezheti az alkalmazást az Azure-ban, frissítse az adattár GitHub Actions-munkafolyamatát az API-mappa megfelelő helyével.
Nyissa meg a munkafolyamatot a .github/workflows/azure-static-web-apps-DEFAULT-HOSTNAME<>.yml címen.
Keresse meg a tulajdonságot
api_location
, és állítsa az értéket a következőreapi
: .###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig app_location: "src" # App source code path api_location: "api" # Api source code path - optional output_location: "" # Built app content directory - optional ###### End of Repository/Build Configurations ######
Megjegyzés: A fenti értékek
api_location
app_location
nem tartoznak keretrendszerhez,output_location
és ezek az értékek a keretrendszer alapján változnak.Mentse a fájlt.
Módosítások üzembe helyezése
Ha módosításokat szeretne közzétenni a statikus webalkalmazásban az Azure-ban, véglegesítse és küldje le a kódot a távoli GitHub-adattárba.
Nyissa meg a Parancskatalógust az F1 billentyűvel.
Válassza ki a Git: Commit All parancsot.
Amikor a rendszer véglegesítési üzenetet kér, adja meg a következőt: API hozzáadása és a helyi Git-adattár összes módosításának véglegesítése.
Nyissa meg a Parancskatalógust az F1 billentyűvel.
Válassza ki a Git: push parancsot.
A rendszer leküldi a módosításokat a GitHub távoli adattárába, és elindítja a Static Web Apps GitHub Actions munkafolyamatot az alkalmazás létrehozásához és üzembe helyezéséhez.
Nyissa meg az adattárat a GitHubon a munkafolyamat-futtatás állapotának figyeléséhez.
A munkafolyamat futtatása után látogasson el a statikus webalkalmazásba a módosítások megtekintéséhez.