Bevezetés

  • 2 perc

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ása során az elsődleges szempont az, hogy az alkalmazás és az API biztonságosan üzemeltetett és globálisan elérhető, azok közzététele pedig automatikus legyen. 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 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ásokat gyakran hozzák létre olyan könyvtárak és keretrendszerek használatával, mint például az Angular, a React, a Svelte vagy a Vue. 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. A választható 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 model.

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. 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.

A webalkalmazás üzemeltetője és szolgáltatója az Azure. 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.

Választható API-k

Az Azure Static Web Apps ideális a tisztán statikus tartalmak kiszolgálására, de nagyszerű támogatást nyújt a mögöttes API-kat igénylő statikus webalkalmazások számára is. Statikus webalkalmazásait API-val vagy anélkül is üzemeltetheti.

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ó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.

Válasszon saját útvonalat

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 az ízek 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 feladat

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

  1. 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.
  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 az alábbi képen látható módon.

A screenshot illustrating the angular sample application.

A screenshot illustrating the react sample application.

A screenshot illustrating the svelte sample application.

A screenshot illustrating the vue sample application.

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.