De API publiceren met GitHub Actions
U hebt uw API toegevoegd aan uw web-app en ze worden beide lokaal uitgevoerd. Nu is het tijd om uw API en uw app te publiceren naar Azure Static Web Apps.
Toen u het Azure Static Web Apps-exemplaar maakte en vroeg om uw hoofd- branch te bekijken, werd er een GitHub-actie voor u gegenereerd. De GitHub Action luistert naar wijzigingen in de hoofdbranch van uw opslagplaats en wanneer er een doorvoer of een pull-aanvraag naar de hoofdmap wordt gedetecteerd, wordt uw app gebouwd en gepubliceerd.
Misschien herinnert u zich nog dat u bij het maken van de Azure Static Web Apps-resource de maplocatie voor uw API hebt opgegeven. U hebt de standaardwaarde van api. Omdat u echter op dat moment geen API in de api map hebt, heeft Azure Static Web Apps niet geprobeerd een API te publiceren.
Nu verandert alles.
GitHub Action-configuratie
De map .github/workflows bevat uw GitHub Action-bestand. Het bestand bevat de instellingen voor de locaties van uw web-app, API en buildartefacten. De locaties die u hebt gekozen bij het maken van uw Azure Static Web Apps-resource, bevinden zich nu in dit bestand, zoals hier wordt weergegeven:
app_location: 'angular-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist/angular-app' # Built app content directory - optional
app_location: 'react-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'build' # Built app content directory - optional
app_location: 'svelte-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'public' # Built app content directory - optional
app_location: 'vue-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist' # Built app content directory - optional
Uw api_location waarde wordt ingesteld op de juiste waarde om naar uw API in uw api map te verwijzen.
De GitHub-actie activeren
De GitHub Action is klaar om uw web-app en API te bouwen en te publiceren zodra er een wijziging in uw hoofdbranch wordt gedetecteerd. Als u de GitHub Action wilt activeren, kunt u rechtstreeks doorvoeren of een pull-aanvraag maken naar de hoofdbranch. Wijzigingen die worden gedetecteerd op de hoofd- branch activeren de GitHub-actie om de app te publiceren op dezelfde URL voor uw livewebsite.
Voorbeeld-URL's
Soms wilt u uw wijzigingen op een staging site zien voordat u deze naar de live-website publiceert. Met Azure Static Web Apps kunt u een voorbeeld van uw wijzigingen bekijken via preview-URL's. U kunt een preview-URL maken door een pull request te maken voor de vertakking die uw GitHub Action in de gaten houdt. Uw livewebsite wordt niet beïnvloed. In plaats daarvan wordt een nieuwe faseringsversie van uw app gemaakt. Als u teruggaat en uw pull-aanvraag controleert op GitHub, ziet u een koppeling naar de faseringsversie die is gepost op het tabblad Gesprek.
In de volgende tabel ziet u hoe Azure Static Web Apps uw app publiceert naar verschillende URL's. Uw app publiceert naar één URL, terwijl een pull-aanvraag naar dezelfde vertakking naar een andere URL publiceert.
| Bron | Beschrijving | URL |
|---|---|---|
| hoofdtak | URL van de live website | https://purple-rain-062d03304.azurestaticapps.net/ |
| Pull request #5 | Voorbeeld-URL | https://purple-rain-062d03304-5.azurestaticapps.net/ |
U werkt momenteel in de API branch. Maak een pull request van uw API-branch naar de hoofdbranch. Wanneer u de pull request maakt voor de hoofdvertakking, publiceert de GitHub Action de app op een preview-URL.
Zodra de werkstroom klaar is met het bouwen en implementeren van uw app, voegt de GitHub-bot een opmerking toe aan uw pull-aanvraag die de URL van de preproductieomgeving bevat. U kunt deze koppeling selecteren om uw gefaseerde wijzigingen te bekijken.
Vervolgens maakt u een pull-aanvraag en gaat u naar de gefaseerde versie van uw app.