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 fungerar som värd för appar som har källkoden på GitHub. När du skapar en Static Web Apps-instans loggar du in på GitHub och anger på vilken lagringsplats du vill ha koden för appen.
Du måste också ange tre mappsökvägar i lagringsplatsen så att din app kan skapas och distribueras automatiskt:
| Plats | Exempel på plats | beskrivning | Obligatoriskt |
|---|---|---|---|
| Applats | / | Platsen för källkoden för din webbapp | Ja |
| App build-utdataplats | dist | Platsen för appens build-utdata i förhållande till din appplats | Nej |
| API-plats | api | Platsen för källkoden för ditt API | Nej |
App build-utdata är en relativ sökväg till utdatakatalogen för ditt program. Anta att du har en app på my-app som visar skapade tillgångar i mappen my-app/dist. I så fall anger du dist för den här platsen.
Från källkod till statiska tillgångar med GitHub Actions
Din GitHub-lagringsplats innehåller källkod 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. Arbetsflödet skapar din app varje gång du push-överför ändringar eller skapar en pull-begäran mot den gren som du valde att spåra. Den här byggprocessen omvandlar källkoden till statiska tillgångar som hanteras av Azure. När appen har byggts klart distribueras tillgångarna av GitHub-åtgärden.
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å din lagringsplats. Ditt API distribueras och hanteras automatiskt av din Static Web Apps-instans. GitHub Actions-arbetsflödet som bygger och distribuerar appen letar reda på API:et i din lagringsplats med hjälp av det mappnamn som du har angett.
Vanligtvis placerar du API-appen i en mapp med namnet api eller functions, men du kan ge den vilket namn du vill.
Vad händer om jag inte har något API? Var inte orolig. Om Azure Static Web Apps inte hittar något API i den mapp som du har angett publiceras inget API, men däremot publiceras din app.
Hantera reservvägar
Att ett 404-felmeddelande visas när du uppdaterar sidan beror på att webbläsaren skickar en begäran till värdplattformen om att visa /products. Och om det inte finns någon sida på servern som heter products, så det går inte att visa den. Som tur är kan du enkelt åtgärda detta genom att skapa en reservväg. En reservväg är en väg som matchar alla omatchade sidbegäranden till servern.
Azure Static Web Apps stöder anpassade routningsregler som definierats i en valfri staticwebapp.config.json fil som finns i appens utdatamapp.
Du kan konfigurera din app så att den använder regler som implementerar en återställningsväg enligt följande exempel som använder en sökväg med jokertecken med filfilter:
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
}
}
Den här regeln instruerar Azure Static Web Apps att fungera index.html när en begäran om en resurs inte hittas, exklusive de bilder och CSS-filer som visas i exclude uttrycket.
Routes-filens plats
Azure Static Web Apps förväntar sig att din staticwebapp.config.json-fil är i output_location som standard. Om din byggprocess kopierar din staticwebapp.config.json-fil till output_locationfinns det inget annat du behöver göra. För de flesta projekt output_location är i förhållande till app_location.
Den staticwebapp.config.json filen för ditt program finns i mappen angular-app/src/assets.
Filen staticwebapp.config.json finns i mappen react-app.
Filen staticwebapp.config.json finns i mappen svelte-app/public.
Filen staticwebapp.config.json finns i mappen vue-app/public.
Nästa steg
Så 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.