Planifier votre application web statique Azure

3 minutes

Votre objectif final est d’héberger votre application dans Azure. Azure Static Web Apps se charge pour vous du provisionnement de toutes les ressources Azure nécessaires.

Toutefois, avant de pouvoir héberger votre application, vous avez besoin de quelque chose pour générer votre application lorsque vous apportez des modifications. Ces modifications peuvent être effectuées via des commits ou des demandes de tirage sur votre dépôt. Une fonctionnalité clé d’Azure Static Web Apps est qu’il configure un workflow GitHub Actions pour générer et publier votre application.

Lorsque vous créez la ressource Azure Static Web Apps, elle crée le workflow GitHub Actions. Le workflow est déclenché immédiatement et prend en charge la création et la publication de votre application. Le workflow est également déclenché chaque fois que vous apportez une modification à la branche surveillée dans votre dépôt.

Azure Static Web Apps

Il existe deux aspects automatisés du déploiement d’une application web. Le premier provisionne les ressources Azure sous-jacentes qui composent votre application. Le second est un workflow GitHub Actions qui génère et publie votre application.

Lorsque vous publiez votre application sur le web avec Azure Static Web Apps, vous bénéficiez d’un hébergement rapide de votre application web et des API évolutives. Vous obtenez également un workflow de build et de déploiement unifié fourni par GitHub Actions.

Connecter votre instance de Static Web Apps à GitHub

Azure Static Web Apps est conçu pour héberger des applications pour lesquelles le code source réside sur GitHub. Lorsque vous créez une instance Static Web Apps, vous vous connectez à GitHub et spécifiez le dépôt contenant le code de votre application.

Vous devez également spécifier trois chemins de dossier dans votre dépôt, afin que votre application puisse être générée et déployée automatiquement :

Emplacement	Exemple d’emplacement	Description	Obligatoire
Emplacement de l’application	Client	Emplacement du code source de votre application web	Oui
Emplacement de sortie	wwwroot	Emplacement des artefacts de build de votre application	Non
Emplacement de l’API	API	Emplacement du code source de votre API	Non

Emplacement de sortie est un chemin relatif au répertoire de publication de votre application. Par exemple, considérez que nous avons une application à Client qui fournit en sortie ses ressources générées dans un dossier bin/<build profile>/<framework>/publish/wwwroot. Dans ce cas, il vous suffit de spécifier wwwroot pour cet emplacement, car le système de publication s’occupe du reste du préfixe.

Du code source aux ressources statiques avec GitHub Actions

Votre dépôt GitHub contient le code source, et non pas les ressources statiques, si bien qu’il doit être généré avant de pouvoir être publié.

Lorsque vous créez une instance Static Web Apps, Azure crée un workflow GitHub Actions dans votre dépôt. Chaque fois que vous envoyez (push) des modifications ou créez une demande de tirage sur la branche depuis laquelle vous générez, le workflow génère votre application. Ce processus transforme votre code source en ressources statiques desservies par Azure. Une fois la génération terminée, l’action déploie les ressources.

L’action GitHub est ajoutée à votre dépôt dans le dossier .github/workflows. Vous pouvez consulter ou modifier ce fichier en fonction des besoins. Les paramètres que vous entrez lorsque vous créez la ressource sont stockés dans le fichier de l’action GitHub.

API intégrée avec Azure Functions

Si votre application nécessite une API, vous pouvez l’implémenter en tant que projet Azure Functions dans votre dépôt, tandis que votre instance Static Web Apps la déploie et l’héberge automatiquement. Le workflow GitHub Actions qui génère et déploie votre application localise l’API dans votre dépôt à l’aide du nom de dossier spécifié dans le chemin d’accès de l’emplacement de l’API.

Que se passe-t-il si vous n’avez pas d’API ? Ne vous inquiétez pas. Si Azure Static Web Apps ne peut trouver une API dans le dossier spécifié, il ne publie aucune API, mais publie quand même votre application.

Étapes suivantes