Exercice ‒ Créer une application web statique Azure

  • 5 minutes

Dans cet exercice, vous créez une instance Azure Static Web Apps comprenant un GitHub Action qui génère et publie automatiquement votre application.

Créer une application web statique

Votre dépôt GitHub étant maintenant créé, vous pouvez créer une instance Static Web Apps à partir du Portail Azure.

Ce module utilise le bac à sable (sandbox) Azure pour vous fournir un abonnement Azure gratuit et temporaire grâce auquel vous pouvez effectuer cet exercice. Avant de continuer, assurez-vous que le bac à sable est activé en haut de cette page.

  1. Connectez-vous au portail Azure en vous assurant d’utiliser le même compte pour vous connecter que celui qui vous a servi à activer le bac à sable.

  2. Dans la page d’accueil Azure, sous Services Azure, sélectionnez Créer une ressource. Le volet Créer une ressource apparaît.

  3. Dans la zone de recherche de la Place de marché, recherchez et sélectionnez Static Web App. Le volet Static Web App s’affiche.

  4. Sélectionnez Créer. Le volet Créer une application web statique apparaît. Configurez votre nouvelle application et liez-la à votre dépôt GitHub.

  5. Sous l’onglet Informations de base, entrez les valeurs suivantes pour chaque paramètre.

    Paramètre Valeur
    Détails du projet
    Abonnement Abonnement Concierge
    Groupe de ressources [Nom du groupe de ressources de bac à sable]
    Détails Static Web App
    Nom Nommez votre application. Les caractères valides sont a-z (ne respectent pas la casse), 0-9 et -.
    Plan d’hébergement
    Niveau tarifaire pour votre application Sélectionnez Gratuit.
    Azure Functions et détails de l’environnement de préproduction
    Région de l’API Azure Functions et des environnements intermédiaires Sélectionnez la région la plus proche de vous.
    Détails du déploiement
    Source Sélectionnez GitHub.
    Compte GitHub Sélectionnez Se connecter avec GitHub. Le volet Authorize Azure Static Web Apps apparaît. Sélectionnez Authorize Azure-App-Service-Static-Web-Apps. Saisissez votre mot de passe.
    Organisation Sélectionnez l’organisation dans laquelle vous avez créé le dépôt
    Référentiel my-static-blazor-app
    Branche main
    Détails de la build
    Présélections de build Blazor
    Emplacement de l’application Client
    Emplacement de l’API API
    Emplacement de sortie wwwroot

  6. Sélectionnez Vérifier + créer>Créer.

  7. Une fois le déploiement terminé, sélectionnez Accéder à la ressource. Votre volet Static Web App s’affiche.

Passer en revue l’action GitHub

À ce stade, votre instance Static Web Apps est créée dans Azure, mais votre application n’est pas encore déployée. Le GitHub Action créé par Azure dans votre dépôt s’exécute automatiquement pour déclencher la première génération et le premier déploiement de votre application, mais cela demande quelques minutes.

Vous pouvez vérifier l’état de votre action de génération et de déploiement en suivant le lien suivant pour accéder à la page Actions de votre dépôt GitHub :

Capture d’écran montrant comment parcourir pour voir la progression du workflow GitHub Actions.

Une fois que vous êtes là :

  1. Sélectionnez CI/CD Azure Static Web Apps.

  2. Sélectionnez le commit intitulé ci: add Azure Static Web Apps workflow file.

  3. Sélectionnez le lien Build and Deploy Job.

À partir de là, vous pouvez observer la progression de votre application au fur et à mesure de sa génération.

Afficher le site web

Une fois que l’instance de GitHub Actions a achevé la génération et la publication de votre application web, vous pouvez accéder à celle-ci pour la voir s’exécuter.

Sélectionnez le lien URL dans le portail Azure pour accéder à votre application dans le navigateur.

Votre application est maintenant disponible dans le monde entier, mais elle reste sur Chargement des données, car aucune donnée ou API n’existe. Vous allez ajouter l’API pour votre application web dans la section suivante.

Félicitations ! Vous avez déployé votre première application dans Azure Static Web Apps !

Remarque

Ne vous inquiétez pas si vous voyez une page web indiquant que l’application n’a pas encore été créée et déployée. Essayez d’actualiser le navigateur une minute après. L’action GitHub s’exécute automatiquement lors de la création d’Azure Static Web Apps. Par conséquent, si vous voyez la page de démarrage, l’application est toujours en cours de déploiement.

Étapes suivantes

Il manque une API pour la liste des achats dans votre application. Vous découvrez maintenant comment ajouter une API Azure Functions à votre application qui publie sur Azure, aux côtés des ressources statiques.