Créer un site web Azure Static Web Apps avec Blazor et une API serverless

Azure Static Web Apps publie un site web dans un environnement de production en compilant les applications à partir d’un dépôt GitHub, qui est 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.

Prérequis

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.

  1. 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
  2. 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.

  1. Accédez au portail Azure.

  2. Sélectionnez Créer une ressource.

  3. Recherchez Static Web Apps.

  4. Sélectionnez Static Web Apps.

  5. Sélectionnez Create (Créer).

  6. 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
  7. Sélectionnez Se connecter avec GitHub et authentifiez-vous auprès de GitHub si vous y êtes invité.

  8. 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.
  9. 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
  10. Sélectionnez Vérifier + créer pour vérifier que les informations sont correctes.

  11. 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.

  12. Une fois le déploiement terminé, sélectionnez Accéder à la ressource.

  13. Sélectionnez Accéder à la ressource.

Accédez au bouton de ressources

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.

  1. 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.

    Capture d’écran montrant la fenêtre de vue d’ensemble.

  2. Une fois le flux de travail GitHub Actions terminé, vous pouvez sélectionner l'URL pour ouvrir le site web dans un nouvel onglet.

    Capture d’écran de la page web Blazor Static Web Apps.

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 BlazorApplication 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 :

  1. Ouvrez le portail Azure.
  2. Recherchez my-blazor-group dans la barre de recherche supérieure.
  3. Sélectionnez le nom du groupe.
  4. Sélectionnez Supprimer.
  5. Sélectionnez Oui pour confirmer la suppression.

Étapes suivantes