Blazor-alkalmazás üzembe helyezése Azure Static Web Apps
Azure Static Web Apps közzétesz egy webhelyet 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
- 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árat használ, hogy megkönnyítse az első lépéseket. A sablon tartalmaz egy kezdőalkalmazást, amelyet üzembe helyezhet Azure Static Web Apps.
- Győződjön meg arról, hogy be van jelentkezve a GitHubra, és az alábbi helyre lépve hozzon létre egy új adattárat: https://github.com/staticwebdev/blazor-starter/generate
- Adja az adattárnak a my-first-static-blazor-app nevet.
2. Statikus webalkalmazás létrehozása
Most, hogy létrehozta az adattárat, hozzon létre egy statikus webalkalmazást a Azure Portal.
Nyissa meg az Azure Portal.
Válassza az Erőforrás létrehozása lehetőséget.
Keresse meg a Static Web Apps.
Válassza a Statikus webalkalmazás lehetőséget.
Válassza a Létrehozás lehetőséget.
Az Alapvető beállítások 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 Csomag típusa Ingyenes Régió Azure Functions API-hoz és előkészítési környezetekhez Válassza ki az Önhöz legközelebbi régiót. Forrás GitHub Ha a rendszer kéri, válassza a Bejelentkezés a GitHubbal lehetőséget, és végezze el a hitelesítést a GitHubon.
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 a my-first-static-blazor-app lehetőséget. Ág Válassza a fő lehetőséget. Megjegyzés
Ha nem lát adattárakat, lehetséges, hogy engedélyeznie kell Azure Static Web Apps a GitHubon. Ezután keresse meg a GitHub-adattárat, és lépjen a Beállítások > Alkalmazások > Engedélyezett OAuth-alkalmazások területre, válassza a Azure Static Web Apps, majd az Engedélyezés lehetőséget. Szervezeti adattárak esetén az engedélyek megadásához a szervezet tulajdonosának kell lennie.
A Build Details (Build részletei ) szakaszban válassza a Blazor elemet a Build Presets (Beépített készletek) legördülő listából, és a következő értékek lesznek kitöltve.
Tulajdonság Érték Leírás Alkalmazás helye Ügyfél A Blazor WebAssembly alkalmazást tartalmazó mappa API helye Api A Azure Functions alkalmazást tartalmazó mappa Kimeneti hely wwwroot A közzétett Blazor WebAssembly-alkalmazást tartalmazó buildkimenet mappája Válassza az Áttekintés + Létrehozás lehetőséget annak ellenőrzéséhez, hogy a részletek helyesek-e.
Válassza a Létrehozás lehetőséget a statikus webalkalmazás létrehozásának megkezdéséhez, és hozzon létre egy GitHub Actions az üzembe helyezéshez.
Az üzembe helyezés befejezése után válassza az Erőforrás megnyitása lehetőséget.
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 megnyithatja az új statikus webalkalmazást, az üzembe helyezési buildnek először futnia kell.
Az Static Web Apps áttekintő ablakban hivatkozássorozat jelenik meg, amelyek segítenek a webalkalmazással való interakcióban.
Válassza ki a következő szalagcímet: Kattintson ide a GitHub Actions futtatások állapotának ellenőrzéséhez, hogy a GitHub Actions futnak-e az adattáron. 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.
Ha GitHub Actions munkafolyamat befejeződött, az URL-hivatkozásra kattintva megnyithatja a webhelyet az új lapon.
4. Az alkalmazás áttekintésének ismertetése
A következő projektek együttesen alkotják azokat a részeket, amelyeket egy Azure Functions API-háttérrendszer támogat a böngészőben futó Blazor WebAssembly-alkalmazás létrehozásához.
| Visual Studio-projekt | Description |
|---|---|
| Api | A C# Azure Functions alkalmazás megvalósítja azt az API-végpontot, amely időjárási adatokat biztosít a Blazor WebAssembly alkalmazásnak. A WeatherForecastFunction objektumtömböt WeatherForecast ad vissza. |
| Ügyfél | Az előtérbeli Blazor WebAssembly projekt. Az ügyféloldali útválasztás működésének biztosítása érdekében tartalék útvonal van implementálva. |
| Megosztott | Az API- és ügyfélprojektek által hivatkozott gyakori osztályokat tartalmazza, amelyek lehetővé teszik az adatok api-végpontról az előtér-webalkalmazásba való áramlását. Az WeatherForecast osztály mindkét alkalmazás között meg van osztva. |
Blazor statikus webalkalmazás
Tartalék útvonal
Az alkalmazás olyan URL-címeket tesz elérhetővé, mint a /counter és /fetchdataa, amelyek az alkalmazás adott útvonalaihoz lesznek leképezve. Mivel ez az alkalmazás egyetlen oldalként van implementálva, minden útvonal kiszolgálja a index.html fájlt. Annak biztosítása érdekében, hogy az elérési utakra vonatkozó kérések visszakerüljenek index.html, egy tartalék útvonal lesz implementálva az staticwebapp.config.json ügyfélprojekt gyökérmappájában található fájlban.
{
"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 az index.html oldalt.
Az erőforrások eltávolítása
Ha nem fogja használni ezt az alkalmazást, az alábbi lépésekkel törölheti a Azure Static Web Apps példányt:
- Nyissa meg az Azure Portalt.
- Keresse meg a my-blazor-group kifejezést a felső keresősávon.
- Válassza ki a csoport nevét.
- Válassza a Törlés elemet.
- Válassza az Igen lehetőséget a törlési művelet megerősítéséhez.