Déployer un site statique Vite

Bienvenue dans ma veille technologique sur le serveur de développement Vite. Dans l'article de cette semaine, nous verrons comment compiler une application Web statique Vite et comment la déployer sur GitLab Pages avec l'aide d'un pipeline.

Compiler et tester localement

Avant de déployer son application Vite sur GitLab Pages ou tout autre service d'hébergement, il est préférable de la tester localement afin de s'assurer que celle-ci fonctionne optimalement. Pour ce faire, il faut tout d'abord s'assurer que deux scripts importants se retrouvent dans le fichier package.json.

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

S'ils n'y sont pas, il sera important de les rajouter pour les prochaines étapes.

Ensuite, on peut compiler l'application avec la commande npm run build. Cela va créer le dossier dist à la racine du répertoire du projet Vite et vous pourrez, si vous le souhaitez, déployer ce dossier sur la plateforme d'hébergement de votre choix. Cependant, si vous déployez seulement ce dossier vous ne profiterez pas des fonctionnalités d'intégration et de déploiement continues offertes par certaines plateformes d'hébergement.

Par la suite, pour tester l'application compilée localement, on utilisera la commande npm run preview et celle-ci devrait être accessible à l'adresse localhost et au port par défaut 4173. Si vous souhaitez utiliser un port différent, celui-ci peut être spécifié dans les scripts du fichier package.json. Mais sachez que la commande preview ne doit être utilisée qu'à des fins de tests et jamais en production.

{
  "scripts": {
    ...
    "preview": "vite preview --port 8080"
  }
}

Si tout est fonctionnel sur votre site, vous pouvez alors passer à l'étape du déploiement.

Déployer sur GitLab Pages

Pour commencer, j'assume que votre application Vite est déjà placée dans un dépôt GitLab, car l'utilisation de Git ne fait pas partie du sujet de cet article. Avant de passer à la configuration du pipeline, vous allez devoir modifier ou ajouter une ligne au fichier vite.config.js. À cette ligne, vous allez spécifier le nom de votre dépôt pour que l'application puisse aller chercher le code source au bon endroit.

export default {
    base: '/NOM_DE_VOTRE_DÉPÔT/'
};

Après, il faudra créer un fichier à la racine du dépôt appelé .gitlab-ci.yml. Ce fichier contiendra toutes les instructions nécessaires à GitLab pour déployer l'application Vite lorsqu'un nouveau commit sera envoyé sur le dépôt. Ceci est un exemple de fichier de déploiement très basique pour une application Vite et vous pouvez le personnaliser selon les besoins de votre application, mais je ne m'étendrai pas dessus, car ce n'est pas le sujet de cet article.

image: node:latest
pages:
  stage: deploy
  cache:
    key:
      files:
        - package-lock.json
      prefix: npm
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
    - cp -a dist/. public/
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

Source: Deploying a Static Site

Selon vos besoins, vous pouvez spécifier une version de Node.js qui sera utilisée pour le déploiement. Dans mon cas, la version la plus récente fera l'affaire. Dans les scripts qui seront exécutés, on peut voir quelques commandes familières comme npm install qui télécharge et installe chacune des dépendances nécessaires à l'application et npm run build qui fait la compilation du code source. La dernière commande cp -a dist/. public/ copie le dossier dist généré par la commande précédente dans le dossier public pour le rendre accessible publiquement sur GitLab Pages.

Afin que l'application fonctionne correctement, j'ai dû décocher le paramètre « Utiliser un domaine unique » dans Déploiement/Pages afin que l'URL de mon site se termine par une barre oblique et le nom de mon dépôt. Cela fait en sorte que toutes les ressources de l'application soient disponibles à l'adresse définie précédemment dans vite.config.js.

Si tout s'est bien passé lors du pipeline, votre site devrait maintenant être déployé et accessible à l'adresse générée dans la section « Déploiements » de GitLab Pages.

Références

1. Vite. "Deploying a Static Site". Consultée le 13 mars 2025. https://vite.dev/guide/static-deploy.html