Publier l’API avec GitHub Actions
Vous avez ajouté votre API à votre application web, et les deux s’exécutent localement. À présent, il est temps de publier votre API et votre application dans Azure Static Web Apps.
Quand vous avez créé l’instance Azure Static Web Apps et que vous lui avez demandé de surveiller votre branche main, une action GitHub a été générée pour vous. GitHub Action écoute les modifications apportées à la branche principale de votre référentiel, et quand elle détecte une validation ou une demande de tirage (pull request) sur main, elle génère et publie votre application.
Vous vous souvenez peut-être lorsque vous avez créé la ressource Azure Static Web Apps que vous avez spécifié l'emplacement du dossier pour votre API. Vous avez fourni la valeur par défaut de api. Toutefois, étant donné que vous n’avez pas d’API dans le api dossier à ce moment-là, Azure Static Web Apps n’a pas tenté de publier une API.
Maintenant, tout change.
Configuration de GitHub Action
Le dossier .github/workflows contient votre fichier d’action GitHub. Le fichier contient les paramètres des emplacements de votre application web, api et artefacts de génération. Les emplacements que vous avez choisis lors de la création de votre ressource Azure Static Web Apps se trouvent désormais dans ce fichier, comme illustré ici :
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
Votre api_location valeur est définie sur la valeur correcte pour pointer vers votre API dans votre api dossier.
Déclencher l’action GitHub
L’action GitHub est prête à générer et à publier votre application web et votre API une fois qu’elle détecte une modification de votre branche main. Pour déclencher l’action GitHub, vous pouvez valider directement ou créer un pull request sur la branche main. Les modifications détectées sur la branche principale déclenchent l’action GitHub pour publier l’application à la même URL pour votre site web en direct.
URL d’aperçu
Parfois, vous souhaitez voir vos modifications dans un site intermédiaire avant de publier sur le site web en direct. Azure Static Web Apps vous permet de voir une préversion de vos modifications par le biais d’URL d’aperçu. Vous pouvez créer une URL d’aperçu en créant un pull request sur la branche surveillée par votre action GitHub. Votre site web en ligne n’est pas affecté. Au lieu de cela, une nouvelle version intermédiaire de votre application est créée. Lorsque vous vérifiez votre pull request sur GitHub, vous devriez voir un lien vers la version de staging publiée dans l’onglet Conversation.
Le tableau suivant montre comment Azure Static Web Apps publie votre application vers différentes URL. Votre application publie vers une URL, tandis qu’un pull request sur la même branche publie vers une autre URL.
| Origine | Descriptif | URL |
|---|---|---|
| Branche main | URL du site web en direct | https://purple-rain-062d03304.azurestaticapps.net/ |
| Pull Request n° 5 | URL d’aperçu | https://purple-rain-062d03304-5.azurestaticapps.net/ |
Vous travaillez actuellement dans la branche api. Effectuez un pull request de votre branche API vers la branche principale. Lorsque vous créez la pull request contre la branche principale, l’action GitHub publie l’application sur une URL d’aperçu.
Une fois que le workflow a terminé la création et le déploiement de votre application, le bot GitHub ajoute un commentaire à votre pull request qui contient l'URL de l’environnement de préproduction. Vous pouvez sélectionner ce lien pour afficher les changements préparés.
Ensuite, vous créez une pull request et visitez la version mise en scène de votre application.