Exercice ‒ Créer une application web statique Azure

  • 5 minutes

Dans cet exercice, vous allez créer une instance Azure Static Web Apps comprenant une action GitHub qui générera et publiera automatiquement votre application.

Créer une application web statique

Maintenant que vous avez créé votre dépôt GitHub, 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, vérifiez que vous avez activé le bac à sable en haut de cette page.

Le bac à sable Azure que vous avez activé vous permet d'utiliser les services Azure sans aucuns frais.

Installation de l’extension Azure Static Web Apps pour Visual Studio Code

  1. Accédez à Visual Studio Marketplace, puis installez l’extension Azure Static Web Apps pour Visual Studio Code.

  2. Quand l’onglet de l’extension se charge dans Visual Studio Code, sélectionnez le bouton Installer.

  3. Une fois l’installation terminée, sélectionnez Redémarrer pour mettre à jour si vous y êtes invité.

Se connecter à Azure dans Visual Studio Code

  1. Dans Visual Studio Code, connectez-vous à Azure en sélectionnant Affichage>Palette de commandes, puis en entrant Azure : Connexion.

    Important

    Connectez-vous à Azure en utilisant le même compte que celui utilisé pour créer le bac à sable. Le bac à sable fournit l’accès à un abonnement Concierge.

  2. Suivez les invites pour copier et coller le code fourni dans le navigateur web, ce qui authentifie votre session Visual Studio Code.

Sélectionner votre abonnement

  1. Ouvrez Visual Studio Code, sélectionnez Fichier > Ouvrir, puis ouvrez dans l’éditeur le dépôt que vous avez cloné sur votre ordinateur.

  2. Vérifiez que vous avez filtré vos abonnements Azure pour inclure l’abonnement Concierge en ouvrant la palette de commandes, en entrant Azure: Select Subscriptions, puis en appuyant sur Entrée.

  3. Sélectionnez Abonnement Concierge et appuyez sur Entrée.

    Capture d’écran de VS Code montrant comment filtrer par abonnement.

Créer une application web statique

  1. Ouvrez Visual Studio Code, puis sélectionnez Fichier > Ouvrir pour ouvrir dans l’éditeur le dépôt que vous avez cloné sur votre ordinateur.

  2. Dans Visual Studio Code, sélectionnez le logo Azure dans la barre d’activités pour ouvrir la fenêtre des extensions Azure.

    Capture d’écran du logo Azure dans VS Code.

    Notes

    La connexion à Azure et GitHub est obligatoire. Si vous n’êtes pas déjà connecté à Azure et à GitHub depuis Visual Studio Code, l’extension vous invite à le faire au cours du processus de création.

  3. Placez votre souris sur le titre Static Web Apps, cliquez avec le bouton droit, puis sélectionnez Créer une application web statique.

    Capture d’écran montrant où aller pour créer une application web.

  4. Entrez my-first-static-web-app, puis appuyez sur Entrée.

    Capture d’écran montrant comment créer une application web. statique.

  5. Sélectionnez votre emplacement, puis appuyez sur Entrée.

    Capture d’écran montrant comment sélectionner un abonnement.

  1. Sélectionnez l’option Angulaire, puis appuyez sur Entrée

    Capture d’écran montrant l’option Angulaire sélectionnée.

  2. Entrez /angular-app en tant qu’emplacement du code de l’application, puis appuyez sur Entrée.

    Capture d’écran montrant l’emplacement du code entré, c’est-à-dire, l’application Angular.

  3. Entrez dist/angular-app comme emplacement de sortie de build où les fichiers sont générés pour la production dans votre application, puis appuyez sur Entrée.

    Capture d’écran montrant comment entrer l’emplacement de sortie de build pour Angular.

  1. Sélectionnez l’option Réagir, puis appuyez sur Entrée

    Capture d’écran montrant l’option Personnalisé sélectionnée.

  2. Entrez /react-app en tant qu’emplacement du code de l’application, puis appuyez sur Entrée.

    Capture d’écran montrant l’emplacement du code entré, c’est-à-dire, l’application React.

  3. Entrez build comme emplacement de sortie de build où les fichiers sont générés pour la production dans votre application, puis appuyez sur Entrée.

    Capture d’écran montrant comment entrer l’emplacement de sortie de build pour React.

  1. Sélectionnez l’option Svelte, puis appuyez sur Entrée

    Capture d’écran montrant l’option Svelte sélectionnée.

  2. Entrez /svelte-app en tant qu’emplacement du code de l’application, puis appuyez sur Entrée.

    Capture d’écran montrant l’emplacement du code entré, c’est-à-dire, l’application Svelte.

  3. Entrez public comme emplacement de sortie de build où les fichiers sont générés pour la production dans votre application, puis appuyez sur Entrée.

    Capture d’écran montrant comment entrer l’emplacement de sortie de build pour Svelte.

  1. Sélectionnez l’option Vue, puis appuyez sur Entrée

    Capture d’écran montrant l’option de vue sélectionnée.

  2. Entrez /vue-app en tant qu’emplacement du code de l’application, puis appuyez sur Entrée.

    Capture d’écran montrant l’emplacement du code entré, c’est-à-dire, l’application Vue.

  3. Entrez dist comme emplacement de sortie de build où les fichiers sont générés pour la production dans votre application, puis appuyez sur Entrée.

    Capture d’écran montrant comment entrer l’emplacement de sortie de build pour Vue.

Notes

Votre référentiel peut être un peu différent de ceux que vous avez pu utiliser par le passé. Il contient quatre applications différentes dans quatre dossiers différents. Chaque dossier contient une application créée dans un framework JavaScript différent. En règle générale, vous avez une application à la racine de votre dépôt et vous spécifiez / pour le chemin d’emplacement de l’application. Il s’agit d’un bon exemple illustrant pourquoi Azure Static Web Apps vous permet de configurer les emplacements : vous obtenez le contrôle total sur la façon dont l’application est générée.

  1. Une fois l’application créée, une notification de confirmation s’affiche dans Visual Studio Code.

    Capture d’écran du code de confirmation demandant à l’utilisateur d’ouvrir des actions dans GitHub ou Afficher/Modifier la configuration.

    Lorsque le déploiement est en cours, l’extension Visual Studio Code signale l’état de la build.

    Capture d’écran de l’interface utilisateur VS Code montrant l’attente du déploiement.

  2. Vous pouvez afficher la progression du déploiement à l’aide de GitHub Actions en développant le menu Actions.

    Capture d’écran montrant comment voir la progression via GitHub Actions.

    Une fois le déploiement terminé, vous pouvez accéder directement à votre site web.

  3. Pour afficher le site web dans le navigateur, cliquez avec le bouton droit sur le projet dans l'extension Static Web Apps, puis sélectionnez Parcourir le site.

    Capture d’écran montrant comment accéder à votre site d’application web statique.

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

Notes

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. Actualisez le navigateur au bout d’une minute. L’action GitHub s’exécute automatiquement lors de la création d’Azure Static Web Apps. Si vous voyez la page de démarrage, cela signifie que l’application est toujours en cours de déploiement.