Exercice – Publier l’API avec GitHub Actions

  • 4 minutes

Votre application web et votre API s’exécutent toutes les deux localement. À présent, il est temps de publier votre application web et votre API dans Azure Static Web Apps.

Envoyer (push) vos modifications vers GitHub

Vous avez apporté des modifications à votre API dans l’exercice précédent. Validez ces modifications dans la branche api et envoyez-les à GitHub en procédant comme suit :

  1. Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur F1
  2. Tapez et sélectionnez Git : Valider tout. Si Visual Studio Code vous invite à effectuer automatiquement l’étape de toutes vos modifications et à les valider directement, sélectionnez Oui.
  3. Entrez un message de validation tel que modifications de l'API
  4. Ouvrez la palette de commandes en appuyant sur F1
  5. Tapez et sélectionnez Git : Push
  6. Si le message « La branche 'api' n’a aucune branche en amont. Voulez-vous publier cette branche ? » s'affiche, appuyez sur le bouton OK.

Créer une demande de tirage (pull request)

Vous avez envoyé votre branche d’API à GitHub. Vous souhaitez à présent que l’action GitHub publie votre application web et votre API sur une URL d’aperçu. Par conséquent, votre étape suivante consiste à créer une pull request sur la branche principale.

  1. Ouvrir un navigateur

  2. Accédez à votre référentiel

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

  3. Sélectionnez le lien Pull requests

  4. Sélectionner le bouton New pull request

  5. Sélectionnez la branche principale dans la liste déroulante de base

  6. Sélectionnez la branche d’API dans la liste déroulante comparer

  7. Sélectionnez le bouton Créer une pull request

  8. Encore, sélectionnez le deuxième bouton Créer une pull request

Votre GitHub Action est désormais déclenchée.

Regarder l’action GitHub effectuer la génération et la publication

À partir de votre navigateur, dans votre dépôt, vous pouvez observer la progression de l’action GitHub. Affichez la progression en procédant comme suit :

  1. Sélectionnez le menu Actions
  2. Dans le menu Flux de travail, sélectionnez l’élément de workflow CI/CD Azure Static Web Appscapture d’écran montrant comment trouver le flux de travail approprié.
  3. Sélectionnez le lien supérieur dans la liste des exécutions d’actions.
  4. Sélectionnez le lien Tâche de compilation et de déploiement.

Capture d’écran montrant le bouton générer et déployer sur la page de flux de travail.

Vous pouvez voir la progression de votre action GitHub à mesure qu’elle génère et publie votre application web et l’API.

Accéder à l’URL d’aperçu

Une fois l’action GitHub terminée, vous pouvez afficher votre application en cours d’exécution dans le navigateur.

  1. Sélectionnez le menu Pull requests
  2. Sélectionnez votre demande de tirage (pull request)
  3. Sélectionnez le lien suivant le message Azure Static Web Apps : votre site intermédiaire est prêt ! Visitez-le ici

Notez que l’URL d’aperçu contient un trait d’union suivi d’un nombre. Ce nombre correspond au numéro de la demande de tirage que vous avez créée. Pour chaque demande de tirage créée, vous obtenez une URL d’aperçu unique et renouvelable. La région est également utilisée pour former l’URL d’aperçu.

Capture d’écran montrant votre application web angular.

Capture d’écran montrant votre application web React.

Capture d’écran montrant votre application web Svelte.

Capture d’écran montrant votre application web Vue.

Étapes suivantes

Félicitations, vous avez créé votre première instance Azure Static Web Apps avec une application web et une API !