Construire et déployer automatiquement une application Vue.js sur un serveur à l’aide de GitLab CI/CD

Ici nous utiliserons un serveur CentOS et un projet en Vue.js basique sur Gitlab.

Prérequis: Sur le serveur npm et node doivent être installer.

Installation de Node.js sur CentOS (Version 16)

Télécharger pour Linux (x64) la Version 16.15.0 LTE de node

curl -O https://nodejs.org/dist/v16.15.0/node-v16.15.0-linux-x64.tar.xz

Décompresser node-v16.15.0-linux-x64.tar.xz

tar xvf node-v16.15.0-linux-x64.tar.xz

Renommer node-v16.15.0-linux-x64 en node

mv node-v16.15.0-linux-x64 node

Créer un dossier bin si absent

mkdir bin

Copier le binaire de node dans bin

sudo cp node/bin/node bin

Entrer dans le répertoire bin

cd bin

Créer un lien symbolique pour npm

sudo ln -s ../node/lib/node_modules/npm/bin/npm-cli.js npm

Vérifier si l’installation s’est bien passer en vérifiant les versions installer

node -v && npm -v

Vous aurez un affichage comme suit

v16.15.0
8.5.5

8.5.5 correspond à la version de npm installer et v16.15.0 à celle de node.

Création d’un Gitlab-runner pour exécuter nos pipeline sur notre serveur.

• Entrez l’URL de votre instance GitLab
• Saisissez le jeton que vous avez obtenu pour inscrire le coureur
• Saisissez une description pour le coureur. Vous pourrez modifier cette valeur ultérieurement dans l’interface utilisateur de GitLab (ex: Build and deploy vuejs project runner)
• Saisissez les tags associées au runner, séparées par des virgules. Vous pourrez modifier cette valeur ultérieurement dans l’interface utilisateur de GitLab (ex: vuejs).
• Saisissez toute note d’entretien facultative pour le coureur (RAS)
• Fournir l’exécuteur du runner. Pour la plupart des cas d’utilisation, entrez shell

Création de la pipeline gitlab CI/CD

stages:          # List of stages for jobs, and their order of execution
  - build

build-job:       # This job runs in the build stage, which runs first.
  stage: build
  script:
    - npm install
    - npm run build
    - ls dist
    - cd dist
    - cp -r * /home/itnet/deploy_test
  artifacts:
    paths:
      - dist/
    expire_in: 1 hour
  tags:
    - vuejs

Dans cette pipeline on nous avons une stage build qui contient une seule tache build-job où nous avons un script qui build le projet et fais le déploiement dans un répertoire appeler “deploy_test”. Nous créons ensuite un artefacts (un exemplaire du dossier dist qui sera disponible sur Gitlab) qui disparaîtra dans 1h. le tags “vuejs” fais référence au gitlab-runner créer en prélude.