Pourquoi Deployer Astro avec Docker ?
Deployer un projet Astro avec Docker offre plusieurs avantages concrets :
- Isolation et Consistance : Docker permet de créer un environnement dédié pour chaque application, garantissant que les dépendances et les configurations sont identiques sur tous les systèmes.
- Facilité de Déploiement : Avec Docker, le déploiement est standardisé et répétable. Un simple
docker-compose uppeut déployer l'application sans soucis. - Portabilité : Les applications Docker sont portables, ce qui signifie que vous pouvez les exécuter sur n'importe quel système avec Docker installé.
Un cas d'utilisation concret est le déploiement d'une application web basée sur Astro sur un serveur dédié ou dans un environnement de production cloud. Avec Docker, vous pouvez vous assurer que l'environnement de développement et celui de production sont identiques, réduisant les risques de bugs en raison de configurations différentes.
Prerequis
Connaissances nécessaires :
- Bases du JavaScript
- Connaissance de la ligne de commande (terminal)
- Familiarité avec Docker et Docker Compose
Outils à installer :
- Node.js v14 ou plus récent (
npm install -g node) - Docker Desktop (pour Windows et Mac) ou Docker Engine (pour Linux)
- Node.js v14 ou plus récent (
Concepts fondamentaux
1. Astro
Astro est un framework moderne pour créer des applications web rapides et efficaces. Il utilise React sous le capot et offre une structure simple et intuitive.
// src/pages/index.astro
---
const title = "Bienvenue sur mon site";
---
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>{title}</title>
</head>
<body>
<h1>Bienvenue sur mon site</h1>
</body>
</html>
2. Dockerfile
Le Dockerfile est un fichier texte qui contient des instructions pour construire une image Docker.
## Dockerfile
FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "start"]
3. docker-compose.yml
Le docker-compose.yml est un fichier pour définir et exécuter plusieurs conteneurs Docker.
## docker-compose.yml
version: '3'
services:
web:
build: .
ports:
- "3000:3000"
volumes:
- .:/app
Mise en pratique : projet fil rouge
Dans ce tutoriel, nous allons créer un simple application de tâches à faire (To-Do List) avec Astro et Docker.
Étape 1 : Initialiser le projet
## Créer un nouveau projet Astro
npm create astro@latest
## Entrer dans le dossier du projet
cd astro-docker-todo
Étape 2 : Installer les dépendances
Astro est basé sur React, donc nous n'avons pas besoin d'installer de dépendances supplémentaires.
## Installer les dépendances
npm install
Étape 3 : Créer le composant Tâche
Créez un fichier src/components/TodoItem.astro :
// src/components/TodoItem.astro
---
const { todo } = props;
---
<div class="todo-item">
<input type="checkbox" checked={todo.completed} />
{todo.text}
</div>
Étape 4 : Créer la page d'accueil
Créez un fichier src/pages/index.astro :
// src/pages/index.astro
---
import TodoItem from '../components/TodoItem.astro';
const todos = [
{ text: 'Faire les courses', completed: false },
{ text: 'Nettoyer la maison', completed: true },
];
---
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Todo List</title>
</head>
<body>
<h1>Ma Todo List</h1>
{todos.map(todo => (
<TodoItem todo={todo} />
))}
</body>
</html>
Étape 5 : Créer le Dockerfile
Créez un fichier Dockerfile à la racine du projet :
## Dockerfile
FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "start"]
Étape 6 : Créer le docker-compose.yml
Créez un fichier docker-compose.yml à la racine du projet :
## docker-compose.yml
version: '3'
services:
web:
build: .
ports:
- "3000:3000"
volumes:
- .:/app
Étape 7 : Construire et exécuter l'application
## Construire et exécuter l'application avec Docker Compose
docker-compose up --build
Étape 8 : Accéder à l'application
Ouvrez votre navigateur et allez sur http://localhost:3000. Vous devriez voir la liste de tâches.
Erreurs fréquentes et debugging
Erreur 1 : Le port est déjà utilisé
## Message d'erreur
Error response from daemon: driver failed programming external connectivity on endpoint web (5c9d3b4f8e2d): Bind for 0.0.0.0:3000 failed: port is already allocated
Correction :
## Trouver le processus utilisant le port 3000
lsof -i :3000
## Terminer le processus
kill -9 <PID>
Erreur 2 : Docker ne peut pas trouver l'image
## Message d'erreur
Error response from daemon: manifest for node:14 not found: manifest unknown, server message: manifest for node:14 not found
Correction :
Assurez-vous que Docker est configuré correctement et que vous avez les permissions nécessaires pour pull des images.
Erreur 3 : La commande npm start ne fonctionne pas
## Message d'erreur
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! astro-docker-todo@0.0.0 start: `astro dev`
npm ERR! Exit status 1
Correction :
Assurez-vous que le package @astrojs/react est installé.
## Installer le package manquant
npm install @astrojs/react
Pour aller plus loin
1. Utiliser des environnements de développement et de production distincts
Vous pouvez utiliser des fichiers .env.development et .env.production pour gérer les variables d'environnement.
## .env.development
NODE_ENV=development
## .env.production
NODE_ENV=production
2. Optimiser le build de Docker
Utilisez une image plus petite comme node:14-slim et ajoutez des instructions pour minimiser l'image.
## Dockerfile optimisé
FROM node:14-slim
WORKDIR /app
COPY package*.json ./
RUN npm install --only=production
COPY . .
CMD ["npm", "start"]
3. Ajouter des tests unitaires
Astro prend en charge les tests unitaires avec Vite. Créez un fichier src/tests/index.test.ts et ajoutez des tests.
// src/tests/index.test.ts
import { describe, expect, test } from 'vitest';
describe('TodoItem', () => {
test('renders the todo text', () => {
const todo = { text: 'Faire les courses', completed: false };
const element = render(<TodoItem todo={todo} />);
expect(element).toContainText(todo.text);
});
});
Défi pratique
Créez une application de blog avec Astro et Docker. L'application devrait permettre d'afficher des articles, de les créer et de les modifier.
Ce tutoriel vous a montré comment déployer un projet Astro avec Docker en utilisant un projet fil rouge concret. En suivant ces étapes, vous pouvez maintenant créer et déployer vos propres applications web avec Astro et Docker.