Pourquoi CI/CD pour Astro avec GitHub Actions ?
Le Continuous Integration and Deployment (CI/CD) est un processus essentiel dans le développement logiciel qui permet de tester et d'automatiser le déploiement des applications à chaque modification du code source. Pour les développeurs travaillant sur des projets utilisant Astro, un framework réactif pour la création de sites web statiques, GitHub Actions offre une solution complète pour le CI/CD. Un cas concret de l'utilisation du CI/CD avec Astro est lorsque vous travaillez en équipe et que vous avez besoin d'assurer que chaque modification du code est testée et validée avant son déploiement sur la production. Cela permet non seulement de détecter les erreurs tôt dans le processus, mais aussi de garantir que les modifications ne cassent pas l'intégrité globale du projet.
Prerequis
- Connaissance des bases du développement web et de JavaScript/TypeScript
- Familiarité avec Astro et sa structure de projet
- Un compte GitHub
Concepts fondamentaux
Workflow
Un workflow est une série d'étapes automatisées exécutées par GitHub Actions pour traiter les événements spécifiques. Par exemple, vous pouvez configurer un workflow pour lancer des tests chaque fois qu'un commit est effectué sur la branche principale.
## .github/workflows/ci.yml
name: CI
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build-and-test:
runs-on: ubuntu-latest
steps:
- 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
Les actions sont les unités de travail exécutées par GitHub Actions. Elles peuvent être créées en Python, Bash, Docker, et d'autres langages. Pour un projet Astro, vous pouvez utiliser des actions pour installer les dépendances, exécuter les tests et déployer l'application.
Environnements
GitHub Actions fournit différents environnements où vos workflows peuvent être exécutés. Par exemple, ubuntu-latest utilise une machine virtuelle Ubuntu, ce qui est parfait pour le développement web avec Node.js.
## .github/workflows/ci.yml
...
jobs:
build-and-test:
runs-on: ubuntu-latest
...
Variables d'environnement
Vous pouvez définir des variables d’environnement dans GitHub Actions. Ces variables peuvent être utilisées pour stocker des informations sensibles ou des configurations spécifiques à l’environnement.
## .github/workflows/ci.yml
...
jobs:
build-and-test:
runs-on: ubuntu-latest
env:
NODE_ENV: production
steps:
- 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
Mise en pratique : projet fil rouge
Étape 1 : Création du Projet Astro
Commencez par créer un nouveau projet Astro. Utilisez la commande suivante :
npm create astro@latest
Suivez les instructions pour configurer votre projet.
Étape 2 : Configuration de GitHub Actions
Créez un fichier .github/workflows/ci.yml dans le répertoire racine de votre projet. Ajoutez le code suivant :
## .github/workflows/ci.yml
name: CI
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build-and-test:
runs-on: ubuntu-latest
steps:
- 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
Étape 3 : Création des Tests
Astro utilise des tests JEST par défaut. Créez un fichier test/index.test.mjs et ajoutez le code suivant :
// test/index.test.mjs
import { describe, it, expect } from 'vitest';
describe('Home Page', () => {
it('renders the title', async () => {
const rendered = await renderFile('./src/pages/index.astro');
expect(rendered).toContain('<h1>Hello World</h1>');
});
});
Étape 4 : Ajout d'une Commande de Déploiement
Pour déployer votre application sur Vercel, vous pouvez utiliser une action GitHub Actions pour exécuter le script de déploiement. Modifiez le fichier .github/workflows/ci.yml comme suit :
## .github/workflows/ci.yml
name: CI
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build-and-test:
runs-on: ubuntu-latest
steps:
- 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
- name: Deploy to Vercel
uses: vercel/actions/deploy@v0
env:
VERCEL_TOKEN: $secrets.VERCEL_TOKEN
Assurez-vous d'ajouter une variable d'environnement VERCEL_TOKEN dans les paramètres de votre dépôt GitHub.
Étape 5 : Exécution du Workflow
Faites un commit et pousser vos modifications sur la branche principale. GitHub Actions lancera automatiquement le workflow et exécutera les étapes définies.
Erreurs frequentes et debugging
Erreur de dépendances manquantes
# ❌ Mauvais npm install # ✅ Correct npm install --save-dev @types/jestErreur de configuration de Jest
# ❌ Mauvais "scripts": { "test": "jest" } # ✅ Correct "scripts": { "test": "vitest" }Erreur d'authentification Vercel
# ❌ Mauvais env: VERCEL_TOKEN: $secrets.VERCEL_TOKEN # ✅ Correct env: VERCEL_API_URL: 'https://api.vercel.com' VERCEL_ORG_ID: 'your-org-id' VERCEL_PROJECT_ID: 'your-project-id'
Pour aller plus loin
- Intégration avec Storybook : Vous pouvez ajouter une étape pour exécuter les tests de storybook dans votre workflow.
- Déploiement sur Netlify : Utilisez GitHub Actions pour déployer sur Netlify en ajoutant des actions spécifiques à Netlify.
- Tests E2E avec Cypress : Ajoutez des tests end-to-end utilisant Cypress et configurez un workflow pour les exécuter.
Défi pratique : Créez une application web simple avec Astro qui comprend des fonctionnalités comme la création de notes, la modification de notes et la suppression de notes. Configurez un workflow GitHub Actions pour tester et déployer cette application sur Vercel.