Megjegyzés
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhat bejelentkezni vagy módosítani a címtárat.
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhatja módosítani a címtárat.
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.
Megjegyzés
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.
- 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
- Nevezze el a tárházat my-first-static-blazor-app.
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.
Nyissa meg az Azure Portalt.
Válassza az Erőforrás létrehozása lehetőséget.
Statikus webalkalmazások keresése.
Válassza a Statikus webalkalmazás lehetőséget.
Válassza a Létrehozás lehetőséget.
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 Csomag 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 Ha a rendszer kéri, válassza a Bejelentkezés a GitHubon lehetőséget, és hitelesítés 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 ki a my-first-static-blazor-app nevű elemet. Ág Válassza ki a fő elemet. Megjegyzé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.
A Build Details szakaszban válassza a Blazor lehetőséget a Build Presets legördülő listából, és a következő értékek automatikusan kitöltődnek.
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 Kimenet helye wwwroot A közzétett Blazor WebAssembly alkalmazást tartalmazó buildkimenet mappája Válassza a Véleményezés + Létrehozás lehetőséget , ha ellenőrizni szeretné, hogy a részletek helyesek-e.
A Létrehozás gombra kattintva elindíthatja a statikus webalkalmazást, és üzembe helyezhet egy GitHub Actionst.
Az üzembe helyezés befejezése után válassza az Ugrás az erőforrásra 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 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.
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.
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.
| Visual Studio-projekt | Leírás |
|---|---|
| API | A C# Azure Functions-alkalmazás implementálja azt az API-végpontot, amely időjárási információkat 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. |
| Közös | Az API- és ügyfélprojektek által hivatkozott általános osztályokat tartalmazza, amelyek lehetővé teszik az adatok API-végpontról az előtérbeli webalkalmazásba való áramlását. Az WeatherForecast osztály mindkét alkalmazás között meg van osztva. |
Blazor statikus webalkalmazás
Másodlagos útvonal
Az alkalmazás olyan URL-címeket tesz elérhetővé, mint a /counter és a /fetchdata, amelyek az alkalmazás adott útvonalainak felelnek meg. Mivel az alkalmazás egyetlen oldalként van implementálva, minden útvonal kiszolgálja a index.html fájlt. Annak biztosítására, hogy bármely elérési útra érkező kérés a index.html elemet adja vissza, egy fallback útvonalat valósítanak meg az ügyféloldali projekt gyökérmappájában található staticwebapp.config.json 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 a index.html lapot.
Üzembe helyezés a Visual Studióból
A GitHub Actionsszel történő telepítés alternatívájaként közvetlenül a Visual Studióból is telepítheti az Azure Static Web Apps szolgáltatásba. Közzétételi profil létrehozása az Azure Static Web Appshoz:
A Visual Studio Publish felhasználói felületén válassza Cél>Azure>Adott cél>Azure Static Web Appsközzétételi profil létrehozásához.
A közzétételi profil konfigurációjában adja meg a előfizetés nevét. Jelöljön ki egy meglévő példányt, vagy válassza Új példány létrehozásalehetőséget. Amikor új példányt hoz létre az Azure Portal Statikus Webalkalmazás Létrehozása felhasználói felületén, állítsa be a Telepítési részletek>Forrás lehetőségét Egyébértékre. A folytatás előtt várja meg, amíg az üzembe helyezés befejeződik az Azure Portalon.
A közzétételi profil konfigurációjában válassza ki az Azure Static Web Apps-példányt a példány erőforráscsoportjából. A közzétételi profil létrehozásához válassza a Befejezés lehetőséget. Ha a Visual Studio a Static Web Apps (SWA) parancssori felület telepítését kéri, telepítse a parancssori felületet az utasításokat követve. Az SWA CLI-hez npm/Node.js (Visual Studio-dokumentáció) szükséges.
A közzétételi profil létrehozása után helyezze üzembe az alkalmazást az Azure Static Web Apps-példányban a közzétételi profil használatával a Közzététel gombbal.
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:
- Nyissa meg az Azure Portalt.
- Keresse meg a saját-blazor-csoportomat a felső keresősávon.
- Válassza ki a csoport nevét.
- Válassza a Törlés lehetőséget.
- A törlési művelet megerősítéséhez válassza az Igen lehetőséget.