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. Commitez ces modifications dans la branche api et envoyez-les vers 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 : Tout commiter. Si Visual Studio Code vous invite à mettre en attente automatiquement toutes vos modifications et à les commiter directement, sélectionnez Oui.
  3. Entrez un message de commit comme api changes
  4. Ouvrez la palette de commandes en appuyant sur F1
  5. Tapez et sélectionnez Git : Envoyer (push)
  6. Si vous voyez le message La branche « api » n’a pas de branche en amont. Voulez-vous publier cette branche ?, appuyez sur le bouton OK

Créer une demande de tirage (pull request)

Vous avez envoyé (push) votre branche api vers GitHub. Vous souhaitez à présent que l’action GitHub publie votre application web et votre API sur une URL d’aperçu. L’étape suivante consiste donc à créer une demande de tirage sur la branche main.

  1. Ouvrez un navigateur

  2. Accédez à votre dépôt

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

  3. Sélectionnez le lien Demandes de tirage

  4. Sélectionnez le bouton Nouvelle demande de tirage (pull request)

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

  6. Sélectionnez la branche api dans la liste déroulante de comparaison

  7. Sélectionnez le bouton Créer une demande de tirage

  8. Là encore, sélectionnez le deuxième bouton Créer une demande de tirage

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. Procédez comme suit pour visualiser cette progression :

  1. Sélectionnez le menu Actions
  2. Dans le menu Workflows, sélectionnez l’élément de workflow Azure Static Web Apps CI/CDScreenshot showing how to find the correct workflow.
  3. Sélectionnez le lien supérieur dans la liste des exécutions d’actions.
  4. Sélectionnez le lien Build and Deploy Job.

Screenshot showing the build and deploy button on the workflow page.

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 Demandes de tirage
  2. Sélectionnez votre demande de tirage
  3. Sélectionnez le lien qui suit 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.

Screenshot showing your angular web app.

Screenshot showing your react web app.

Screenshot showing your svelte web app.

Screenshot showing your vue web app.

Étapes suivantes

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