Aller au contenu principal

Déployer une application statique (ex.: Angular/React/Vue)

Le déploiement d'une application statique se fait de façon sensiblement différente. Le déploiement des applications statiques JavaScript telles Angular, React, Vue (ou carrément du HTML classique) se fait via les actions CI/CD de GitLab.

Créer une application Web statique dans Azure​

  1. À l'aide de la recherche, sélectionnez le service Applications web statiques Imgur
  2. Appuyez sur Créer
    Imgur
  3. Complétez les détails et choisissez Autre pour la source du déploiement Imgur

Déployer via GitLab​

Le déploiement du projet se fait via GitLab, dès qu'il y a changement au code du repo.

Pour ce faire, il faut créer un Pipeline de CI/CD (Continuous Integration / Continuous Deployment).

Cette configuration se fait via un fichier .gitlab-ci.yml ajouté à la racine de votre projet.

  • Suivez le guide dans la documentation Microsoft: https://learn.microsoft.com/en-us/azure/static-web-apps/gitlab?tabs=react
    • À noter que l'étape Create a static web app devrait être faite
    • Notez cependant le deployment token mentionné
  • Notez que APP_PATH: '$CI_PROJECT_DIR' dans le fichier yml doit inclure le chemin vers votre projet client. Par exemple APP_PATH: '$CI_PROJECT_DIR/notre_projet/react'
  • Lorsque vous committrez le fichier, GitLab essaiera de déployer et vous pourrez accéder à l'état du déploiement. Imgur
  • Vous pouvez voir le détail d'un déploiement via les Jobs Imgur

Environnement dev vs. production​

Vous utilisez nécessairement des variables dans votre environnement de développement qui seront différentes dans votre environnement de production (ex.: l'URL de l'API).

La majeure partie des frameworks frontend possèdent une façon de gérer les différents environnements, soit via des fichiers .env, soit via des variables d'environnement.