Planifier votre application web statique Azure
- 5 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.
Applications Web statiques Azure
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 où 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 | Descriptif | Obligatoire |
|---|---|---|---|
| Emplacement de l’application | / | Emplacement du code source de votre application web | Oui |
| Emplacement de sortie de build de l’application | dist | Emplacement de sortie de build de votre application, par rapport à l’emplacement de votre application | Non |
| Emplacement de l’API | api | Emplacement du code source de votre API | Non |
La sortie de build de l’application est un chemin relatif vers le répertoire de sortie de build de votre application. Par exemple, considérez que nous avons une application à my-app qui fournit en sortie ses ressources générées dans un dossier my-app/dist. Dans ce cas, vous spécifiez dist pour cet emplacement.
Du code source aux ressources statiques avec GitHub Actions
Votre référentiel GitHub contient le code source, 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. Le workflow génère votre application chaque fois que vous envoyez des modifications ou créez une demande de tirage (pull request) sur la branche que vous avez choisie pour effectuer le suivi. Ce processus de génération transforme votre code source en ressources statiques, qui sont servies 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 référentiel. Votre API sera automatiquement déployée et hébergée par votre instance Static Web Apps. 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 que vous spécifiez.
En règle générale, vous placez l’application API dans un dossier nommé API ou fonctions, mais vous pouvez le nommer tout ce que vous préférez.
Que se passe-t-il si vous n’avez pas d’API ? Ne vous inquiétez pas. Si Azure Static Web Apps ne trouve pas d’API dans le dossier que vous indiquez, il ne publiera pas d’API, mais il publiera quand même votre application.
Prendre en charge des routes de secours
Une erreur 404 s’affiche lorsque vous actualisez la page, car le navigateur envoie une demande à la plateforme d’hébergement pour servir /products. Il n’existe aucune page sur le serveur nommé produits à servir. Heureusement, il est facile de résoudre cela en créant une route de repli. Une route de repli est une route qui correspond à toutes les demandes de page sans correspondance adressées au serveur.
Azure Static Web Apps prend en charge les règles de routage personnalisées définies dans un fichier staticwebapp.config.json facultatif situé dans le dossier de sortie de build de l’application.
Vous pouvez configurer votre application pour utiliser des règles qui implémentent un itinéraire de secours, comme indiqué dans l’exemple suivant qui utilise un caractère générique de chemin d’accès avec un filtre de fichier :
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
}
}
Cette règle indique à Azure Static Web Apps de servir index.html quand une demande de ressource est introuvable, à l’exception des images et des fichiers CSS affichés dans l’expression exclude.
Emplacement du fichier de routes
Azure Static Web Apps s’attend à ce que votre fichier staticwebapp.config.json soit dans le output_location fichier par défaut. Si votre processus de génération copie votre fichier staticwebapp.config.json dans le output_locationfichier, il n’y a rien d’autre à faire. Pour la plupart des projets, la valeur output_location est relative à la valeur app_location.
Le fichier staticwebapp.config.json de votre application se trouve dans le dossier angular-app/src/assets.
Le fichier staticwebapp.config.json se trouve dans le dossier react-app.
Le fichier staticwebapp.config.json se trouve dans le dossier svelte-app/public.
Le fichier staticwebapp.config.json se trouve dans le dossier vue-app/public.
Étapes suivantes
De quoi avez-vous donc besoin pour publier votre application web dans Azure Static Web Apps ? La seule chose dont vous avez besoin est votre application dans votre dépôt GitHub.