Déployer une application Blazor sur Azure Static Web Apps
Azure Static Web Apps publie un site web dans un environnement de production en générant des applications à partir d’un référentiel GitHub pris en charge par un back-end serverless. Le tutoriel suivant montre comment déployer une application Blazor WebAssembly C# qui affiche les données météorologiques retournées par une API serverless.
Remarque
Pour connaître les étapes de déploiement d’une application Blazor via Visual Studio, consultez Déployer une application Blazor sur Azure Static Web Apps.
Prérequis
- GitHub
- Compte Azure. Si vous n’avez pas d’abonnement Azure, créez un compte d’essai gratuit.
1. Créer un dépôt
Cet article utilise un dépôt de modèles GitHub pour vous permettre de démarrer facilement. Le modèle comprend une application de démarrage que vous pouvez déployer sur Azure Static Web Apps.
- Vérifiez que vous êtes connecté à GitHub et accédez à l’emplacement suivant pour créer un dépôt : https://github.com/staticwebdev/blazor-starter/generate
- Nommez votre référentiel my-first-static-blazor-app.
2. Créer une application web statique
Maintenant que le référentiel est créé, créez une application web statique à partir du portail Azure.
Accédez au portail Azure.
Sélectionnez Créer une ressource.
Recherchez Static Web Apps.
Sélectionnez Static Web Apps.
Sélectionnez Create (Créer).
Sous l’onglet Informations de base, entrez les valeurs suivantes.
Propriété Valeur Abonnement Le nom de votre abonnement Azure. Groupe de ressources my-blazor-group Nom my-first-static-blazor-app Type de plan Gratuit Région de l’API Azure Functions et des environnements intermédiaires Sélectionnez la région la plus proche de vous. Source GitHub Sélectionnez Se connecter avec GitHub et authentifiez-vous auprès de GitHub si vous y êtes invité.
Entrez les valeurs GitHub suivantes.
Propriété Valeur Organisation Sélectionnez l’organisation GitHub de votre choix. Dépôt Sélectionnez my-first-static-blazor-app. Branche Sélectionnez principal. Notes
En l’absence de dépôt, il peut être nécessaire d’autoriser Azure Static Web Apps sur GitHub. Accédez ensuite à votre référentiel GitHub, puis à Paramètres > Applications > Applications OAuth autorisées, sélectionnez Azure Static Web Apps, puis sélectionnez Octroyer. Pour les dépôts de l’organisation, vous devez être propriétaire de l’organisation pour accorder des autorisations.
Dans la section Détails de build, sélectionnez Blazor dans la liste déroulante Présélections de build. Les valeurs suivantes sont remplies.
Propriété Valeur Description Emplacement de l’application Client Dossier contenant l’application Blazor WebAssembly Emplacement de l’API Api Dossier contenant l’application Azure Functions Emplacement de sortie wwwroot Dossier dans la sortie de la build contenant l’application Blazor WebAssembly publiée Sélectionnez Vérifier + créer pour vérifier que les informations sont correctes.
Pour démarrer la création de l’application web statique et le provisionnement d’un GitHub Actions pour le déploiement, sélectionnez Créer.
Une fois le déploiement terminé, sélectionnez Accéder à la ressource.
Sélectionnez Accéder à la ressource.
3. Accéder au site web
Le déploiement d’une application statique comporte deux aspects. Le premier provisionne les ressources Azure sous-jacentes qui composent votre application. Le second est un flux de travail GitHub Actions qui génère et publie votre application.
Avant de pouvoir accéder à votre nouvelle application web statique, la build de déploiement doit d’abord finir de s’exécuter.
La fenêtre de vue d’ensemble de Static Web Apps présente des liens qui vous permettent d’interagir avec votre application web.
Sélectionnez la bannière intitulée Cliquez ici pour vérifier l’état de vos exécutions GitHub Actions afin de voir les actions GitHub en cours d’exécution sur votre dépôt. Une fois que vous avez vérifié que le travail de déploiement est terminé, vous pouvez accéder à votre site web à l’aide de l’URL générée.
Une fois le flux de travail GitHub Actions terminé, vous pouvez sélectionner l'URL pour ouvrir le site web dans un nouvel onglet.
4. Comprendre la vue d’ensemble de l’application
Les projets suivants contiennent les composants qui sont nécessaires à la création d’une application Blazor WebAssembly s’exécutant dans le navigateur pris en charge par un back-end d’API Azure Functions.
| Projet Visual Studio | Description |
|---|---|
| API | L’application Azure Functions C# implémente le point de terminaison d’API qui fournit les informations météorologiques à l’application Blazor WebAssembly. WeatherForecastFunction retourne un tableau d’objets WeatherForecast. |
| Client | Projet Blazor WebAssembly front-end. Une route de secours est implémentée pour garantir le bon fonctionnement du routage côté client. |
| Partagé | Contient les classes communes référencées par les projets API et Client, ce qui permet aux données de circuler du point de terminaison d'API vers l'application web front-end. La classe WeatherForecast est partagée entre les deux applications. |
Application web statique Blazor
Application Blazor complète.
Itinéraire de secours
L’application expose des URL telles que /counter et /fetchdata, qui correspondent à des routes spécifiques de l’application. Dans la mesure où cette application est implémentée sous forme d'application monopage, chaque route utilise le fichier index.html. Pour garantir que les requêtes de chemin retournent index.html, une route de secours est implémentée dans le fichier staticwebapp.config.json situé dans le dossier racine du projet client.
{
"navigationFallback": {
"rewrite": "/index.html"
}
}
Grâce à la configuration JSON, les requêtes vers les routes associées à l’application retournent la page index.html.
Nettoyer les ressources
Si vous ne prévoyez pas d’utiliser cette application, vous pouvez supprimer l’instance Azure Static Web Apps en effectuant les étapes suivantes :
- Ouvrez le portail Azure.
- Recherchez my-blazor-group dans la barre de recherche supérieure.
- Sélectionnez le nom du groupe.
- Sélectionnez Supprimer.
- Sélectionnez Oui pour confirmer la suppression.