Partager via

Déployer une application Vue dans Azure Static Web Apps

Dans cet article, vous apprenez à déployer une application Vue sur Azure Static Web Apps à l’aide du Portail Azure.

Prérequis

Ressource Notes
Abonnement Azure Si vous n’avez pas d’abonnement Azure, créez un compte d’essai gratuit.
GitHub Si vous ne possédez pas de compte GitHub, vous pouvez créer un compte gratuit.
Ressource Notes
Abonnement Azure Si vous n’avez pas d’abonnement Azure, créez un compte d’essai gratuit.
Compte Azure DevOps Si vous n’avez pas de compte GitHub, vous pouvez en créer un.

Créer un référentiel

Cet article utilise un dépôt de modèles GitHub pour vous permettre de démarrer facilement. Le modèle comprend une application de démarrage déployée sur Azure Static Web Apps.

  1. Accédez à l’emplacement suivant pour créer un nouveau dépôt :

    https://github.com/staticwebdev/vue-basic/generate

  2. Nommez votre référentiel my-first-static-web-app

  3. Sélectionnez Create repository from template (Créer un dépôt à partir du modèle).

    Capture d’écran du bouton Créer un référentiel à partir d’un modèle.

Cet article utilise un référentiel Azure DevOps pour vous faciliter le démarrage. Le référentiel comporte une application de démarrage utilisée pour le déploiement avec Azure Static Web Apps.

  1. Connectez-vous à Azure DevOps.

  2. Sélectionnez Nouveau référentiel.

  3. Dans la fenêtre Créer un projet, développez le menu Avancé, puis effectuez les sélections suivantes :

    Paramètre Valeur
    Project Entrez my-first-web-static-app.
    Visibilité Sélectionnez Privé.
    Gestion de versions Sélectionnez Git.
    Processus d'élément de travail Sélectionnez l’option la plus adaptée à vos méthodes de développement.

  4. Sélectionnez Create (Créer).

  5. Sélectionnez l’élément de menu Référentiels.

  6. Sélectionnez l’élément de menu Fichiers.

  7. Sous la carte Importer un référentiel, sélectionnez Importer.

  8. Copiez une URL de référentiel pour l’infrastructure de votre choix et collez-la dans la zone Cloner l’URL.

    https://github.com/staticwebdev/vue-basic.git

  9. Sélectionnez Importer et attendez que le processus d’importation se termine.

Créer une application web statique

Maintenant que le référentiel est créé, vous pouvez créer une application web statique à partir du Portail Azure.

  1. Accédez au portail Azure.
  2. Sélectionnez Créer une ressource.
  3. Recherchez Application Web statique.
  4. Sélectionnez Static Web Apps.
  5. Sélectionnez Créer.

Dans la section De base, commencez par configurer votre nouvelle application et liez-la à un référentiel GitHub.

Capture d’écran de la section Basics du portail Azure.

Paramètre Valeur
Abonnement Sélectionnez votre abonnement Azure.
Groupe de ressources Sélectionnez le lien Créer et entrez static-web-apps-test dans la zone de texte.
Nom Entrez my-first-static-web-app dans la zone de texte.
Type de plan Sélectionnez Gratuit.
Source Sélectionnez GitHub, puis connectez-vous à GitHub, le cas échéant.

Une fois que vous êtes connecté à GitHub, entrez les informations relatives au dépôt.

Paramètre Valeur
Organisation Sélectionnez votre organisation.
Référentiel Sélectionnez my-first-web-static-app.
Branche Sélectionnez principal.

Capture d’écran des détails du référentiel dans le portail Azure.

Remarque

Si vous ne voyez aucun référentiel :

  • Il peut être nécessaire d’autoriser Azure Static Web Apps dans GitHub. Accédez à votre référentiel GitHub, puis à Paramètres > Applications > Applications OAuth autorisées , sélectionnez Azure Static Web Apps, puis sélectionnez Octroi.
  • Vous devrez peut-être autoriser Azure Static Web Apps dans votre organisation Azure DevOps. Vous devez être propriétaire de l’organisation pour accorder des autorisations. Demandez un accès aux applications tierces via OAuth. Pour plus d’informations, consultez Autoriser l’accès aux API REST avec OAuth 2.0.

Dans la section Informations de base, commencez par configurer votre nouvelle application et liez-la à un référentiel Azure DevOps.

Paramètre Valeur
Abonnement Sélectionnez votre abonnement Azure.
Groupe de ressources Sélectionnez le lien Créer et entrez static-web-apps-test dans la zone de texte.
Nom Entrez my-first-static-web-app dans la zone de texte.
Type de plan Sélectionnez Gratuit.
Source Sélectionnez DevOps.
Organisation Sélectionnez votre organisation.
Project Sélectionnez votre projet.
Référentiel Sélectionnez my-first-web-static-app.
Branche Sélectionnez principal.

Notes

Vérifiez que la branche que vous utilisez n’est pas protégée et que vous disposez des autorisations suffisantes pour émettre une commande push. Pour vérifier, accédez à votre référentiel DevOps, accédez à Repos – >Branches, puis sélectionnez Autres options. Ensuite, sélectionnez votre branche, puis Stratégies de branche pour vous assurer que les stratégies requises ne sont pas activées.

Dans la section Détails de build, ajoutez les détails de configuration propres à votre framework front-end favori.

  1. Sélectionnez Vue.js dans la liste déroulante Présélections de build.

  2. Conservez la valeur par défaut dans la zone Emplacement de l’application.

  3. Laissez la zone Emplacement de l’API vide.

  4. Conservez la valeur par défaut dans la zone Emplacement de sortie.

Sélectionnez Revoir + créer.

Capture d’écran du bouton de création.

Remarque

Vous pouvez modifier le fichier de workflow pour changer ces valeurs après avoir créé l’application.

Sélectionnez Créer.

Capture d’écran du bouton Créer.

Sélectionnez Accéder à la ressource.

Capture d’écran du bouton Accéder à la ressource.

Voir le site web

Le déploiement d’une application statique comporte deux aspects. Le premier crée les ressources Azure sous-jacentes qui composent votre application. Le second est un workflow qui génère et publie votre application.

Avant de pouvoir accéder à votre nouveau site statique, la build de déploiement doit d’abord finir de s’exécuter.

La fenêtre Vue d’ensemble de Static Web Apps présente des liens qui vous permettent d’interagir avec votre application web.

Capture d’écran de la fenêtre de présentation d’Azure Static Web Apps.

  1. La sélection d’Exécutions d’action GitHub dans la vue d’ensemble vous permet d’accéder aux actions GitHub exécutées sur votre dépôt. Vérifiez que l’action de déploiement est terminée avant de continuer.

  2. Dès que le workflow GitHub Actions est terminé, vous pouvez sélectionner le lien d’URL pour ouvrir le site Web dans un nouvel onglet.

Une fois le flux de travail terminé, vous pouvez cliquer sur l’URL pour ouvrir le site web dans un nouvel onglet.

Nettoyer les ressources

Si vous ne prévoyez pas de continuer à utiliser cette application, vous pouvez supprimer l’instance Azure Static Web Apps en effectuant les étapes suivantes :

  1. Ouvrez le Portail Azure.
  2. Recherchez my-first-web-static-app dans la barre de recherche supérieure.
  3. Sélectionnez le nom de l’application.
  4. Sélectionnez Supprimer.
  5. Sélectionnez Oui pour confirmer l’action de suppression (cette action peut prendre quelques minutes).

Étapes suivantes

Ajouter une API à votre application