Pubblicare l'API con GitHub Actions
Hai aggiunto la tua API alla tua app web e stanno entrambe girando localmente. A questo punto, è possibile pubblicare l'API e l'app in App Web statiche di Azure.
Quando hai creato l'istanza di Azure Static Web Apps e le hai chiesto di monitorare il tuo ramo main, è stata generata una GitHub Action per te. GitHub Action è in ascolto delle modifiche apportate al ramo principale del repository e, quando rileva un commit o una richiesta pull a main, compila e pubblica l'app.
È possibile ricordare quando è stata creata la risorsa App Web statiche di Azure in cui è stato specificato il percorso della cartella per l'API. È stato specificato il valore predefinito di api. Tuttavia, poiché non si dispone di un'API nella api cartella in quel momento, App Web statiche di Azure non ha tentato di pubblicare un'API.
Ora, tutto cambia.
Configurazione di GitHub Action
La cartella .github/workflows contiene il file GitHub Action. Il file contiene le impostazioni per i percorsi dell'app Web, dell'API e degli artefatti di compilazione. I percorsi scelti al momento della creazione della risorsa App Web statiche di Azure si trovano ora in questo file, come illustrato di seguito:
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
api_location è impostato sul valore corretto in modo da puntare all'API nella cartella api.
Attivare l'azione di GitHub
GitHub Actions è pronto a compilare e pubblicare l'app Web e l'API quando rileva una modifica nel ramo main. Per attivare GitHub Action, è possibile eseguire il commit diretto o creare una richiesta pull nel ramo principale . Le modifiche rilevate nel ramo principale attivano GitHub Action per pubblicare l'app nello stesso URL per il sito Web live.
URL di anteprima
In alcuni casi si vogliono visualizzare le modifiche in un sito di staging prima della pubblicazione nel sito Web live. Le app Web statiche di Azure consentono di visualizzare un'anteprima delle modifiche tramite URL di anteprima. È possibile creare un URL di anteprima creando una richiesta pull sul ramo monitorato da GitHub Action. Il tuo sito web live non subisce alcuna conseguenza. Viene invece creata una nuova versione di staging dell'app. Se si torna indietro e si controlla la richiesta pull in GitHub, verrà visualizzato un collegamento alla versione di staging pubblicata nella scheda Conversazione.
La tabella seguente mostra in che modo App Web statiche di Azure pubblicha l'app in URL diversi. L'app viene pubblicata in un URL, mentre una richiesta pull allo stesso ramo viene pubblicata in un altro URL.
| Fonte | Descrizione | URL |
|---|---|---|
| Ramo main | URL sito Web in diretta | https://purple-rain-062d03304.azurestaticapps.net/ |
| Richiesta pull n. 5 | URL di anteprima | https://purple-rain-062d03304-5.azurestaticapps.net/ |
Stai attualmente lavorando nel ramo api. Effettuare una pull request dal ramo api al ramo principale. Quando si crea il pull request contro il ramo principale, GitHub Action pubblica l'app in un URL di anteprima.
Al termine della compilazione e della distribuzione dell'app, il bot GitHub aggiunge un commento alla richiesta pull contenente l'URL dell'ambiente di preproduzione. Puoi selezionare questo collegamento per visualizzare le tue modifiche provvisorie.
Successivamente, crea una pull request e visita la versione di staging della tua app.