Partager via

Tutoriel : déployer des référentiels GitLab sur Azure Static Web Apps

Azure Static Web Apps dispose d’options de déploiement flexibles qui lui permettent à de fonctionner avec différents fournisseurs. Dans cet article, vous déployez une application web hébergée dans GitLab pour Azure Static Web Apps.

Ce didacticiel vous apprend à effectuer les opérations suivantes :

  • Importer un référentiel dans GitLab
  • Créer une application web statique
  • Configurer le référentiel GitLab à déployer sur Azure Static Web Apps

Prérequis

Créer un dépôt

Cet article utilise un référentiel GitHub comme source pour importer du code dans un référentiel GitLab.

  1. Connectez-vous à votre compte GitLab et accédez à https://gitlab.com/projects/new#import_project

  2. Sélectionnez Référentiel par URL.

  3. Dans la zone URL du référentiel Git, entrez l’URL du référentiel pour votre choix de framework.

  4. dans la zone Slug du projet, entrez my-first-static-web-app.

  5. Sélectionnez Créer un projet et patientez pendant la configuration de votre référentiel.

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 Static Web Apps.

  4. Sélectionnez Static Web Apps.

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

  6. Dans la section Général, commencez par configurer votre nouvelle application.

    Paramètre Valeur
    Abonnement Azure Sélectionnez votre abonnement Azure.
    Groupe de ressources Sélectionnez le lien Créer et entrez static-web-apps-gitlab.
    Nom Entrez my-first-static-web-app.
    Type de plan Sélectionnez Gratuit.
    Source Sélectionnez Autre.

  7. Sélectionnez Revoir + créer.

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

  9. Sélectionnez Accéder à la ressource.

  10. Sélectionnez Gérer le jeton de déploiement.

  11. Copiez la valeur du jeton de déploiement et gardez-la dans un éditeur pour une utilisation ultérieure.

  12. Sélectionnez Fermer dans la fenêtre Gérer le jeton de déploiement.

Créer le travail de pipeline dans GitLab

Maintenant que vous disposez de votre jeton de déploiement, vous ajoutez une tâche de flux de travail responsable de la création et du déploiement de votre site lorsque vous apportez des modifications.

Ajouter un jeton de déploiement

Lorsque vous suivez les étapes suivantes, vérifiez que vous sélectionnez * pour la section environnements. Il peut sembler que la valeur par défaut soit all, mais vous devez cliquer sur la liste déroulante et sélectionner manuellement *.

  1. Accédez au référentiel dans GitLab.

  2. Sélectionnez Paramètres.

  3. Sélectionnez CI/CD.

  4. En regard de la section Variables, sélectionnez Développer.

  5. Sélectionnez Ajouter une variable.

  6. Dans la zone Clé, entrez DEPLOYMENT_TOKEN.

  7. Dans la zone Valeur, collez la valeur du jeton de déploiement que vous avez définie à l’étape précédente.

  8. Sélectionnez Ajouter une variable.

Ajouter un fichier

  1. Revenez à l’écran principal de votre référentiel dans GitLab.

  2. Sélectionnez le bouton Modifier et choisissez IDE web.

  3. Vérifiez que la branche principale est sélectionnée dans la liste déroulante Branche.

  4. Créez un nouveau fichier nommé .gitlab-ci.yml à la racine du référentiel. (Assurez-vous que l’extension de fichier est .yml.)

  5. Entrez le YAML suivant dans le fichier.

    variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/src'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

    Les propriétés de configuration suivantes sont utilisées dans le fichier .gitlab-ci.yml pour configurer votre application web statique.

    La variable $CI_PROJECT_DIR est mappée à l’emplacement du dossier racine du référentiel pendant le processus de génération.

    Propriété Description Exemple Obligatoire
    APP_PATH Emplacement du code de votre application. Entrez $CI_PROJECT_DIR/ si le code source de votre application se trouve à la racine du dépôt, ou $CI_PROJECT_DIR/app si le code de votre application se trouve dans un répertoire appelé app. Oui
    API_PATH Emplacement de votre code Azure Functions. Entrez $CI_PROJECT_DIR/api si le code de votre application se trouve dans un dossier appelé api. Non
    OUTPUT_PATH Emplacement du répertoire de sortie de compilation par rapport à APP_PATH. Si le code source de votre application se trouve dans $CI_PROJECT_DIR/app, et que le script de build place les fichiers dans le dossier $CI_PROJECT_DIR/app/build, définissez $CI_PROJECT_DIR/app/build comme valeur OUTPUT_PATH. Non
    API_TOKEN Jeton d’API pour le déploiement. API_TOKEN: $DEPLOYMENT_TOKEN Oui

  6. Validez les modifications apportées à la branche principale et fermez l’IDE web.

  7. Revenez sur votre site et sélectionnez les éléments de menu Paramètres>CI/CD>Pipelines généraux pour afficher la progression de votre déploiement.

Une fois le déploiement terminé, vous pouvez consulter votre site web.

Voir le site web

Le déploiement d’une application statique comporte deux aspects. La première étape crée les ressources Azure sous-jacentes qui composent votre application. Le second est un workflow GitLab 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 de vue d’ensemble de Static Web Apps présente des liens qui vous permettent d’interagir avec votre application web.

  1. Revenez à votre application web statique dans le portail Azure.

  2. Accédez à la fenêtre Vue d’ensemble.

  3. Sélectionnez le lien sous l’étiquette URL. Votre site web se charge dans un nouvel onglet.

Nettoyer les ressources

Si vous n’envisagez pas de continuer à utiliser cette application, vous pouvez supprimer l’instance Azure Static Web Apps et tous les services associés en supprimant le groupe de ressources.

  1. Sélectionnez le groupe de ressources static-web-apps-gitlab dans la section Vue d’ensemble.

  2. Sélectionnez Supprimer un groupe de ressources en haut de la Vue d’ensemble du groupe de ressources.

  3. Entrez le nom du groupe de ressources static-web-apps-gitlab dans la boîte de dialogue de confirmation Voulez-vous vraiment supprimer « static-web-apps-gitlab » ?.

  4. Sélectionnez Supprimer.

Le processus de suppression du groupe de ressources peut prendre quelques minutes.

Étapes suivantes

Ajouter une API

  • Last updated on