A statikus Azure-webalkalmazás megtervezése
- 5 perc
Végső célja az alkalmazás Azure-beli üzemeltetése. Az Azure Static Web Apps gondoskodik az összes szükséges Azure-erőforrás kiépítéséről.
Ahhoz azonban, hogy az alkalmazást üzembe lehessen helyezni, szükség van rá, hogy a módosítások elvégzése során valami létrehozza az alkalmazást. Ezeket a módosításokat az adattárba küldött véglegesítésekkel vagy lekéréses kérelmekkel lehet elvégezni. Az Azure Static Web Apps egyik fő funkciója, hogy beállítson egy GitHub Actions-munkafolyamatot az alkalmazás létrehozásához és közzétételéhez.
Az Azure Static Web Apps-erőforrás létrehozásakor az létrehozza a GitHub Actions-munkafolyamatot. A munkafolyamat azonnal aktiválódik, és gondoskodik az alkalmazás létrehozásáról és közzétételéről. A rendszer emellett minden alkalommal aktiválja a munkafolyamatot, amikor módosítja a megfigyelt ágat az adattárban.
Azure Static Web Apps
A webalkalmazások üzembe helyezésének két automatizált 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.
Amikor az Azure Static Web Apps használatával teszi közzé az alkalmazást a weben, gyorsan üzemeltetheti a webalkalmazást és skálázható API-kat. Emellett egy egységes létrehozási és üzembe helyezési munkafolyamatot is használhat, amelyet a GitHub Actions biztosít.
A Static Web Apps-példány csatlakoztatása a GitHubhoz
Az Azure Static Web Apps szolgáltatást olyan alkalmazások futtatására tervezték, amelyek forráskódja a GitHubon található. Static Web Apps-példány létrehozásakor be kell jelentkeznie a GitHubba, és meg kell adnia az alkalmazás kódját tartalmazó adattárat.
Az adattárban három mappa elérési útját is meg kell adnia, hogy az alkalmazást automatikusan létre lehessen hozni és üzembe lehessen helyezni:
| Hely | Hely – példa | Leírás | Kötelező |
|---|---|---|---|
| Alkalmazás helye | / | A webalkalmazás forráskódjának helye | Igen |
| Alkalmazás buildelési kimeneti helye | Dist | Az alkalmazás buildkimenetének helye az alkalmazás helyéhez viszonyítva | Nem |
| Az API helye | API | Az API forráskódjának helye | Nem |
Az alkalmazás buildkimenete az alkalmazás buildkimeneti könyvtárának relatív elérési útja. Tegyük fel például, hogy van egy alkalmazásunk a my-app helyen, amely a my-app/dist mappában helyezi el a kimeneti létrehozási eszközeit. Ebben az esetben a dist értéket kell megadnia ehhez a helyhez.
Statikus eszközök létrehozása a forráskódból a GitHub Actions használatával
A GitHub-adattár forráskódot tartalmaz, így azt össze kell állítani a közzététel előtt.
Static Web Apps-példány létrehozásakor az Azure létrehoz egy GitHub Actions-munkafolyamatot az adattárban. A munkafolyamat minden alkalommal létrehozza az alkalmazást, amikor leküldi a módosításokat, vagy lekéréses kérelmet hoz létre a követni kívánt ágon. Ez a létrehozási folyamat statikus eszközökké alakítja a forráskódot, amelyeket az Azure kiszolgál. A létrehozás befejeződése után a művelet üzembe helyezi az eszközöket.
A GitHub Actions-művelet bekerül az adattár .github/workflows mappájába. Igény szerint áttekintheti vagy módosíthatja ezt a fájlt. Az erőforrás létrehozásakor megadott beállításokat a GitHub Actions-művelet fájljában tárolja a rendszer.
Az Azure Functions szolgáltatással integrált API
Ha az alkalmazás API-t igényel, azt Azure Functions-projektként valósíthatja meg a tárházban. Az API-t a Static Web Apps-példány automatikusan üzembe helyezi és üzemelteti. A GitHub Actions-munkafolyamat, amely létrehozza és telepíti az alkalmazást, megkeresi az API-t az adattárban a megadott mappa neve alapján.
Az API-alkalmazást általában egy api vagy functions nevű mappában kell helyezni, de bármilyen nevet adhat a mappának.
Mi a teendő, ha nem rendelkezik API-val? Ne aggódjon. Ha az Azure Static Web Apps nem talál API-t a megadott mappában, akkor API-t nem tesz közzé, de ettől függetlenül közzéteszi az alkalmazást.
A tartalék útvonalak kezelése
Azért jelenik meg 404-es hibaüzenet a lap frissítésekor, mert a böngésző arra vonatkozó kérelmet küld az üzemeltető platformnak, hogy szolgáltassa a /products lapot. A kiszolgálón nincs products nevű lap, amelyet szolgáltatni tudna. Szerencsére ez egy tartalék útvonal létrehozásával egyszerűen megoldható. A tartalék útvonalak olyan útvonalak, amelyek az összes egyezés nélküli lapkérelmet egyeztetik a kiszolgálóval.
Az Azure Static Web Apps támogatja az alkalmazás buildkimeneti mappájában található opcionális staticwebapp.config.json fájlban definiált egyéni útválasztási szabályokat.
Az alkalmazást úgy konfigurálhatja, hogy olyan szabályokat használjon, amelyek tartalék útvonalat implementálnak, ahogyan az alábbi példában látható, amely egy elérési utat használ fájlszűrővel:
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
}
}
Ez a szabály arra utasítja az Azure Static Web Appst, hogy akkor szolgáljon index.html ki, ha egy erőforrásra vonatkozó kérés nem található, kivéve a exclude kifejezésben látható lemezképeket és CSS-fájlokat.
Útvonalfájl helye
Az Azure Static Web Apps alapértelmezés szerint a staticwebapp.config.json fájlra output_location számít. Ha a buildelési folyamat átmásolja a staticwebapp.config.json fájlt a output_locationfájlba, akkor nincs más teendője. A legtöbb projekt esetében a output_locationapp_location.
Az alkalmazás staticwebapp.config.json fájlja az angular-app/src/assets mappában található.
A staticwebapp.config.json fájl a react-app mappában található.
A staticwebapp.config.json fájl a svelte-app/public mappában található.
A staticwebapp.config.json fájl a vue-app/public mappában található.
Következő lépések
Tehát mi szükséges ahhoz, hogy közzé tudja tenni a webalkalmazást az Azure Static Web Apps szolgáltatásban? Mindössze az alkalmazásra van szükség a GitHub-adattárban.