Blazor-alkalmazás üzembe helyezése az Azure Static Web Appsben

Az Azure Static Web Apps egy webhelyet tesz közzé egy éles környezetben úgy, hogy egy kiszolgáló nélküli háttérrendszer által támogatott GitHub-adattárból hoz létre alkalmazásokat. Az alábbi oktatóanyag bemutatja, hogyan helyezhet üzembe olyan C# Blazor WebAssembly alkalmazást, amely egy kiszolgáló nélküli API által visszaadott időjárási adatokat jelenít meg.

Előfeltételek

• GitHub-fiók
• Egy Azure-fiók. Ha nem rendelkezik Azure-előfizetéssel, hozzon létre egy ingyenes próbaverziós fiókot.

1. Adattár létrehozása

Ez a cikk egy GitHub-sablontárházat használ, hogy megkönnyítse az első lépéseket. A sablon tartalmaz egy kezdőalkalmazást, amelyet üzembe helyezhet az Azure Static Web Appsben.

1. Győződjön meg arról, hogy bejelentkezett a GitHubra, és lépjen a következő helyre egy új adattár létrehozásához: https://github.com/staticwebdev/blazor-starter/generate
2. Nevezze el az adattárat az én-first-static-blazor-appomnak.

2. Statikus webalkalmazás létrehozása

Az adattár létrehozása után hozzon létre egy statikus webalkalmazást az Azure Portalról.

1. Nyissa meg az Azure Portalt.

2. Válassza az Erőforrás létrehozása lehetőséget.

3. Statikus webalkalmazások keresése.

4. Válassza a Statikus webalkalmazás lehetőséget.

5. Válassza a Létrehozás lehetőséget.

6. Az Alapismeretek lapon adja meg a következő értékeket.

   Tulajdonság	Érték
   Előfizetés	Az Azure-előfizetés neve.
   Erőforráscsoport	my-blazor-group
   Név	my-first-static-blazor-app
   Terv típusa	Ingyenes
   Régió az Azure Functions API-hoz és az előkészítési környezetekhez	Válasszon ki egy Önhöz legközelebbi régiót.
   Forrás	GitHub

7. Ha a rendszer kéri, válassza a Bejelentkezés a GitHubon lehetőséget, és hitelesítés a GitHubon.

8. Adja meg a következő GitHub-értékeket.

   Tulajdonság	Érték
   Szervezet	Válassza ki a kívánt GitHub-szervezetet.
   Adattár	Válassza ki az első-static-blazor-appot.
   Ág	Válassza ki a fő elemet.

   Feljegyzés

   Ha nem lát tárházakat, lehetséges, hogy engedélyeznie kell az Azure Static Web Appst a GitHubon. Ezután keresse meg a GitHub-adattárat, és nyissa meg a Beállításalkalmazások > > engedélyezett OAuth-alkalmazásait, válassza az Azure Static Web Apps lehetőséget, majd válassza a Grant lehetőséget. A szervezeti adattárak esetében az engedélyek megadásához a szervezet tulajdonosának kell lennie.

9. A Build Részletei szakaszban válassza a Blazor lehetőséget a Build-előre beállított értékek legördülő listából, és a következő értékek lesznek feltöltve.

   Tulajdonság	Érték	Leírás
   Alkalmazás helye	Ügyfél	A Blazor WebAssembly alkalmazást tartalmazó mappa
   Az API helye	Api	Az Azure Functions-alkalmazást tartalmazó mappa
   Kimeneti hely	wwwroot	A közzétett Blazor WebAssembly alkalmazást tartalmazó buildkimenet mappája

10. Válassza a Véleményezés + Létrehozás lehetőséget , ha ellenőrizni szeretné, hogy a részletek helyesek-e.

11. A Létrehozás gombra kattintva elindíthatja a statikus webalkalmazást, és üzembe helyezhet egy GitHub Actionst.

12. Az üzembe helyezés befejezése után válassza az Ugrás az erőforrásra lehetőséget.

13. Válassza az Erőforrás megnyitása lehetőséget.

3. A webhely megtekintése

A statikus alkalmazások üzembe helyezésének két aspektusa van. Az első azokat a mögöttes Azure-erőforrásokat építi ki, amelyekből az alkalmazás áll. A második egy GitHub Actions-munkafolyamat, amely létrehozza és közzéteszi az alkalmazást.

Mielőtt továbbléphet az új statikus webalkalmazásra, az üzembe helyezési buildnek először futnia kell.

A Static Web Apps áttekintő ablaka hivatkozássorozatot jelenít meg, amelyek segítenek a webalkalmazással való interakcióban.

1. Válassza ki a megjelenő szalagcímet, kattintson ide a GitHub Actions-futtatások állapotának ellenőrzéséhez, és tekintse meg az adattáron futó GitHub Actions-műveleteket. Ha meggyőződik arról, hogy az üzembe helyezési feladat befejeződött, a létrehozott URL-címen keresztül megnyithatja a webhelyét.

   

2. A GitHub Actions munkafolyamatának befejezése után az URL-hivatkozást választva megnyithatja a webhelyet az új lapon.

   

4. Az alkalmazás áttekintése

A következő projektek együttesen alkotják azOkat a részeket, amelyek egy Azure Functions API-háttérrendszer által támogatott böngészőben futó Blazor WebAssembly-alkalmazás létrehozásához szükségesek.

Blazor statikus webalkalmazás

Tartalék útvonal

Az alkalmazás olyan URL-címeket tesz elérhetővé, mint /counter és /fetchdataamely megfelelteti az alkalmazás adott útvonalait. Mivel az alkalmazás egyetlen oldalként van implementálva, minden útvonal kiszolgálja a index.html fájlt. Annak érdekében, hogy az elérési utakra vonatkozó kérések visszatérjenek index.html, a tartalék útvonal az ügyfélprojekt gyökérmappájában található fájlban staticwebapp.config.json lesz implementálva.

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

A JSON-konfiguráció biztosítja, hogy az alkalmazás bármely útvonalára irányuló kérések visszaadják a index.html lapot.

Az erőforrások eltávolítása

Ha nem fogja használni ezt az alkalmazást, az alábbi lépések végrehajtásával törölheti az Azure Static Web Apps-példányt:

1. Nyissa meg az Azure Portalt.
2. Keresse meg a saját-blazor-csoportomat a felső keresősávon.
3. Válassza ki a csoport nevét.
4. Válassza a Törlés lehetőséget.
5. A törlési művelet megerősítéséhez válassza az Igen lehetőséget.

Következő lépések

Kapcsolódó cikkek

• Hitelesítés és engedélyezés beállítása
• Alkalmazásbeállítások konfigurálása
• Figyelés engedélyezése
• Azure CLI