Helyi fejlesztés beállítása az Azure Static Web Appshez

A felhőben való közzétételkor egy Azure Static Web Apps-webhely számos olyan szolgáltatást kapcsol össze, amelyek úgy működnek együtt, mintha ugyanaz az alkalmazás lennének. Ilyen szolgáltatások többek között a következők:

• A statikus webalkalmazás
• Azure Functions API
• Hitelesítési és engedélyezési szolgáltatások
• Útválasztási és konfigurációs szolgáltatások

Ezeknek a szolgáltatásoknak kommunikálniuk kell egymással, és az Azure Static Web Apps kezeli ezt az integrációt a felhőben.

Az alkalmazás helyi futtatásakor azonban ezek a szolgáltatások nem lesznek automatikusan összekapcsolva.

Az Azure Static Web Apps parancssori felület a következő szolgáltatásokhoz hasonló élményt nyújt:

• Helyi statikus helykiszolgáló
• Proxy az előtérbeli keretrendszer fejlesztői kiszolgálóhoz
• Proxy az API-végpontokhoz – az Azure Functions Core Toolson keresztül érhető el
• Egy szimulált hitelesítési és engedélyezési kiszolgáló
• Helyi útvonalak és konfigurációs beállítások kényszerítése

Hogyan működik?

Az alábbi diagram a kérések helyi kezelését mutatja be.

• A portra 4280 irányuló kéréseket a rendszer a kérés típusától függően továbbítja a megfelelő kiszolgálónak.

• A statikus tartalomkéréseket ( például HTML vagy CSS) a belső cli statikus tartalomkiszolgáló, vagy az előtér-keretrendszer kiszolgálója kezeli a hibakereséshez.

• A hitelesítési és engedélyezési kérelmeket egy emulátor kezeli, amely hamis identitásprofilt biztosít az alkalmazás számára.

• A Functions Core Tools runtime¹ kezeli a webhely API-jára irányuló kéréseket.

• Az összes szolgáltatás válaszai úgy jelennek meg a böngészőben, mintha mind egyetlen alkalmazás lennének.

Miután egymástól függetlenül elindítja a felhasználói felületet és az Azure Functions API-alkalmazásokat, indítsa el a Static Web Apps parancssori felületét, és az alábbi paranccsal mutasson a futó alkalmazásokra:

swa start http://localhost:<DEV-SERVER-PORT-NUMBER> --api-location http://localhost:7071

Ha a swa init parancsot használja, a Static Web Apps parancssori felülete megvizsgálja az alkalmazás kódját, és létrehoz egy swa-cli.config.json konfigurációs fájlt a parancssori felülethez. A swa-cli.config.json fájl használatakor futtathatja swa start az alkalmazást helyileg.

¹ Az Azure Functions Core-eszközöket a parancssori felület automatikusan telepíti, ha még nincsenek a rendszeren.

Az alábbi cikk részletesen ismerteti a csomópontalapú alkalmazások futtatásának lépéseit, de a folyamat minden nyelv vagy környezet esetében ugyanaz.

Előfeltételek

• Meglévő Azure Static Web Apps-webhely: Ha nem rendelkezik ilyennel, kezdje a vanilla-api starter alkalmazással.
• Node.js az npm használatával: Futtassa a Node.js LTS-verziót, amely tartalmazza az npm-hez való hozzáférést.
• Visual Studio Code: Az API-alkalmazás hibakereséséhez használatos, de a parancssori felülethez nem szükséges.

Első lépések

Nyisson meg egy terminált a meglévő Azure Static Web Apps-webhely gyökérmappájához.

1. Telepítse a parancssori felületet.

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

   Tipp.

   Ha globálisan szeretné telepíteni az SWA CLI-t, használja -g a következő helyett -D: . Erősen ajánlott azonban az SWA telepítése fejlesztési függőségként.

2. Ha az alkalmazás megköveteli, készítse el az alkalmazást.

   Futtassa npm run builda projektet, vagy az azzal egyenértékű parancsot.

3. Inicializálja a parancssori felület adattárát.

   swa init
   

   A parancssori felület által feltett kérdések megválaszolásával ellenőrizze, hogy a konfigurációs beállítások helyesek-e.

4. Indítsa el a parancssori felületet.

   swa start
   

5. Nyissa meg http://localhost:4280 az alkalmazást a böngészőben.

A parancssori felület elindításának egyéb módjai

Engedélyezés és hitelesítés emulációja

A Static Web Apps CLI emulálja az Azure-ban implementált biztonsági folyamatot . Amikor egy felhasználó bejelentkezik, megadhatja az alkalmazásnak visszaadott hamis identitásprofilt.

Ha például megpróbál elmenni /.auth/login/github, a rendszer egy olyan lapot ad vissza, amely lehetővé teszi egy identitásprofil definiálásához.

Az emulátor egy oldalt biztosít, amely lehetővé teszi a következő ügyfélnévértékek megadását:

Bejelentkezés után:

• A végpont vagy a függvényvégpont használatával /.auth/me lekérheti a felhasználó ügyfélnevét.

• Navigálás az ügyfélnév törléséhez /.auth/logout és a modellfelhasználó kijelentkeztetéséhez.

Hibakeresés

Egy statikus webalkalmazásban két hibakeresési környezet található. Az első a statikus tartalomwebhelyhez, a második pedig az API-függvényekhez tartozik. A helyi hibakeresés lehetővé teszi, hogy a Static Web Apps parancssori felülete fejlesztési kiszolgálókat használjon ezen környezetek egyikéhez vagy mindkettőhöz.

Az alábbi lépések egy gyakori forgatókönyvet mutatnak be, amely mindkét hibakeresési környezethez fejlesztési kiszolgálókat használ.

1. Indítsa el a statikus helyfejlesztő kiszolgálót. Ez a parancs a használt előtér-keretrendszerre vonatkozik, de gyakran olyan parancsok formájában jelenik meg, mint az npm run build, npm startvagy npm run dev.

2. Nyissa meg az API-alkalmazásmappát a Visual Studio Code-ban, és indítsa el a hibakeresési munkamenetet.

3. Indítsa el a Static Web Apps parancssori felületét az alábbi paranccsal.

   swa start http://localhost:<DEV-SERVER-PORT-NUMBER> --appDevserverUrl http://localhost:7071
   

   Cserélje le <DEV_SERVER_PORT_NUMBER> a fejlesztői kiszolgáló portszámára.

Az alábbi képernyőképek egy tipikus hibakeresési forgatókönyv termináljait jelenítik meg:

A statikus tartalomwebhely a következőn keresztül npm run devfut: .

Az Azure Functions API-alkalmazás hibakeresési munkamenetet futtat a Visual Studio Code-ban.

A Static Web Apps parancssori felülete mindkét fejlesztőkiszolgálóval elindul.

A porton 4280 áthaladó kérések most vagy a statikus tartalomfejlesztési kiszolgálóra vagy az API hibakeresési munkamenetére lesznek irányítva.

A különböző hibakeresési forgatókönyvekről a portok és a kiszolgálócímek testreszabásával kapcsolatos útmutatást az Azure Static Web Apps CLI-adattárában talál.

Hibakeresési konfiguráció minta

A Visual Studio Code fájllal engedélyezi a hibakeresési munkameneteket a szerkesztőben. Ha a Visual Studio Code nem hoz létre launch.json fájlt, a következő konfigurációt helyezheti el a .vscode/launch.json fájlban.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Node Functions",
            "type": "node",
            "request": "attach",
            "port": 9229,
            "preLaunchTask": "func: host start"
        }
    ]
}

Következő lépések