Esercizio - Pubblicare l'API con GitHub Actions

  • 4 minuti

L'app Web e l'API sono entrambe in esecuzione in locale. È ora possibile pubblicare l'app Web e l'API in App Web statiche di Azure.

Eseguire il push delle modifiche in GitHub

Sono state apportate modifiche all'API nell'esercizio precedente. Eseguire il commit di tali modifiche nel ramo api ed eseguirne il push in GitHub seguendo questa procedura:

  1. In Visual Studio Code aprire il riquadro comandi premendo F1
  2. Digitare e selezionare Git: Commit All. Se Visual Studio Code richiede di preparare automaticamente tutte le modifiche ed eseguirne il commit direttamente, selezionare Sì.
  3. Immettere un messaggio di commit, ad esempio le modifiche api
  4. Aprire il riquadro comandi premendo F1
  5. Digitare e selezionare Git: Push
  6. Se viene visualizzato il messaggio Il ramo 'api' non ha un ramo upstream. Vuoi pubblicare questo ramo? premere il pulsante OK

Creare una richiesta pull

Hai eseguito il push del branch api su GitHub. Si vuole ora che GitHub Actions pubblichi l'app Web e l'API in un URL di anteprima. Il passaggio successivo consiste quindi nel creare una richiesta pull contro il ramo principale.

  1. Aprire un browser

  2. Passare al repository

    https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

  3. Selezionare il collegamento Richieste pull

  4. Selezionare il pulsante Nuova richiesta pull

  5. Selezionare il ramo principale dall'elenco a discesa di base

  6. Selezionare il ramo api dall'elenco a discesa compare

  7. Selezionare il pulsante Crea richiesta pull

  8. Seleziona nuovamente il secondo pulsante Crea richiesta di pull

GitHub Action è ora attivato.

Osservare GitHub Actions compilare e pubblicare l'app

È possibile restare nel browser nel repository e monitorare lo stato di GitHub Actions. Visualizzare lo stato di avanzamento seguendo questa procedura:

  1. Selezionare il menu Azioni
  2. Nel menu Flussi di lavoro, selezionare la voce del flusso di lavoro Azure Static Web Apps CI/CDScreenshot che mostra come trovare il flusso di lavoro corretto.
  3. Selezionare il collegamento in alto nell'elenco delle esecuzioni di azioni.
  4. Selezionare il collegamento Build and Deploy Job.

Screenshot che mostra il pulsante di compilazione e distribuzione nella pagina del flusso di lavoro.

È possibile visualizzare lo stato di GitHub Actions durante la compilazione e la pubblicazione dell'app Web e dell'API.

Passare all'URL di anteprima

Al termine dell'azione GitHub, è possibile visualizzare l'app in esecuzione nel browser.

  1. Selezionare il menu Richieste pull
  2. Selezionare la richiesta pull
  3. Selezionare il collegamento che segue il messaggio App Web statiche di Azure: Il tuo sito di staging è pronto! Visitalo qui

Si noti che l'URL di anteprima contiene un trattino seguito da un numero. Il numero corrisponde al numero della richiesta pull creata. Per ogni richiesta pull creata, si ottiene un URL di anteprima univoco e ripetibile. L'area viene usata anche per formare l'URL di anteprima.

Screenshot che mostra l'app Web Angular.

Screenshot che mostra la tua applicazione web React.

Screenshot che mostra l'app Web Svelte.

Screenshot che mostra l'app Web Vue.

Passaggi successivi

È stata creata la prima istanza di App Web statiche di Azure con un'app Web e un'API.