Exercice – Démarrer

  • 7 minutes

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

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.

Conseil

Si vous rencontrez des problèmes avec vos dépendances de nœud, vérifiez que Node Version Manager est installé et que vous pouvez basculer vers une version antérieure.

Créer un dépôt

Maintenant, créez un référentiel à l’aide d’un modèle de référentiel GitHub. Une série de modèles est disponible, chacun contenant une application de démarrage générée avec un framework front-end différent.

  1. Accédez à la page créer à partir d’un modèle pour le référentiel de modèles.

    • Si vous obtenez une erreur 404 Page introuvable, connectez-vous à GitHub, puis réessayez.

  2. Si vous êtes invité à indiquer le Propriétaire, choisissez l’un de vos comptes GitHub.

  3. Nommez votre référentiel my-static-web-app-authn.

  4. Sélectionnez Créer un référentiel à partir du modèle.

Cloner votre application localement

Vous venez de créer un dépôt GitHub nommé my-static-web-app-authn dans votre compte GitHub. Ensuite, vous allez cloner ce dépôt et exécuter le code localement sur votre ordinateur.

  1. Ouvrez un terminal sur votre ordinateur.

  2. Commencez par cloner le dépôt GitHub sur votre ordinateur.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-authn

  3. Accédez au dossier de votre code source.

    cd my-static-web-app-authn

Configurer le partage CORS localement

Vous n’avez pas à vous soucier du partage CORS quand vous publiez sur Azure Static Web Apps. Azure Static Web Apps configure automatiquement votre application afin qu’elle puisse communiquer avec votre API sur Azure à l’aide d’un proxy inverse. Toutefois, en cas d’exécution locale, vous devez configurer le partage CORS afin de permettre à votre application web et à l’API de communiquer.

À présent, indiquez à Azure Functions d’autoriser votre application web à adresser des requêtes HTTP à l’API sur votre ordinateur.

  1. Créez un fichier nommé api/local.settings.json.

  2. Ajoutez le contenu suivant au fichier :

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Notes

Le fichier local.settings.json est répertorié dans le fichier .gitignore , ce qui empêche l’envoi (push) de ce fichier vers GitHub. Comme vous pouvez stocker des secrets dans ce fichier, vous ne souhaitez pas le voir dans GitHub. C’est la raison pour laquelle vous avez dû créer le fichier lorsque vous avez créé votre dépôt à partir du modèle.

Exécuter l’API

Le dossier api contient le projet Azure Functions avec les points de terminaison HTTP pour l’application web. Commencez par exécuter l’API localement en procédant comme suit :

Notes

Veillez à installer Azure Functions Core Tools qui vous permettra d’exécuter Azure Functions localement.

  1. Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur F1.

  2. Entrez et sélectionnez Terminal : Créer un terminal intégré.

  3. Accédez au dossier d’API :

    cd api

  4. Exécutez l’application Azure Functions localement :

    func start

Exécuter l’application web

  1. Accédez ensuite au dossier de votre framework front-end préféré comme suit :

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  2. Installez à présent les dépendances de l’application.

    npm install

  3. Enfin, exécutez l’application cliente front-end.

    npm start

    npm start

    npm run dev

    npm run serve

Naviguer jusqu’à votre application

Il est temps de voir votre application s’exécuter localement. Chaque application front-end s’exécute sur un port différent.

  1. Cliquez sur le lien pour accéder à votre application.

  1. Accédez à http://localhost:4200.

    Capture d’écran montrant l’interface utilisateur de votre application web Angular.

  1. Accédez à http://localhost:3000.

    Capture d’écran montrant l’interface utilisateur de votre application web React.

  1. Accédez à http://localhost:5000.

    Capture d’écran montrant l’interface utilisateur de votre application web Svelte.

  1. Accédez à http://localhost:8080.

    Capture d’écran montrant l’interface utilisateur de votre application web Vue.

Votre application doit afficher une liste de produits.

  1. Maintenant, arrêtez votre application en cours d’exécution en appuyant sur Ctrl-C dans le terminal.

Vous avez généré votre application et celle-ci s’exécute localement dans votre navigateur.

Ensuite, vous allez publier votre application dans Azure Static Web Apps.

Créer une application web statique

Maintenant que vous avez créé votre référentiel GitHub, vous pouvez créer une instance Static Web Apps à l’aide de l’extension Azure Static Web Apps pour Visual Studio Code.

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

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

  2. Lorsque l’onglet extension se charge dans Visual Studio Code, sélectionnez Installer.

  3. Une fois l’installation terminée, sélectionnez Recharger.

Se connecter à Azure dans Visual Studio Code

  1. Dans Visual Studio Code, connectez-vous à Azure en sélectionnant Afficher> lapalette de commandes et 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électionnez votre abonnement

  1. Ouvrez Visual Studio Code, puis sélectionnez Ouvrir > le fichier pour ouvrir le référentiel que vous avez cloné sur votre ordinateur dans l’éditeur.

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

  3. Sélectionnez Abonnement Concierge, puis appuyez sur Entrée.

    Capture d’écran montrant comment filtrer par abonnement.

Créer une application web statique avec Visual Studio Code

  1. Ouvrez Visual Studio Code, puis sélectionnez Ouvrir > le fichier pour ouvrir le référentiel que vous avez cloné sur votre ordinateur dans l’éditeur.

  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 l’étiquette Static Web Apps , puis sélectionnez + (signe plus).

    Capture d’écran montrant le nom de l’application tapé.

  4. Lorsque la palette de commandes s’ouvre en haut de l’éditeur, sélectionnez Abonnement Concierge, puis appuyez sur Entrée.

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

  5. Entrez my-static-web-app-authn, puis appuyez sur Entrée.

    Capture d’écran montrant comment créer Static Web Apps.

  6. Sélectionnez la région la plus proche de vous, puis appuyez sur Entrée.

    Capture d’écran montrant la sélection de l’emplacement.

  7. Sélectionnez l’option d’infrastructure correspondante, puis appuyez sur Entrée.

  1. Sélectionnez angular-app comme emplacement pour le code de l’application, puis appuyez sur Entrée.

    Capture d’écran montrant l’emplacement du code de l’application Angular.

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

    Capture d’écran montrant le chemin des fichiers d’application Angular.

  1. Sélectionnez react-app comme emplacement pour le code de l’application, puis appuyez sur Entrée.

    Capture d’écran montrant l’emplacement du code de l’application React.

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

    Capture d’écran montrant le chemin des fichiers d’application React.

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

    Capture d’écran montrant l’emplacement du code de l’application Svelte.

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

    Capture d’écran montrant le chemin des fichiers d’application Svelte.

  1. Sélectionnez vue-app comme emplacement pour le code de l’application, puis appuyez sur Entrée.

    Capture d’écran montrant l’emplacement du code de l’application Vue.

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

    Capture d’écran montrant le chemin des fichiers d’application 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 montrant la fenêtre contextuelle Ouvrir les 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.

:::image type="content" source="../media/extension-waiting-for-deployment.png" alt-text="Screenshot showing the waiting for deployment button.":::

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

    Capture d’écran montrant le menu GitHub Actions dans VS Code.

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

  2. 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 le bouton Parcourir le site.

Félicitations ! Vous avez déployé votre 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 ni 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.

Tirage (pull) des modifications de GitHub

Tirez (pull) les dernières modifications depuis GitHub pour récupérer le fichier de workflow créé par Azure Static Web Apps :

  1. Ouvrez la palette de commandes en appuyant sur F1.

  2. Entrez et sélectionnez Git : Tirer, puis appuyez sur Entrée.

Étapes suivantes

Ensuite, vous allez apprendre à intégrer l’authentification des utilisateurs dans votre application.