Docker en pratique : une app météo JavaScript

par Claude · Publié 23 août 2026 · Mis à jour 23 août 2026

Dans un précédent article, je te présentais les bases de Docker : son fonctionnement, ses principaux concepts et les commandes essentielles pour démarrer sereinement. Dans ce nouveau billet, je te propose de passer de la théorie à la pratique en découvrant ensemble un cas concret d’utilisation. Pour cela, nous allons créer et exécuter une petite application météo en JavaScript permettant de consulter la météo à Paris, le tout, bien sûr, à l’aide de Docker !

Docker, c’est ta boîte magique pour emballer une appli avec tout ce qu’il lui faut, la trimballer partout, et la lancer en un seul clic, sans se battre avec les versions et les dépendances. Sur ton Ubuntu, ça se traduit par l’installation de Docker Engine, puis par le build et le run d’images qui contiennent ton code JavaScript et son environnement.

À quoi sert Docker (vu par un dev)

Tu peux voir Docker comme une version ultra légère des machines virtuelles, optimisée pour les applis plutôt que pour les OS complets.

Un conteneur est un processus isolé, avec son système de fichiers, sa configuration, et ses dépendances, créé à partir d’une image Docker.
Une image est un snapshot figé (read-only) de tout ce qu’il faut pour lancer ton appli : runtime, librairies, fichiers, configuration par défaut.
Docker Engine est le moteur client–serveur qui gère les images et les conteneurs, accessible via la CLI (docker ...) et des API.

En pratique, Docker te sert à :

Garantir que “ça marche chez moi” devient “ça marche partout” (dev, CI, prod) avec le même environnement.
Simplifier les déploiements : tu pousses une image sur un registre (Docker Hub, GitLab, etc.) puis tu la tires (pull) sur n’importe quel serveur.
Faciliter les tests : tu peux spawner des bases de données, des services tiers ou des environnements complets en quelques commandes.

Docker vs machines virtuelles (pour ta culture)

Une VM embarque un OS complet, avec son kernel, ses drivers, et sa stack, ce qui la rend plus lourde et plus lente à démarrer. Un conteneur partage le kernel de l’hôte et n’embarque que ce qui est nécessaire à l’appli, ce qui le rend beaucoup plus léger et rapide.

Du coup, avec Docker, tu peux lancer des dizaines voire des centaines de conteneurs sur la même machine là où quelques VMs satureraient rapidement ta RAM et ton CPU.

Installer Docker sur Ubuntu (la base)

Tu es sur Ubuntu, donc on va installer Docker Engine via le dépôt officiel Docker, comme recommandé par la doc. Je te donne la version “propre” (sans script magique), que tu peux coller dans ton terminal.

1. Préparer le système

Ouvre un terminal et commence par mettre ton système à jour et installer quelques prérequis :

sudo apt update sudo apt install ca-certificates curl sudo install -m 0755 -d /etc/apt/keyrings

Ces paquets servent à vérifier les signatures des paquets Docker et à télécharger le GPG key depuis les serveurs Docker.

2. Ajouter la clé GPG Docker et le dépôt apt

On récupère la clé officielle Docker et on ajoute le dépôt stable pour ta version d’Ubuntu :

sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

sudo tee /etc/apt/sources.list.d/docker.sources <<EOF
Types: deb
URIs: https://download.docker.com/linux/ubuntu
Suites: $(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}")
Components: stable
Architectures: $(dpkg --print-architecture)
Signed-By: /etc/apt/keyrings/docker.asc
EOF

sudo apt update

Cette séquence correspond exactement à la procédure documentée pour Ubuntu dans la doc officielle Docker.

3. Installer Docker Engine et les plugins utiles

Supprime tous les packages qui risquent d’être en conflit avec Docker

sudo apt remove $(dpkg --get-selections docker.io docker-compose docker-compose-v2 docker-doc docker-buildx podman-docker containerd runc | cut -f1)

Avant d’installer Docker Engine pour la première fois sur une nouvelle machine hôte, tu dois configurer le dépôt apt de Docker. tu pourras ensuite installer et mettre à jour Docker à partir de ce dépôt.

Configurez le dépôt apt de Docker.

# Add Docker's official GPG key:
sudo apt update
sudo apt install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
sudo tee /etc/apt/sources.list.d/docker.sources <<EOF
Types: deb
URIs: https://download.docker.com/linux/ubuntu
Suites: $(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}")
Components: stable
Architectures: $(dpkg --print-architecture)
Signed-By: /etc/apt/keyrings/docker.asc
EOF

sudo apt update

Installe les packages Docker

sudo apt install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

Tu obtiens ainsi le moteur Docker, la CLI, containerd (le runtime), et les plugins Buildx et Compose pour construire des images avancées et gérer des stacks multi-services.

4. Vérifier que Docker fonctionne

Lance l’image de test hello-world :

sudo docker run hello-world

Docker va télécharger l’image hello-world depuis le registre Docker, lancer un conteneur, et afficher un message de succès si tout est OK.

Configuration pratique : utiliser Docker sans sudo

Par défaut, Docker nécessite les privilèges root, mais tu peux te simplifier la vie en joignant ton utilisateur au groupe docker :

sudo groupadd docker  # si le groupe n'existe pas déjà
sudo usermod -aG docker $USER

Cette astuce est recommandée dans de nombreux guides d’installation pour faciliter l’usage de Docker au quotidien.

Ensuite, déconnecte‑toi / reconnecte‑toi (ou newgrp docker) pour que les changements soient pris en compte, puis teste :

docker run hello-world

Si tu vois le même message de succès sans sudo, c’est gagné.

Quelques commandes Docker indispensables

Maintenant que tout est installé, voici le starter pack :

docker --version : vérifie la version de Docker Engine installée.
docker ps : liste les conteneurs en cours d’exécution (ajoute -a pour voir aussi ceux stoppés).
docker images : liste les images disponibles en local.
docker pull : télécharge une image depuis un registre (ex. docker pull node:18-alpine).
docker run : crée et lance un conteneur basé sur une image (ex. docker run -it node:18-alpine).
docker stop / docker rm : arrête puis supprime un conteneur.

Ces commandes suffisent pour bien comprendre la boucle de base “pull → run → stop → rm → images”.

Le projet de démo : appli météo Paris en JavaScript

On va construire une petite appli web en JavaScript qui affiche la météo actuelle à Paris via l’API OpenWeatherMap. Ensuite, on la dockerisera pour que tu puisses la lancer de la même façon sur n’importe quelle machine.

1. Obtenir une clé API OpenWeatherMap

OpenWeatherMap propose une API météo avec un free tier largement suffisant pour un projet de démo.

Va sur <https://openweathermap.org> et crée un compte gratuit.
Dans ton tableau de bord, récupère ta API key (elle apparaît dans la section “API keys”).
Attends quelques minutes, le temps que la clé soit activée.

Les tutos classiques de météo en JavaScript utilisent exactement cette méthode pour récupérer la clé et invoquer l’API api.openweathermap.org/data/2.5/weather.

2. Structure minimale du projet

Crée un dossier, par exemple meteo-paris, avec les fichiers :

index.html – la page principale
style.css – un peu de style (optionnel mais sympa)
app.js – la logique JavaScript qui appelle OpenWeatherMap

Cette structure très simple est la même que celle utilisée dans les tutoriels de “Weather App in JavaScript”.

`index.html`

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Météo Paris</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>Météo à Paris</h1>
    <div id="weather"></div>
  </div>
  <script src="app.js"></script>
</body>
</html>

Tous les tutos ressemblent beaucoup à cette structure : un conteneur, un titre, une zone de résultat, et un script JS chargé à la fin. medium

`style.css` (très simple)

body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222;
  color: #fff;
}

.container {
  background: #333;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
}

Les exemples en ligne ajoutent souvent une mise en page similaire pour une petite carte météo centrée et lisible. geeksforgeeks

`app.js`

const API_KEY = "TA_CLE_API_ICI"; // remplace par ta vraie clé
const CITY = "Paris";
const URL =
  `https://api.openweathermap.org/data/2.5/weather?q=${CITY}&units=metric&appid=${API_KEY}`;

async function loadWeather() {
  const weatherDiv = document.getElementById("weather");

  try {
    const res = await fetch(URL);
    if (!res.ok) {
      throw new Error("Impossible de récupérer la météo");
    }
    const data = await res.json();

    const html = `
      <h2>${data.name}, ${data.sys.country}</h2>
      <p><strong>Température :</strong> ${data.main.temp}°C</p>
      <p><strong>Humidité :</strong> ${data.main.humidity}%</p>
      <p><strong>Temps :</strong> ${data.weather[0].description}</p>
    `;
    weatherDiv.innerHTML = html;
  } catch (err) {
    weatherDiv.innerHTML = `<p style="color:red;">${err.message}</p>`;
  }
}

loadWeather();

Ce code reprend le même pattern que les tutos : fetch sur l’endpoint weather, vérification de res.ok, conversion en JSON, puis affichage de la température, de l’humidité et de la description.

Tu peux déjà tester en ouvrant index.html dans ton navigateur : tu devrais voir la météo actuelle de Paris.

Ajouter un petit serveur Node pour la dockerisation

Pour dockeriser proprement, on va rajouter un micro‑serveur Node.js qui sert les fichiers statiques (index.html, style.css, app.js). C’est un pattern classique pour packager une appli front dans une image Node

1. Initialiser le projet Node

Dans le dossier meteo-paris :

npm init -y
npm install express

Express est souvent utilisé pour monter un serveur HTTP minimal dans ce type de démo. medium

Crée un fichier server.js :

const express = require("express");
const path = require("path");

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname)));

app.listen(PORT, () => {
  console.log(`Serveur météo lancé sur http://localhost:${PORT}`);
});

Ce serveur sert les fichiers statiques du répertoire courant et écoute sur le port 3000, comme dans beaucoup de petits projets Node/Express.

Dans package.json, ajoute un script de démarrage :

{
"name": "meteo-paris",
"version": "1.0.0",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.19.0"
}
}

La structure de ce package.json suit ce qu’on retrouve dans les exemples d’applis HTTP minimalistes avec Express.

Tu peux tester en local :

node server.js
# puis dans ton navigateur : http://localhost:3000

Dockeriser l’appli météo (Dockerfile)

Maintenant, passons au cœur du sujet : on va créer une image Docker pour cette petite app.

1. Écrire le Dockerfile

Dans meteo-paris, crée un fichier Dockerfile :

# Image de base Node légère
FROM node:18-alpine

# Répertoire de travail
WORKDIR /app

# Copier package.json et package-lock.json (si présent)
COPY package*.json ./

# Installer les dépendances
RUN npm install --production

# Copier le reste des fichiers
COPY . .

# Exposer le port de l'app
EXPOSE 3000

# Commande de démarrage
CMD ["npm", "start"]

Ce Dockerfile suit les bonnes pratiques standards : base Node officielle, WORKDIR, copie des package*.json, installation, puis copie du code. Les tutos Docker pour Node utilisent exactement ce type de structure pour produire une image légère.

2. (Optionnel) `.dockerignore`

Ajoute un fichier .dockerignore pour éviter de copier des fichiers inutiles :

node_modules
npm-debug.log
.git

Les guides Docker recommandent fortement un .dockerignore pour limiter la taille de l’image et accélérer les builds.

Construire et lancer le conteneur

Dans le terminal, à la racine de meteo-paris (là où se trouve ton Dockerfile) :

1. Build l’image

docker build -t meteo-paris .

-t meteo-paris donne un nom (tag) à ton image.
Le . indique qu’on utilise le contexte de build du répertoire courant.

Cette commande appelle Docker Engine qui lit le Dockerfile, assemble les couches (base Node, dépendances, code), et produit une image locale.

2. Lancer le conteneur

docker run --rm -p 3000:3000 meteo-paris

-p 3000:3000 publie le port 3000 du conteneur sur le port 3000 de ta machine.
--rm indique à Docker de supprimer le conteneur automatiquement quand il s’arrête, ce qui est pratique en dev.

Tu peux maintenant ouvrir ton navigateur sur <http://localhost:3000> et voir ton appli météo Paris tourner dans un conteneur Docker.

Ce que Docker t’apporte sur ce petit projet

Sur ce simple exemple météo, Docker te donne déjà plusieurs bénéfices très concrets :

Tu peux envoyer ton code et ton Dockerfile à quelqu’un : il lui suffit d’avoir Docker, de faire docker build puis docker run pour obtenir exactement le même résultat, peu importe sa distribution Linux.
Tu peux intégrer ça dans une CI/CD : build de l’image sur chaque commit, push vers un registre, run sur un serveur ou un cluster (Docker Swarm, Kubernetes, etc.).
Tu gères les versions de Node et d’Express via l’image base et les dépendances, sans polluer l’OS de l’hôte.

Et tout ça pour une appli front très simple : imagine ce que ça donne quand tu rajoutes une API, une base de données, un reverse proxy, etc.

Et Docker Desktop dans l’histoire ?

Sur Linux, tu peux aussi installer Docker Desktop si tu veux une UI graphique et une intégration plus poussée avec Compose, Dev Environments, etc.

La doc officielle Docker explique comment :

Configurer le dépôt Docker comme on l’a fait.
Télécharger le .deb Docker Desktop pour Ubuntu depuis la page de téléchargement
L’installer via sudo apt install ./docker-desktop-amd64.deb.
Démarrer Docker Desktop via le menu de ton environnement graphique ou avec systemctl --user start docker-desktop

Mais honnêtement, comme tu es à l’aise en Linux et en dev, la CLI Docker Engine te suffira largement pour ce type de projet.

Dernière mise à jour : 23 août 2026