Planera din statiska webbapp på Azure
Ditt slutgiltiga mål är att ha appen i Azure. Azure Static Web Apps tar hand om etableringen av alla nödvändiga Azure-resurser åt dig.
Innan du kan lägga upp appen behöver du något för att kunna bygga appen när du gör ändringar. Dessa ändringar kan ske via incheckningar eller pull-begäranden till din lagringsplats. En viktig funktion i Azure Static Web Apps är att ett GitHub Actions-arbetsflöde konfigureras för att skapa och publicera din app.
När du skapar Azure Static Web Apps-resursen skapas GitHub Actions-arbetsflödet. Arbetsflödet utlöses omedelbart och tar hand om att bygga och publicera din app. Arbetsflödet utlöses också varje gång du gör en ändring i den övervakade grenen på din lagringsplats.
Azure Static Web Apps
Det finns två automatiserade aspekter för att distribuera en webbapp. Den första etablerar de underliggande Azure-resurserna som utgör din app. Den andra är ett GitHub Actions-arbetsflöde som bygger och publicerar din app.
När du publicerar din app på webben med Azure Static Web Apps får du en snabb värdtjänst för din webbapp och skalbara API:er. Du får också ett enhetligt bygg- och distributionsarbetsflöde med GitHub Actions.
Ansluta Static Web Apps-instansen till GitHub
Azure Static Web Apps är utformat för att vara värd för program medan källkoden finns på GitHub. När du skapar en Static Web Apps-instans loggar du in på GitHub och anger lagringsplatsen som innehåller appens kod.
Du måste också ange tre mappsökvägar i lagringsplatsen så att din app kan skapas och distribueras automatiskt:
| Location | Exempel på plats | beskrivning | Obligatoriskt |
|---|---|---|---|
| Applats | Klient | Platsen för källkoden för din webbapp | Ja |
| Utdataplats | wwwroot | Platsen för appens byggartefakter | Nej |
| API-plats | Api | Platsen för källkoden för ditt API | Nej |
Utdataplatsen är en relativ sökväg till publiceringskatalogen för ditt program. Anta att du har en app på Client som visar skapade tillgångar i mappen bin/<build profile>/<framework>/publish/wwwroot. I det här fallet behöver du bara ange wwwroot för den här platsen eftersom publiceringssystemet tar hand om resten av prefixet.
Från källkod till statiska tillgångar med GitHub Actions
Din GitHub-lagringsplats innehåller källkod, inte statiska tillgångar, så den måste skapas innan den kan publiceras.
När du skapar en Static Web Apps-instans skapar Azure ett GitHub Actions-arbetsflöde i din lagringsplats. Varje gång du skickar ändringar eller skapar en pull-begäran mot den gren som du släpper från skapar arbetsflödet din app. Den här processen omvandlar källkoden till statiska tillgångar som Azure hanterar. När bygget är klart distribuerar åtgärden tillgångarna.
GitHub-åtgärden läggs till i mappen .github/workflows på din lagringsplats. Du kan granska eller ändra den här filen efter behov. De inställningar du anger när du skapar resursen lagras i GitHub-åtgärdens fil.
Integrerat API med Azure Functions
Om din app kräver ett API kan du implementera det som ett Azure Functions-projekt på lagringsplatsen och din Static Web Apps-instans distribuerar och är värd för den automatiskt. GitHub Actions-arbetsflödet som skapar och distribuerar din app letar upp API:et i lagringsplatsen med hjälp av namnet på den mapp som du angav i API-platssökvägen.
Vad händer om jag inte har något API? Oroa dig inte! Om Azure Static Web Apps inte kan hitta ett API i den mapp som du anger publicerar det inte ett API, men den publicerar fortfarande din app.
Nästa steg
Vad behöver du för att kunna publicera din webbapp till Azure Static Web Apps? Allt som krävs är att du har appen på din GitHub-lagringsplats.