Planlæg din Azure Static Web App
- 5 minutter
Dit ultimative mål er at hoste din app i Azure. Azure Static Web Apps sørger for at klargøre alle de nødvendige Azure-ressourcer for dig.
Men før din app kan hostes, skal du bruge noget for at bygge din app, når du foretager ændringer. Disse ændringer kan ske via bekræftelser eller pullanmodninger til dit lager. En vigtig funktion i Azure Static Web Apps er, at den konfigurerer en GitHub-handlingsarbejdsproces til oprettelse og publicering af dit program.
Når du opretter Azure Static Web Apps-ressourcen, oprettes arbejdsprocessen For GitHub-handlinger. Arbejdsprocessen udløses med det samme og sørger for at bygge og publicere din app. Arbejdsprocessen udløses også, hver gang du foretager en ændring af den overvågede forgrening i dit lager.
Azure Static Web Apps
Der er to automatiserede aspekter ved installation af en webapp. De første klargør de underliggende Azure-ressourcer, der udgør din app. Den anden er en Arbejdsproces for GitHub-handlinger, der bygger og udgiver dit program.
Når du publicerer din app på internettet med Azure Static Web Apps, får du hurtig hosting af din webapp og skalerbare API'er. Du får også en samlet build- og udrulningsarbejdsproces, der leveres af GitHub-handlinger.
Opret forbindelse mellem din Static Web Apps-forekomst og GitHub
Azure Static Web Apps er udviklet til at hoste programmer, hvor kildekoden findes på GitHub. Når du opretter en Forekomst af Static Web Apps, skal du logge på GitHub og angive det lager, der indeholder koden for din app.
Du skal også angive tre mappestier i dit lager, så din app kan bygges og installeres automatisk:
| Sted | Eksempel på placering | Beskrivelse | Kræves |
|---|---|---|---|
| Appplacering | / | Placeringen af kildekoden til din webapp | Ja |
| Placering af appbuild-output | Dist | Placeringen af din apps buildoutput i forhold til din appplacering | Nej |
| API-placering | api | Placeringen af kildekoden for din API | Nej |
Outputtet appbuild er en relativ sti til buildoutputmappen for dit program. Vi kan f.eks. overveje, at vi har en app på my-app, der sender dens indbyggede aktiver til en my-app/dist mappe. I dette tilfælde skal du angive dist for denne placering.
Fra kildekode til statiske aktiver med GitHub-handlinger
Dit GitHub-lager indeholder kildekode, så det skal bygges, før det kan publiceres.
Når du opretter en Static Web Apps-forekomst, opretter Azure en GitHub-handlingsarbejdsproces i dit lager. Arbejdsprocessen opretter din app, hver gang du pusher ændringer eller opretter en pullanmodning i forhold til den forgrening, du har valgt at spore. Denne buildproces omdanner din kildekode til statiske aktiver, der betjenes af Azure. Når buildet er fuldført, udruller handlingen aktiverne.
GitHub-handlingen føjes til dit lager i mappen .github/arbejdsprocesser. Du kan gennemse eller redigere denne fil efter behov. De indstillinger, du angiver, når du opretter ressourcen, gemmes i Filen for GitHub-handlingen.
Integreret API med Azure Functions
Hvis din app kræver en API, kan du implementere den som et Azure Functions-projekt i dit lager. Api'en udrulles automatisk og hostes af forekomsten af Static Web Apps. Den GitHub Actions-arbejdsproces, der bygger og installerer din app, finder API'en i dit lager med navnet på den mappe, du angiver.
Du placerer typisk API-appen i en mappe med navnet api- eller funktioner, men du kan navngive den, som du foretrækker.
Hvad nu, hvis du ikke har en API? Vær ikke bekymret. Hvis Azure Static Web Apps ikke kan finde en API i den mappe, du angiver, publicerer den ikke en API, men den publicerer stadig din app.
Håndter reserveruter
Du får vist en 404-fejl, når du opdaterer siden, fordi browseren sender en anmodning til hostingplatformen om at betjene /products. Der er ingen side på serveren med navnet produkter, der at betjene. Heldigvis er det nemt at løse dette ved at oprette en reserverute. En reserverute er en rute, der svarer til alle uoverensstemmende sideanmodninger til serveren.
Azure Static Web Apps understøtter brugerdefinerede routingregler, der er defineret i en valgfri staticwebapp.config.json fil, der er placeret i appens buildoutputmappe.
Du kan konfigurere din app til at bruge regler, der implementerer en reserverute som vist i følgende eksempel, der bruger et sti jokertegn med filfilter:
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
}
}
Denne regel fortæller Azure Static Web Apps, at de skal fungere index.html, når der ikke findes en anmodning om en ressource, bortset fra de billeder og CSS-filer, der vises i udtrykket exclude.
Placering af rutefil
Azure Static Web Apps forventer, at din staticwebapp.config.json-fil som standard er i output_location. Hvis din buildproces kopierer din staticwebapp.config.json-fil til output_location, er der ikke andet, du skal gøre. For de fleste projekter er output_location relativ i forhold til app_location.
Den staticwebapp.config.json fil til dit program er placeret i mappen angular-app/src/assets.
Filen staticwebapp.config.json er placeret i mappen react-app.
Filen staticwebapp.config.json er placeret i mappen svelte-app/offentlige.
Filen staticwebapp.config.json er placeret i mappen vue-app/offentlige.
Næste trin
Så hvad har du brug for, så du kan publicere din webapp til Azure Static Web Apps? Du skal bare bruge din app i dit GitHub-lager.