Bevezetés

  • 4 perc

Eset

A cég egy bevásárlólista-webalkalmazást indít el. A webhelyen az ügyfelek beolvashatják az elemeket (például élelmiszerek és háztartási eszközök) a listájukról, hozzáadhatnak elemeket ahhoz, illetve frissíthetik és törölhetik annak elemeit.

Az ügyfelek adatvédelme érdekében a webhelynek és az API-nak biztonságosnak kell lennie. A világ minden táján lesznek felhasználói, és Ön azt szeretné, hogy mindegyikük nagyszerű élményben részesüljön. Olyan megoldást szeretne, amely a lehető legtöbb infrastrukturális munkát eltávolítja, beleértve a buildelést és a közzétételt is, hogy a funkciókra és a felhasználói élményre összpontosítson.

Üzembe helyezheti a webes objektumokat a felhőtárhelyen, létrehozhatja és hozzárendelheti saját SSL-tanúsítványát, létrehozhatja az API-t egy felhőkiszolgálón, létrehozhat egy fordított proxyt, amely lehetővé teszi, hogy az alkalmazás hívásokat kezdeményezz az API-hoz, globálisan eloszthassa az alkalmazást, és saját CI/CD-folyamatot állítson be.

Az Azure Static Web Apps használatával mindezeket beépített képességekkel végezheti el.

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. Hagyományos webkiszolgálói architektúra használatakor ezeket a fájlokat a szükséges API-végpontok mellett egyetlen kiszolgáló szolgáltatja.

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 az elosztás a fájlok sokkal gyorsabb szolgáltatását teszi lehetővé, mivel a fájlok fizikailag közelebb vannak a felhaszná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.

Képernyőkép a Static Apps áttekintéséről.

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.

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. Így statikus webalkalmazásait API-val vagy anélkül is üzemeltetheti.

A modul gyakorlataiban az Ön által preferált webes keretrendszerrel helyezhet üzembe egy alkalmazást.

Feljegyzés

Ebben a modulban API nélkül fog üzembe helyezni egy alkalmazást. A következő modullal kapcsolatos információkért tekintse meg az utolsó egység Következő lépések szakaszát, ahol egy API-t fog üzembe helyezni az alkalmazás mellett.

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ó , ahol az adattár módosításai aktiválják 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éhez.

Tanulási célkitűzések

Ebben a modulban webalkalmazást fog létrehozni, módosítani és üzembe helyezni 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 kiindulási kód tartalmazza a négy alkalmazást, amelyet használni fog.

├ angular-app  👈 The Angular client app
├ 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:

  • Az előtér-alkalmazás létrehozása és futtatása.
  • 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.
  • Az alábbiak szerint megismerheti és elindíthatja az alkalmazást.

Egy képernyőkép, amely az Angular minta-alkalmazást ábrázolja.

Képernyőkép a react mintaalkalmazásról.

Képernyőkép a svelte mintaalkalmazásról.

Képernyőkép a Vue mintaalkalmazásról.

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.