Introduction

Befejeződött

A cég egy bevásárlólista-webalkalmazást indít el. A webhelyen az ügyfelek beolvashatják az elemeket a listájukról, hozzáadhatnak elemeket ahhoz, illetve frissíthetik és törölhetik annak elemeit.

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 állít be és konfigurál, hogy kezelje ezeket a problémákat, úgy dönt, hogy olyan üzemeltetési megoldást használ, amely egyszerűen, 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 egészen a globális rendelkezésre állásig megoldja a felmerülő 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 általában WebAssembly-keretrendszerek, például Blazor- és JavaScript-keretrendszerek és -kódtárak használatával készülnek. Ezek az alkalmazások HTML-, CSS-, JavaScript- és képobjektumokat tartalmaznak, és ezek alkotják az alkalmazást. 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 elválasztja a statikus eszközöket egy hagyományos webkiszolgálótól, és ehelyett a világ globálisan elosztott pontjairól szolgáltatja azokat. 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 API-végpontok kiszolgáló nélküli architektúrával vannak üzemeltetve, így egyáltalán nincs szükség teljes háttérkiszolgálóra.

Az Azure Static Web Apps modellje szerint pontosan azt kapja, amire szüksége van, se többet, se kevesebbet.

Diagram showing the Static Apps overview.

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 az Ön által kiválasztott ágat figyeli. Minden alkalommal, amikor véglegesítéseket küld le 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 szolgáltatja a webalkalmazást, míg az Azure Functions működteti a háttérbeli API-funkciókat, ami biztosítja az automatikus horizontális felskálázást, és a skálázás az API iránti igényen alapul.

Legfontosabb 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ó , amely minden adattárváltozással elindítja a buildeket és az üzembe helyezéseket.
  • 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ének megtekintésé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.

Ez a modul egy Blazor-mintaalkalmazást és egy C# nyelven írt API-t biztosít.

A feladat

Az ügyfélalkalmazás kiválasztása után a következőket fogja elvégezni:

  1. Hozza létre és futtassa a Blazor-alkalmazást.
  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 segítségével.
  5. Végül megismerheti és elindíthatja az alkalmazást.

A set of four screenshots illustrating the four sample applications.

Következő lépések

Most lehet, hogy arra gondol, hogy először az Azure-erőforrásokat kell létrehoznia, de az Azure Static Web Apps a napi munkafolyamatot tartja szem előtt. Természetesebb megközelítés, ha először a GitHubon foglalkozik a kóddal, mielőtt létrehozná az erőforrásokat az Azure-ban.