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.

    Screenshot of VS Code showing how to filter by subscription.

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.

    Screenshot of the Azure Logo in VS Code.

    Remarque

    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.

    Screenshot showing where to go to create a web app.

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

    Screenshot showing how to create a Static Web App.

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

    Screenshot showing how to select a subscription.

  6. Sélectionnez l’option Personnalisé, puis appuyez sur Entrée

    Screenshot showing the custom option selected.

  1. Sélectionnez angular-app en tant qu’emplacement du code de l’application, puis appuyez sur Entrée.

    Screenshot showing the code location entered as Angular app.

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

    Screenshot showing how to enter the build output location for Angular.

  1. Sélectionnez react-app en tant qu’emplacement du code de l’application, puis appuyez sur Entrée.

    Screenshot showing the code location entered as react app.

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

    Screenshot showing how to enter the build output location for React.

  1. Sélectionnez svelte-app en tant qu’emplacement du code de l’application, puis appuyez sur Entrée.

    Screenshot showing the code location entered as Svelte app.

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

    Screenshot showing how to enter the build output location for Svelte.

  1. Sélectionnez vue-app en tant qu’emplacement du code de l’application, puis appuyez sur Entrée.

    Screenshot showing the code location entered as Vue app.

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

    Screenshot showing how to enter the build output location for Vue

Remarque

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.

    Screenshot of the confirmation code asking the user to open actions in GitHub or View/Edit Configure.

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

    Screenshot of the VS Code UI showing waiting for deployment.

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

    Screenshot showing how to check progress 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.

    Screenshot showing how to browse to your static web app site.

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.