Azure Static Web Apps gratuites – Configuration et déploiement expliqués par Tim Corey

Qu'est-ce que Azure Static Web Apps et pourquoi sont-elles importantes

Au début de la vidéo, Tim Corey explique que les Azure Static Web Apps vous permettent de déployer autant d'applications web que vous le souhaitez gratuitement. Il souligne que ces applications sont hébergées mondialement via les centres de données Microsoft Azure et livrées via un réseau de diffusion de contenu, ce qui assure une haute disponibilité, un équilibrage de charge et une faible latence pour les utilisateurs effectuant des requêtes HTTP.

Tim indique que ces applications web supportent l'authentification, les applications API, et l'intégration avec des API RESTful. Même dans le niveau gratuit, les Azure Static Web Apps offrent une sécurité accrue et de hautes performances sans besoin de gérer des serveurs, des machines virtuelles ou une infrastructure sous-jacente. C'est l'un des avantages importants de l'utilisation d'une plateforme en tant que service plutôt que de gérer des machines virtuelles Azure ou des serveurs sur site.

Il explique que les Azure Static Web Apps sont idéales pour les applications web front-end, telles que HTML, CSS, JavaScript, React, et Blazor WebAssembly, mais pas pour les applications nécessitant un traitement côté serveur.

Périmètre de la vidéo et contexte d'apprentissage Azure

Tim explique que cette vidéo fournit un tutoriel ciblé plutôt qu'une vue d'ensemble complète de tous les services Azure. Bien qu'Azure App Service supporte de nombreux langages, applications mobiles, applications API, et même des conteneurs Docker, cette vidéo se concentre sur un service spécifique au sein de Microsoft Azure.

Il mentionne que si les spectateurs veulent une couverture plus approfondie de sujets comme la sécurité, la gestion des coûts, et les applications critiques pour la mission, ces sujets sont couverts dans ses cours Azure. Cependant, l'objectif ici est de montrer à quelle rapidité une application web peut être créée et déployée en utilisant les Azure Static Web Apps et le déploiement continu.

Créer un dépôt GitHub pour un site web statique

Tim commence par créer un nouveau dépôt GitHub, expliquant que GitHub est gratuit et s'intègre parfaitement avec les services Azure. Ce dépôt contiendra le code source d'un simple site web statique.

Il rend le dépôt privé, ajoute un fichier README, et sélectionne un fichier .gitignore adapté à Visual Studio et Visual Studio Code. Tim clarifie que bien qu'il utilise Visual Studio Code, le même processus fonctionne avec Visual Studio.

Ce dépôt représente le point de départ pour héberger des sites web en utilisant Azure. Tim souligne que les Azure Static Web Apps déploient directement à partir du code source, rendant le déploiement continu simple et fiable.

Construire une application web HTML simple

En utilisant Visual Studio Code, Tim crée un fichier index.html, qui sert de point d'entrée pour le site web. Il utilise les raccourcis Emmet pour générer une structure HTML de base et ajoute un contenu minimal pour démontrer la fonctionnalité.

Cette étape montre comment les applications web de base peuvent être déployées sans services back-end, bases de données, ou serveurs. Tim précise que cette simplicité est intentionnelle, car les Azure Static Web Apps sont conçues spécifiquement pour les charges de travail front-end.

Une fois terminé, il valide les modifications et pousse le code source sur GitHub, déclenchant ultérieurement le pipeline de déploiement.

Création d'une application web statique Azure dans le portail Azure

Tim passe au portail Azure et crée une nouvelle ressource Static Web App. Il explique l'importance de créer un groupe de ressources, en notant que les groupes de ressources facilitent la gestion des ressources, le nettoyage des environnements, et l'évitement de coûts inutiles.

Il insiste sur le choix du niveau gratuit, expliquant que le niveau gratuit est rapide, fiable, et suffisant pour la plupart des sites web de petites entreprises et des projets personnels. Alors que les plans de service Azure App peuvent nécessiter un plan de service d'application et des frais mensuels, les Azure Static Web Apps au niveau gratuit suppriment complètement cette complexité.

Tim mentionne brièvement que son propre site web fonctionne sur les Azure Static Web Apps, démontrant l'utilisation réelle de ce service en production.

Connexion à GitHub et activation du déploiement continu

Tim connecte l'application web statique Azure à GitHub, en sélectionnant le dépôt et la branche. Il explique qu'Azure configure automatiquement un workflow GitHub Actions pour gérer le déploiement continu.

Ce workflow supprime la nécessité d'étapes de déploiement manuelles. Chaque fois que le code source change, l'application web est reconstruite et déployée automatiquement. Tim souligne que c'est une caractéristique clé des plateformes cloud modernes et l'un des principaux avantages d'utiliser Microsoft Azure pour héberger des sites web.

Jetons de déploiement et configuration de la sécurité

Tim navigue vers les paramètres du dépôt GitHub pour montrer le jeton de déploiement stocké comme un secret. Ce jeton permet une communication sécurisée entre GitHub et Azure.

Il explique que cette configuration offre une sécurité renforcée sans exiger des développeurs de configurer manuellement des identifiants. Le jeton API de l'application web statique Azure assure que seuls les workflows autorisés peuvent déployer l'application.

Visualisation du site web statique déployé

Une fois le déploiement terminé, Tim ouvre le site web en direct directement depuis le portail Azure. Le site est maintenant accessible publiquement et hébergé dans le cloud.

Il explique que ce même processus fonctionne pour d'autres frameworks front-end, car ils produisent en fin de compte des fichiers statiques qui peuvent être servis efficacement par les Azure Static Web Apps. Aucun plan de service d'application, machine virtuelle, ou serveur back-end n'est requis.

Déploiement d'une application Blazor WebAssembly

Tim démontre ensuite le déploiement d'une application autonome Blazor WebAssembly, soulignant la distinction entre les Blazor Web Apps et Blazor WebAssembly.

Il explique que Blazor WebAssembly s'exécute entièrement côté client, ce qui le rend approprié pour les Azure Static Web Apps. Les technologies côté serveur comme ASP.NET Core MVC, PHP, ou les backends Java nécessitent plutôt les Azure Web Apps.

Cette section renforce que les Azure Static Web Apps sont conçues pour les applications web client-seules.

Création et test de l'application Blazor

Avec Visual Studio, Tim crée le projet Blazor WebAssembly, sélectionne .NET 9, et active des fonctionnalités comme le support HTTPS et des applications web progressives.

Il exécute l'application localement pour confirmer son fonctionnement avant le déploiement, renforçant les meilleures pratiques pour la préparation à la production. Une fois vérifié, il crée un dépôt GitHub directement depuis Visual Studio et pousse le code source.

Déploiement de Blazor sur Azure Static Web Apps

Tim crée une autre ressource Static Web App et la connecte au dépôt Blazor. Il souligne que le workflow GitHub Actions configure automatiquement des chemins spécifiques à Blazor, tels que le répertoire de sortie.

Cela montre comment Azure supporte plusieurs langages de programmation et frameworks sans exiger de configuration manuelle. La plateforme abstrait l'infrastructure sous-jacente et la complexité de la construction.

Processus de construction et achèvement du déploiement

Tim explique que les constructions Blazor prennent plus de temps en raison des étapes de compilation et d'optimisation. Azure réduit l'application lors du déploiement, améliorant les performances.

Une fois terminé, l'application Blazor WebAssembly est en ligne, accessible mondialement, et hébergée sur l'infrastructure cloud de Microsoft Azure.

Fonctionnalités additionnelles des Azure Static Web Apps

Tim couvre brièvement d'autres fonctionnalités, y compris :

• Domaines personnalisés

• Intégration API avec sécurité intégrée

• Slots de déploiement tels que les slots de développement, de préproduction, et de production

Il explique que les APIs sont automatiquement verrouillées, empêchant les accès non autorisés et simplifiant l'intégration.

Nettoyage des ressources à l'aide de groupes de ressources

Pour conclure, Tim supprime le groupe de ressources, démontrant comment Azure permet aux développeurs de supprimer toutes les ressources associées en une fois. C'est particulièrement important lors de tests de services cloud pour éviter les coûts non intentionnels.

Il avertit que la suppression d'un groupe de ressources est permanente et ne peut être annulée.

Quand utiliser les Azure Static Web Apps — et quand ne pas le faire

Tim termine en clarifiant que les Azure Static Web Apps ne conviennent pas pour les charges de travail côté serveur, telles que les applications PHP, les applications MVC, ou les Blazor Web Apps.

Elles sont idéales pour les applications web front-end construites avec HTML, JavaScript, CSS, React, Angular, Vue, et Blazor WebAssembly. Parce que tout s'exécute côté client, ces applications peuvent être hébergées entièrement gratuitement.

Comme Tim Corey le démontre tout au long de la vidéo, les Azure Static Web Apps offrent une méthode simple, sécurisée, et entièrement gérée pour déployer des applications web modernes en utilisant Microsoft Azure — sans se soucier des serveurs, de la mise à l'échelle ou de l'infrastructure.