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 (statiska webbappar)

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:

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 på lagringsplatsen i mappen .github/workflows . 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 funktioner, men du kan ge den namnet vad 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

Du ser ett 404-fel när du uppdaterar sidan eftersom webbläsaren skickar en begäran till värdplattformen för att betjäna /products. Det finns ingen sida på servern med namnet products att tillhandahålla. 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 fil staticwebapp.config.json 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 finns i output_location som standard. Om din byggprocess kopierar dinstaticwebapp.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.

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.