Uw Azure Static Web App plannen
Het uiteindelijke doel is om uw app in Azure te hosten. Azure Static Web Apps zorgt ervoor dat alle benodigde Azure-resources voor u worden ingericht.
Voordat uw app kan worden gehost, hebt u iets nodig om uw app te bouwen terwijl u wijzigingen aanbrengt. Deze wijzigingen kunnen doorvoeringen of pull-aanvragen voor uw opslagplaats zijn. Een belangrijke functie van Azure Static Web Apps is dat er een werkstroom voor GitHub-acties wordt ingesteld voor het bouwen en publiceren van uw toepassing.
Wanneer u een Azure Static Web Apps-resource maakt, wordt er een werkstroom voor GitHub-acties gemaakt. De werkstroom wordt onmiddellijk geactiveerd en helpt u bij het bouwen en publiceren van uw app. De werkstroom wordt ook geactiveerd wanneer u een wijziging aanbrengt in de gevolgde vertakking in uw opslagplaats.
Azure Static Web Apps
Er zijn twee geautomatiseerde aspecten bij het implementeren van een web-app. De eerste is het inrichten van de onderliggende Azure-resources waaruit uw app is opgebouwd. De tweede is een werkstroom voor GitHub-acties die uw toepassing bouwt en publiceert.
Wanneer u uw app op internet publiceert met Azure Static Web Apps, krijgt u een snelle hosting van uw web-app en schaalbare API's. Ook krijgt u een uniforme bouw- en implementatiewerkstroom van GitHub-acties.
Uw Static Web Apps-instantie verbinden met GitHub
Azure Static Web Apps is ontworpen voor het hosten van toepassingen waarvan de broncode zich in GitHub bevindt. Wanneer u een Static Web Apps-instantie maakt, moet u zich aanmelden bij GitHub en de opslagplaats specificeren die de code van uw app bevat.
U moet ook drie mappaden specificeren binnen uw opslagplaats, zodat uw app automatisch kan worden gebouwd en geïmplementeerd:
| Location | Locatievoorbeeld | Beschrijving | Vereist |
|---|---|---|---|
| App-locatie | / | De locatie van de broncode voor uw web-app | Ja |
| Uitvoerlocatie voor app-build | dist | De locatie van de build-uitvoer van uw app ten opzichte van uw app-locatie | Nee |
| API-locatie | api | De locatie van de broncode voor uw API | Nee |
De uitvoer van de app-build is een relatief pad naar de uitvoermap van de build van uw toepassing. Stel dat we een app hebben op my-app die de gebouwde activa naar een my-app/dist-map uitvoert. In dit geval geeft u dist op voor deze locatie.
Van broncode naar statische activa met GitHub-acties
Uw GitHub-opslagplaats bevat broncode, en daarom moet deze worden gebouwd voordat deze kan worden gepubliceerd.
Wanneer u een Static Web Apps-instantie maakt, maakt Azure een werkstroom voor GitHub-acties in uw opslagplaats. De werkstroom bouwt uw app telkens wanneer u wijzigingen pusht of een pull-aanvraag maakt op basis van de vertakking die u hebt gekozen om bij te houden. Met dit buildproces wordt uw broncode omgezet in statische assets, die worden geleverd door Azure. Zodra het bouwen is voltooid, worden de activa geïmplementeerd door de actie.
De GitHub-actie wordt toegevoegd aan uw opslagplaats in de map .github/workflows. U kunt dit bestand indien nodig bekijken of wijzigen. De instellingen die u tijdens het maken van de resource opgeeft, worden opgeslagen in het GitHub-actiebestand.
Geïntegreerde API met Azure Functions
Als u een API nodig hebt voor uw app, kunt u deze implementeren als een Azure Functions-project in uw opslagplaats. Uw API wordt automatisch geïmplementeerd en gehost door uw Static Web Apps-exemplaar. De werkstroom voor GitHub-acties die uw app bouwt en implementeert, zoekt de API in uw opslagplaats op basis van de naam van de map die u opgeeft.
Normaal gesproken zet u de API-app in een map met de naam api of functions, maar u kunt ook een andere naam kiezen.
Wat gebeurt er als ik geen API heb? Geen zorgen. Als Azure Static Web Apps geen API kan vinden in de map die u opgeeft, wordt er geen API gepubliceerd, maar wordt uw app wel gepubliceerd.
Terugvalroutes verwerken
Bij het vernieuwen van de pagina ziet een 404-fout, omdat de browser een aanvraag naar het hosting-platform stuurt om /products weer te geven. Er is op de server geen pagina met de naam products om weer te geven. Gelukkig is dit eenvoudig op te lossen door een terugvalroute te maken. Een terugvalroute is een route die overeenkomt met alle niet-overeenkomende pagina-aanvragen voor de server.
Azure Static Web Apps ondersteunt aangepaste routeringsregels die zijn gedefinieerd in een optioneel staticwebapp.config.json-bestand in de build-uitvoermap van de app.
U kunt uw app configureren voor het gebruik van regels die een terugvalroute implementeren, zoals wordt weergegeven in het volgende voorbeeld waarin een pad-jokerteken met bestandsfilter wordt gebruikt:
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
}
}
Deze regel geeft Aan dat Azure Static Web Apps moet worden gebruikt index.html wanneer een aanvraag voor een resource niet wordt gevonden, met uitzondering van de afbeeldingen en CSS-bestanden die in de exclude expressie worden weergegeven.
Locatie van routebestand
In Azure Static Web Apps wordt verwacht dat uw bestand staticwebapp.config.json standaard in het output_location bestand staat. Als uw buildproces het bestand staticwebapp.config.json kopieert naar het output_locationbestand, hoeft u niets anders te doen. Voor de meeste projecten is het output_location relatief ten opzichte van de app_location.
Het bestand staticwebapp.config.json voor uw toepassing bevindt zich in de map angular-app/src/assets.
Het bestand staticwebapp.config.json bevindt zich in de map react-app.
Het bestand staticwebapp.config.json bevindt zich in de map svelte-app/public.
Het bestand staticwebapp.config.json bevindt zich in de map vue-app/public.
Volgende stappen
Wat heb ik nodig om mijn web-app naar Azure Static Web Apps te publiceren? U hebt alleen uw app in uw GitHub-opslagplaats nodig.