Suivre la construction
Ouvrez la vue Builds. Les étapes FROM et COPY doivent se terminer sans erreur.
Le résultat attendu
Passer d’une image téléchargée à votre propre application
À l’étape précédente, vous avez utilisé l’image officielle nginx:alpine. Cette fois, vous allez conserver Nginx comme base, mais remplacer sa page d’accueil par la vôtre.
DockerfileLa recette lisible qui explique à Docker comment fabriquer l’image.
ImageLe résultat versionné, portable et réutilisable de cette recette.
Pourquoi Nginx ? C’est un petit serveur Web très répandu. Il permet d’obtenir immédiatement un résultat visible dans le navigateur, sans compte, sans base de données et sans exposer de données personnelles. Le but n’est pas encore d’héberger un vrai site public, mais de comprendre le cycle fichiers → image → conteneur → page locale.
Pourquoi c’est utile : le même Dockerfile peut reconstruire le même environnement sur un autre PC. Vous ne dépendez plus d’une installation manuelle difficile à reproduire.
Avant de commencer
Vérifiez l’environnement
Préparation · Étape 1
Créer le dossier du projet dans Documents
Créez le dossier docker-demo dans votre dossier Documents. Il contiendra seulement les fichiers nécessaires à cette image.
Créer et ouvrir le dossier avec PowerShell
New-Item -ItemType Directory -Force -Path "$env:USERPROFILE\Documents\docker-demo"
Set-Location "$env:USERPROFILE\Documents\docker-demo"
explorer .Interface graphique : vous pouvez aussi créer ce dossier directement dans l’Explorateur. La commande ci-dessus évite seulement les erreurs de chemin.
Préparation · Étape 2
Créer la page Web et le Dockerfile
Dans docker-demo, créez deux fichiers. Le premier est votre page. Le second est la recette de construction.
1. Le fichier index.html
Contenu de index.html
<!doctype html>
<html lang="fr">
<meta charset="utf-8">
<title>Mon premier site Docker</title>
<style>
body { font-family: system-ui; background: #071525; color: #fff;
display: grid; place-items: center; min-height: 100vh; margin: 0; }
main { text-align: center; }
h1 { color: #42d9ee; }
</style>
<main>
<h1>Docker fonctionne !</h1>
<p>Image construite avec OwlNet Geek.</p>
</main>
</html>2. Le fichier nommé exactement Dockerfile
Contenu du Dockerfile
FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
EXPOSE 80| Instruction | Rôle |
|---|---|
FROM nginx:alpine | Utilise l’image officielle Nginx dans sa variante légère Alpine. |
COPY … | Place votre page à l’emplacement servi par Nginx. |
EXPOSE 80 | Documente le port Web utilisé dans le conteneur. Cette instruction ne publie pas le port à elle seule. |
Erreur Windows fréquente : le nom doit être
Dockerfile, sans extension. Si l’Explorateur affiche Dockerfile.txt, renommez-le après avoir activé l’affichage des extensions.Construction · Étape 3
Construire l’image depuis Docker Desktop
Ouvrez le terminal intégré avec le bouton >_ Terminal de Docker Desktop. Placez-vous dans le dossier, vérifiez les deux fichiers, puis lancez la construction.
Vérifier puis construire la version 1.0
Set-Location "$env:USERPROFILE\Documents\docker-demo"
Get-ChildItem
docker build -t owlnet-demo:1.0 .docker buildLance une construction.
-t owlnet-demo:1.0Donne un nom et un tag à l’image.
.Utilise le dossier actuel comme contexte.
Retrouver l’image
Ouvrez Images. Recherchez owlnet-demo avec le tag 1.0.
Interface graphique · Étape 4
Lancer votre image dans Docker Desktop
Une image est un modèle encore inactif. Le bouton Run crée et démarre un conteneur à partir de ce modèle. Suivez exactement les écrans ci-dessous.
Ouvrir Images
Dans le menu gauche de Docker Desktop, cliquez sur Images. Dans la partie Local, repérez la ligne owlnet-demo portant le tag 1.0.
Démarrer avec Run
Survolez cette ligne avec la souris, puis cliquez sur le bouton triangulaire Run. Une petite fenêtre de configuration s’ouvre.
Ouvrir Optional settings
Dépliez Optional settings. Dans Container name, saisissez owlnet-site.
Renseigner uniquement le port hôte
Sur la ligne du port interne 80/tcp, saisissez 8081 dans le champ Host port. Le port interne 80 est déjà fourni par votre Dockerfile : vous n’avez normalement pas à le ressaisir.
Cliquer à nouveau sur Run
Validez avec Run. Docker Desktop crée alors le conteneur et l’affiche dans la vue Containers.
Ouvrir le site
Dans Containers, ouvrez owlnet-site, puis cliquez sur le lien 8081:80. Vous pouvez aussi saisir http://localhost:8081 dans votre navigateur.
Votre navigateur
localhost:8081Docker redirige
8081 → 80Nginx répond
Page Web du conteneur
Page Web du conteneur
À retenir :
8081 est la porte utilisée sur votre PC Windows. 80 est la porte utilisée par Nginx à l’intérieur du conteneur. Cette redirection permet au navigateur de votre PC d’atteindre le site isolé dans Docker.Résumé express
Environ 2 minutes
Les 6 actions à effectuer
- 1Ouvrir l’imageDocker Desktop → Images → Local →
owlnet-demo:1.0 - 2Lancer la configurationSurvoler l’image, puis cliquer sur Run.
- 3Nommer le conteneurOptional settings → Container name :
owlnet-site - 4Indiquer le portDans Host port, saisir
8081en face de80/tcp. - 5Démarrer le conteneurCliquer une seconde fois sur Run.
- 6Afficher le siteOuvrir
http://localhost:8081dans le navigateur.
Résultat attendu : la page « Docker fonctionne ! » apparaît.
Je ne trouve pas le bouton Run ou les options
Vérifiez que vous êtes dans Images → Local, et non dans Docker Hub. Vous pouvez obtenir exactement le même résultat depuis le terminal intégré avec la commande suivante :
Solution équivalente
docker run --name owlnet-site --detach --publish 127.0.0.1:8081:80 owlnet-demo:1.0Amélioration · Étape 5
Modifier la page et créer une version 1.1
Modifiez le texte dans index.html, enregistrez, puis reconstruisez avec un nouveau tag. Un tag permet de distinguer clairement les versions.
Construire une nouvelle version
Set-Location "$env:USERPROFILE\Documents\docker-demo"
docker build -t owlnet-demo:1.1 .
docker image ls owlnet-demoImportant : un conteneur déjà créé depuis la version 1.0 ne change pas tout seul. Supprimez-le puis créez-en un nouveau depuis la version 1.1.
Fin du test
Retirer uniquement les éléments de démonstration
Dans Containers, arrêtez et supprimez owlnet-site. Dans Images, retirez ensuite les tags 1.0 et 1.1 si vous ne souhaitez pas les conserver.
Alternative contrôlée dans le terminal
docker stop owlnet-site
docker rm owlnet-site
docker image rm owlnet-demo:1.0 owlnet-demo:1.1Ne lancez pas un nettoyage global : ne supprimez ici que le conteneur et les images dont les noms commencent par
owlnet-.Si une étape échoue
Identifier la cause sans tout recommencer
| Message ou symptôme | Cause probable | Correction |
|---|---|---|
| Dockerfile introuvable | Le fichier s’appelle Dockerfile.txt ou le terminal est dans le mauvais dossier. | Activez les extensions puis exécutez Get-ChildItem. |
COPY index.html … not found | index.html n’est pas dans le contexte de construction. | Placez les deux fichiers dans docker-demo et terminez la commande par un point. |
| Port 8081 déjà utilisé | Une autre application écoute déjà sur ce port. | Utilisez 8082 comme port hôte, tout en gardant 80 côté conteneur. |
| La vieille page reste affichée | L’image ou le conteneur 1.0 est encore utilisé, ou le navigateur conserve son cache. | Lancez 1.1 dans un nouveau conteneur et actualisez avec Ctrl + F5. |
| La construction semble réutiliser un ancien fichier | Cache de build. | Relancez exceptionnellement avec docker build --no-cache -t owlnet-demo:1.1 .. |
Validation
Avez-vous compris la construction d’une image ?
Fin de l’étape
Votre première image personnalisée est prête.
L’étape 5 expliquera comment conserver les données avec un volume plutôt que de les laisser disparaître avec le conteneur.