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.

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.

  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 êtes connecté à votre abonnement Azure préféré en ouvrant la palette de commandes et en entrant Azure: Select Subscriptions, puis appuyez sur Entrée.

  3. Sélectionnez votre abonnement (une coche doit apparaître à côté de celle-ci), puis cliquez sur OK.

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.

    Note

    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 Angular , 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 React , puis appuyez sur Entrée.

    Capture d’écran montrant l’option React 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.

Note

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.

  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 !

Note

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.