Deployer Svelte avec Docker

Pourquoi Déployer Svelte avec Docker ?

Le déploiement d'applications web modernes peut être un défi complexe, en particulier lorsque vous travaillez avec des technologies comme Svelte qui nécessitent une compilation avant la production. Docker offre une solution élégante pour résoudre ce problème en assurant que l'environnement de développement et de production soient les mêmes. En utilisant Docker, vous pouvez créer un conteneur standardisé qui encapsule tout ce dont votre application a besoin pour fonctionner, indépendamment du système d'exploitation sur lequel il est exécuté.

Un cas concret serait l'hébergement d'une application de gestionnaire de tâches simple. En utilisant Docker, vous pouvez déployer cette application sur n'importe quel serveur, que ce soit un ordinateur local pour le développement ou un serveur cloud pour la production. Cela garantit que le comportement de l'application sera identique sur tous les environnements.

Prerequis

• Connaissances en JavaScript et Svelte
• Connaissance des bases du HTML, CSS et JavaScript ES6+
• Docker installé (version recommandée : 20.10 ou ultérieure)
• Node.js installé (version recommandée : 14.x)

Concepts fondamentaux

1. Dockerfile

Un Dockerfile est un fichier texte qui contient des instructions pour construire une image Docker.

## Base de l'image utilisée
FROM node:14-alpine

## Copie le package.json et le package-lock.json dans le conteneur
COPY package*.json ./

## Installe les dépendances du projet
RUN npm install

## Copie tous les fichiers du projet dans le conteneur
COPY . .

## Expose le port 5000
EXPOSE 5000

## Commande pour démarrer l'application
CMD ["npm", "run", "start"]

2. Docker Compose

Docker Compose est un outil qui permet de définir et de gérer des applications multi-conteneurs.

version: '3'
services:
  app:
    build: .
    ports:
      - "5000:5000"

3. Conteneurisation

La conteneurisation est le processus de création d'un environnement isolé qui empaquette une application et ses dépendances.

## Construire l'image Docker à partir du Dockerfile
docker build -t svelte-app .

## Exécuter le conteneur
docker run -p 5000:5000 svelte-app

Mise en pratique : Projet fil rouge

Étape 1 : Création du projet Svelte

npx degit sveltejs/template svelte-todo
cd svelte-todo
npm install

Étape 2 : Ajout d'un Dockerfile

Créez un fichier Dockerfile à la racine du projet.

## Base de l'image utilisée
FROM node:14-alpine

## Copie le package.json et le package-lock.json dans le conteneur
COPY package*.json ./

## Installe les dépendances du projet
RUN npm install

## Copie tous les fichiers du projet dans le conteneur
COPY . .

## Expose le port 5000
EXPOSE 5000

## Commande pour démarrer l'application
CMD ["npm", "run", "dev"]

Étape 3 : Création d'un fichier Docker Compose

Créez un fichier docker-compose.yml à la racine du projet.

version: '3'
services:
  app:
    build: .
    ports:
      - "5000:5000"

Étape 4 : Lancement de l'application

## Construire et exécuter le conteneur
docker-compose up --build

Erreurs frequentes et debugging

Erreur 1 : Error: Cannot find module 'svelte/app'

Le fichier src/main.js peut être incorrect.

// ❌ Mauvais
import App from './App.svelte';

const app = new App({
    target: document.body,
});

export default app;

Corréction :

// ✅ Correct
import { createApp } from 'svelte';
import App from './App.svelte';

createApp(App).mount('#app');

Erreur 2 : Error: listen EADDRINUSE: address already in use :::5000

Le port 5000 est déjà utilisé par une autre application.

## Trouver l'ID du processus en utilisant le port 5000
lsof -i :5000

## Terminer le processus
kill -9 <PID>

Erreur 3 : Error: Cannot find module 'svelte'

Le package svelte n'est pas installé.

## Installer svelte
npm install svelte

Pour aller plus loin

1. Docker et Kubernetes : Apprenez à déployer vos conteneurs sur un cluster de machines virtuelles avec Kubernetes. Documentation officielle

2. Dockerize des applications Node.js : Explorez comment utiliser Docker pour déployer des applications Node.js. Tutoriel

3. Docker pour les développeurs frontend : Découvrez comment utiliser Docker pour améliorer le développement frontend en utilisant des environnements isolés. Blog

Défi pratique : Créez une application de blog simple avec Svelte et déployez-la sur un serveur Docker. Assurez-vous que l'application est accessible via le navigateur.