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 om toepassingen te hosten terwijl de broncode zich op GitHub bevindt. Wanneer u een Static Web Apps-exemplaar maakt, meldt u zich aan bij GitHub en geeft u de opslagplaats op 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:
| Locatie | Locatievoorbeeld | Beschrijving | Vereist |
|---|---|---|---|
| App-locatie | Klant | De locatie van de broncode voor uw web-app | Ja |
| Uitvoerlocatie | wwwroot | De locatie van de buildartefacten van uw app | Nee |
| API-locatie | Api | De locatie van de broncode voor uw API | Nee |
De uitvoerlocatie is een relatief pad naar de publicatiemap van uw toepassing. Stel dat we een app hebben op Client die de gebouwde activa naar een bin/<build profile>/<framework>/publish/wwwroot-map uitvoert. In dit geval hoeft u alleen op te geven wwwroot voor deze locatie, omdat het publicatiesysteem zorgt voor de rest van het voorvoegsel.
Van broncode naar statische activa met GitHub-acties
Uw GitHub-opslagplaats bevat broncode, geen statische assets, dus deze moet 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. Telkens wanneer u wijzigingen pusht of een pull-aanvraag maakt op basis van de vertakking van waaruit u vrijkomt, wordt uw app gebouwd door de werkstroom. Met dit proces wordt uw broncode omgezet in statische assets die door Azure worden gebruikt. Nadat de build is voltooid, worden de assets 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 uw app een API vereist, kunt u deze implementeren als een Azure Functions-project in uw opslagplaats en uw Static Web Apps-exemplaar deze automatisch implementeert en host. De GitHub Actions-werkstroom waarmee uw app wordt gebouwd en geïmplementeerd, zoekt de API in uw opslagplaats met behulp van de naam van de map die u hebt opgegeven in het API-locatiepad .
Wat gebeurt er als ik geen API heb? Maakt u zich geen zorgen. Als Azure Static Web Apps geen API kan vinden in de map die u aangeeft, wordt er geen API gepubliceerd, maar wordt uw app nog steeds gepubliceerd.
Volgende stappen
Wat hebt u nodig, zodat u uw web-app kunt publiceren naar Azure Static Web Apps? U hebt alleen uw app in uw GitHub-opslagplaats nodig.