Voici un tutoriel approfondi en français sur la CI/CD pour Vue avec GitHub Actions :
Pourquoi CI/CD pour Vue avec GitHub Actions ?
Dans un environnement de développement moderne, il est crucial d'avoir une chaîne d'intégration continue (CI) et de livraison continue (CD). La CI permet de détecter les erreurs tout au long du processus de développement, tandis que la CD permet de déployer les modifications avec plus de fiabilité. GitHub Actions est un outil puissant qui simplifie ces opérations en offrant des workflows personnalisables.
Un cas d'usage concret : vous travaillez sur une application Vue.js pour un projet client et voulez vous assurer que chaque modification est testée automatiquement avant qu'elle ne passe au déploiement. GitHub Actions permet de configurer des pipelines automatisés qui exécutent les tests, la construction et le déploiement de l'application chaque fois que vous push du code sur votre repository.
Prerequis
- Connaissance de base de Vue.js
- Compréhension des concepts de Git et GitHub
- Installation de Node.js (v14.x ou ultérieur)
- Installation de npm (accompagné de Node.js)
Concepts fondamentaux
Workflow
Un workflow est une séquence d'étapes définies qui seront exécutées chaque fois qu'un événement spécifié se produit. Par exemple, vous pouvez configurer un workflow pour lancer des tests chaque fois que vous push du code sur la branche main.
## .github/workflows/vue-ci.yml
name: Vue CI
on:
push:
branches: [ main ]
jobs:
build-and-test:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- name: Install dependencies
run: npm install
- name: Run tests
run: npm test
Actions
Une action est une étape dans un workflow. Elle peut être définie par une image Docker ou par une action pré-existante sur GitHub Marketplace.
## Exemple d'action personnalisée
- name: Custom action
uses: ./actions/custom-action@v1
Mise en pratique : projet fil rouge
Nous allons créer un simple gestionnaire de tâches en Vue.js pour mettre en œuvre la CI/CD avec GitHub Actions.
Étape 1 : Créer le projet Vue.js
## Initialisation du nouveau projet Vue.js
vue create task-manager
cd task-manager
Étape 2 : Configurer les scripts
Ajoutez des scripts pour faciliter le déploiement :
// package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
Étape 3 : Créer la structure de l'application
Créez un composant simple pour gérer les tâches.
<!-- src/components/Tasks.vue -->
<template>
<div>
<h1>Task Manager</h1>
<ul>
<li v-for="task in tasks" :key="task.id">
task.title
<button @click="removeTask(task.id)">Remove</button>
</li>
</ul>
<form @submit.prevent="addTask">
<input v-model="newTask" type="text" placeholder="Add a new task" />
<button type="submit">Add Task</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
tasks: [
{ id: 1, title: 'Learn Vue.js' },
{ id: 2, title: 'Build a CI/CD pipeline' }
],
newTask: ''
};
},
methods: {
addTask() {
if (this.newTask.trim()) {
this.tasks.push({ id: Date.now(), title: this.newTask });
this.newTask = '';
}
},
removeTask(id) {
this.tasks = this.tasks.filter(task => task.id !== id);
}
}
};
</script>
Étape 4 : Configurer les tests
Installez Jest et configurez les tests.
## Installer Jest
npm install --save-dev jest @vue/cli-plugin-unit-jest babel-jest
## Créer un fichier de configuration Jest
touch jest.config.js
javascript
// jest.config.js
module.exports = {
preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
};
Créez un test pour le composant Tasks.vue.
// src/components/Tasks.spec.ts
import { mount } from '@vue/test-utils';
import Tasks from '@/components/Tasks.vue';
describe('Tasks Component', () => {
it('renders tasks correctly', () => {
const wrapper = mount(Tasks);
expect(wrapper.text()).toContain('Task Manager');
expect(wrapper.findAll('li').length).toBe(2);
});
it('adds a new task', async () => {
const wrapper = mount(Tasks);
await wrapper.find('input[type="text"]').setValue('New Task');
await wrapper.find('button[type="submit"]').trigger('click');
expect(wrapper.findAll('li').length).toBe(3);
});
});
Étape 5 : Configurer GitHub Actions
Créez un fichier de workflow pour la CI/CD.
## .github/workflows/vue-ci.yml
name: Vue CI
on:
push:
branches: [ main ]
jobs:
build-and-test:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- name: Install dependencies
run: npm install
- name: Run tests
run: npm test
deploy-to-netlify:
needs: build-and-test
runs-on: ubuntu-latest
steps:
- name: Deploy to Netlify
uses: peaceiris/actions-gh-pages@v3
with:
github_token: $secrets.GITHUB_TOKEN
publish_dir: ./dist
Étape 6 : Déploiement sur Netlify
Assurez-vous que vous avez un compte Netlify et que votre repository est lié à Netlify. Configurez les paramètres de déploiement dans la section "Site settings" de Netlify pour utiliser GitHub Actions.
Erreurs frequentes et debugging
1. Erreur : npm install échoue avec une erreur de version incompatibles
Cause : Une dépendance requiert une version spécifique de Node.js qui n'est pas installée.
Correction :
## .github/workflows/vue-ci.yml
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
2. Erreur : npm test échoue avec une erreur de configuration Jest
Cause : Jest n'est pas configuré correctement.
Correction :
Assurez-vous que le fichier jest.config.js est présent et bien configuré comme indiqué précédemment.
3. Erreur : Déploiement sur Netlify échoue avec une erreur d'authentification
Cause : Le token d'GitHub n'est pas correctement utilisé pour l'autorisation.
Correction :
Vérifiez que le secret GITHUB_TOKEN est bien défini dans les paramètres de votre repository GitHub Actions.
Pour aller plus loin
1. Déploiement sur AWS Amplify
Amplify est une plateforme d'infrastructure serverless qui facilite le déploiement et la gestion des applications.
2. Optimisation de l'image Docker pour Vue.js
Utilisez une image Docker optimisée pour les projets Vue.js.
3. Utilisation de Storybook pour la documentation des composants
Storybook permet de créer une documentation interactive des composants React, Vue et Angular.
Défi pratique : Ajout d'une fonctionnalité avec tests
Ajoutez une nouvelle fonctionnalité à votre application (par exemple, une tâche prioritaire) et assurez-vous qu'elle est couverte par des tests.
Ce tutoriel vous guide tout au long du processus de mise en œuvre de la CI/CD pour un projet Vue.js avec GitHub Actions. En suivant ces étapes, vous serez en mesure d'automatiser les tests et le déploiement de votre application, augmentant ainsi l'efficacité et la qualité du code.