Bevezetés

Befejeződött

A vállalat elindít egy bevásárlólista-webalkalmazást. A webhelyen keresztül az ügyfelek elemeket adhatnak hozzá, szerkeszthetnek, tekinthetnek meg és távolíthatnak el a listából.

Az alkalmazás létrehozásakor az első szempont az, hogy az alkalmazás és az API biztonságosan legyen üzemeltetve, globálisan elérhetőek legyenek, és automatikusan közzé legyenek téve. Ahelyett, hogy webkiszolgálót hoz létre ezeknek a problémáknak a kezelésére, úgy dönt, hogy olyan üzemeltetési megoldást használ, amely könnyen, sok beállítás vagy konfiguráció nélkül kiszolgálja az eszközöket és az API-t.

Mi az Azure Static Web Apps?

Az Azure Static Web Apps a forráskódtól a globális rendelkezésre állásig megoldja a nehéz problémákat.

Bár továbbra is az alkalmazás fejlesztésére összpontosít, az Azure Static Web Apps automatikusan létrehozza és üzemelteti azt a GitHubról vagy az Azure DevOpsból.

A statikus webalkalmazások gyakran olyan kódtárak és keretrendszerek használatával készülnek, mint az Angular, a React, a Svelte vagy a Vue. Ezek az alkalmazások közé tartoznak az alkalmazást alkotó HTML-, CSS-, JavaScript- és képeszközök. A hagyományos webkiszolgáló-architektúrában ezek a fájlok egyetlen kiszolgálóról, a szükséges API-végpontok mellett lesznek kiszolgálva.

Az Azure Static Web Apps használatával a statikus objektumok elkülönülnek a hagyományos webkiszolgálóktól, és ehelyett a világ minden táján elosztott pontoktól szolgálnak ki. Ez a terjesztés felgyorsítja a fájlok kiszolgálását, mivel a fájlok fizikailag közelebb állnak a végfelhasználókhoz. Az opcionális API-végpontok kiszolgáló nélküli architektúrával vannak üzemeltetve, így nincs szükség teljes háttérkiszolgálóra.

Az Azure Static Web Apps modellje az, hogy pontosan azt kapja, amire szüksége van, nem több, nem kevesebbet.

Azure Static Web Apps-erőforrás létrehozásakor az Azure beállít egy GitHub Actions- vagy Azure DevOps-munkafolyamatot az alkalmazás forráskódtárában. A munkafolyamat egy tetszőleges ágat figyel. Amikor leküldi a véglegesítéseket, vagy lekéréses kérelmeket hoz létre a figyelt ágba, a munkafolyamat automatikusan létrehozza és üzembe helyezi az alkalmazást és annak API-ját az Azure-ban.

Az Azure üzemelteti és kiszolgálja a webalkalmazást. Az Azure Functions háttér API-funkcionalitást biztosít, amely automatikus fel- és lekapcsolást biztosít igény szerint.

Választható API-k

Az Azure Static Web Apps ideális a tisztán statikus tartalom kiszolgálásához, de nagy támogatást nyújt olyan statikus webalkalmazásokhoz is, amelyek mögött API-k szükségesek. Statikus webalkalmazását API-val vagy anélkül is üzemeltetheti.

Az Azure üzemelteti és kiszolgálja a webalkalmazást, míg az Azure Functions háttérbeli API-funkcionalitást biztosít, amely automatikus skálázást biztosít az API igényeinek megfelelően, felskálázva vagy visszaskálázva a teljesítményt.

Főbb funkciók

• A globálisan elosztott webszolgáltatás a felhasználókhoz közelebb helyezi a statikus tartalmakat, például a HTML-t, a CSS-t, a JavaScriptet és a képeket.
• Az Azure Functions által biztosított integrált API-támogatás.
• Első osztályú GitHub- és Azure DevOps-integrációs változások az adattárbeli trigger buildjeiben és üzembe helyezéseiben.
• Ingyenes SSL-tanúsítványok, amelyek automatikusan megújulnak.
• Egyedi előnézeti URL-címek a lekéréses kérelmek előnézetéhez.

Tanulási célkitűzések

Ebben a modulban webalkalmazást és API-t hoz létre, módosít és helyez üzembe az Azure Static Web Appsben.

Saját elérési út kiválasztása

Ez a modul a mintaalkalmazás négy változata közül választhat: Angular, React, Svelte és Vue. Az Azure Static Web Apps ereje az, hogy ezek a változatok csak működnek.

A kezdőkód tartalmazza a négy alkalmazást és a később használt API kiindulási pontját.

├ angular-app  👈 The Angular client app
├ api-starter  👈 The API starter app. You use this later.
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

A teendők

Miután kiválasztja az ügyfélalkalmazást, a következő lépéseket teheti meg:

1. A webalkalmazás automatikus létrehozása és üzembe helyezése az Azure-ban egy GitHub-adattárból a GitHub Actions használatával.
2. Hozza létre az API-t az Azure Functions használatával.
3. Módosítsa a webalkalmazást ÚGY, hogy HTTP-kéréseket küldjön az API-nak.
4. A webalkalmazás automatikus létrehozása és üzembe helyezése az Azure-ban egy GitHub-adattárból a GitHub Actions használatával.
5. Végül megismerheti és elindíthatja az alkalmazást az alábbi képen látható módon.

Következő lépések

Lehetséges, hogy most arra gondol, először az Azure-erőforrásokat kell létrehozni, de az Azure Static Web Apps figyelembe veszi a napi munkafolyamatát. Természetesebb módszer, ha először a GitHubon kezdi a kódot, mielőtt erőforrásokat hoz létre az Azure-ban.