Dockerisez la borne
d'accueil Next.js

Comprenez ce que fait l'application avant de l'emballer. Si Node.js >= 18 est installe sur votre poste, lancez-la en local. Sinon, lisez le code, c'est court.

Le contenu fourni

application/
  package.json        # next, react, react-dom
  next.config.mjs     # config Next.js minimale
  app/
    layout.js         # squelette HTML racine
    page.js           # carte SVG du parc + horaires
    globals.css       # styles de la borne

Tester en local (si Node est installe)

$ cd application/
$ npm install
$ npm run dev

Ouvrez http://localhost:3000/. Vous voyez la carte SVG du parc avec quatre pavillons cliquables (foret, marin, prairie, voyageurs) et l'onglet "Horaires".

Si Node n'est pas installe, ce n'est pas grave : vous testerez directement avec Docker. C'est precisement l'interet de la suite : fournir une image autonome qui tourne sans rien installer.

Plutot que d'ecrire tout le Dockerfile d'un coup et d'esperer, on le construit ligne par ligne. Le truc : pendant tout le travail, la derniere ligne est CMD ["ls", "/app"]. A chaque ajout, on reconstruit, on lance, et le conteneur nous montre ce qu'il y a vraiment dans /app. On remplacera ce ls par la vraie commande tout a la fin.

Creez le Dockerfile (a cote de application/, pas dedans)

On commence au strict minimum : une image de base et un dossier de travail. Rien n'est encore copie.

FROM node:20
WORKDIR /app

EXPOSE 3000
CMD ["ls", "/app"]

Construire, puis lancer pour voir

$ docker build -t borne-accueil .
$ docker run --rm borne-accueil
# (aucune sortie : le dossier /app est vide)

Le conteneur execute ls /app puis s'arrete. Il n'affiche rien : WORKDIR /app a bien cree le dossier, mais on n'a encore rien mis dedans. C'est notre point de depart : une image qui tourne, un dossier vide.

On apporte un seul fichier : package.json, la liste des dependances. On le copie en premier parce qu'il change rarement (Docker pourra reutiliser cette etape en cache). Toujours avec le ls pour verifier.

Ajoutez la ligne COPY

FROM node:20
WORKDIR /app
COPY application/package.json .

EXPOSE 3000
CMD ["ls", "/app"]

Reconstruire et relancer

$ docker build -t borne-accueil .
$ docker run --rm borne-accueil
package.json

Cette fois /app contient exactement une chose : package.json. Pas de node_modules (on n'a pas encore installe), pas de code source (pas encore copie). Le ls confirme que COPY n'a apporte que ce qu'on lui a demande.

Maintenant que package.json est dans l'image, on lance npm install. On verifie encore au ls ce que ca a change.

Ajoutez la ligne RUN

FROM node:20
WORKDIR /app
COPY application/package.json .
RUN npm install

EXPOSE 3000
CMD ["ls", "/app"]

Reconstruire et relancer

$ docker build -t borne-accueil .
$ docker run --rm borne-accueil
node_modules
package.json

Un nouveau venu : node_modules. C'est npm install qui l'a cree a partir de package.json. Le code de l'application n'est toujours pas la : on s'en occupe a l'etape suivante.

Derniere chose a faire entrer dans l'image : tout le dossier application/. On verifie une derniere fois au ls que les fichiers sont bien arrives.

Ajoutez une seconde ligne COPY

On apporte le code apres le npm install (le code change souvent, les dependances rarement). On garde le CMD ls le temps de verifier.

FROM node:20
WORKDIR /app
COPY application/package.json .
RUN npm install
COPY application .

EXPOSE 3000
CMD ["ls", "/app"]

Reconstruire et relancer

$ docker build -t borne-accueil .
$ docker run --rm borne-accueil
app
next.config.mjs
node_modules
package-lock.json
package.json

Cette fois /app contient bien le dossier app/, next.config.mjs, etc. C'est la preuve que COPY application . a apporte tout l'arbre source dans l'image.

Vous pouvez meme regarder a l'interieur du sous-dossier app/ en passant la commande directement au docker run (ce qui ignore le CMD le temps d'un coup d'oeil) :

$ docker run --rm borne-accueil ls /app/app
globals.css
layout.js
page.js

Le ls a fait son travail : il nous a servi a verifier chaque ajout. On le remplace maintenant par la vraie commande qui demarre l'application.

Remplacez le CMD

FROM node:20
WORKDIR /app
COPY application/package.json .
RUN npm install
COPY application .

EXPOSE 3000

# Avant : CMD ["ls", "/app"]  (servait juste a verifier)
CMD ["npm", "run", "dev"]

C'est le Dockerfile complet de la borne. Quelques lignes, lisibles, et chacune se justifie. npm run dev demarre le serveur Next sur le port 3000 a l'interieur du conteneur (d'ou le EXPOSE 3000).

Note : version "deployable" (facultatif)

npm run dev lance le serveur de developpement, parfait pour ce labo d'initiation. Pour une vraie mise en production, on remplacerait par un build de production : RUN npm run build apres le COPY application ., puis CMD ["npm", "start"]. Pour une image plus legere, FROM node:20-slim au lieu de node:20. Ces raffinements ne sont pas requis ici ; ils sont detailles dans la version multi-stage du guide.

Avant de la lancer "pour de vrai" en arriere-plan, on demarre la borne au premier plan, avec un port publie. On VOIT les logs defiler et on ouvre la page dans le navigateur. C'est la preuve que l'image fonctionne.

$ docker build -t borne-accueil .
$ docker run --rm -p 8090:3000 --name borne-accueil-en-marche borne-accueil
# Next demarre, les logs s'affichent ici. Le terminal reste "occupe".
  Next.js 14.2.5
  - Local:   http://localhost:3000
  Ready in 1.5s

Pendant que ce terminal tourne, ouvrez http://localhost:8090/ dans votre navigateur. La carte du parc s'affiche, les pavillons reagissent au clic, l'onglet Horaires fonctionne. C'est la preuve que votre image sert reellement la borne.

Le -p 8090:3000 relie le port 8090 de votre poste au port 3000 du conteneur. Pour arreter : Ctrl + C dans ce terminal. Le --rm fait que le conteneur se nettoie tout seul en s'arretant, vous pouvez donc relancer aussitot.

La borne du hall doit tourner en permanence et revenir toute seule apres une coupure de courant. On remet donc les drapeaux qu'on avait retires pendant le travail : -d pour l'arriere-plan et --restart pour le redemarrage automatique, puis on range tout dans trois scripts.

Les deux drapeaux qu'on remet a la fin

$ docker run -d --restart unless-stopped \
    --name borne-accueil-en-marche \
    -p 8090:3000 \
    borne-accueil

• -d (detached) : le conteneur tourne en arriere-plan, votre terminal est libre. Plus de logs qui defilent, plus de Ctrl+C.
• --restart unless-stopped : si le poste redemarre (ou si le conteneur plante), Docker le relance automatiquement. La borne revient seule le matin, personne n'a a la rallumer. Seule exception : si vous l'avez arretee a la main avec docker stop.

Ranger dans trois scripts

On encapsule les commandes dans trois scripts bash en kebab-case, rendus executables avec chmod +x *.sh.

#!/bin/bash
set -e
docker build -t borne-accueil .

#!/bin/bash
set -e
docker run -d --restart unless-stopped \
    --name borne-accueil-en-marche \
    -p 8090:3000 \
    borne-accueil
echo "Borne accessible sur http://localhost:8090"

#!/bin/bash
docker stop borne-accueil-en-marche
docker rm borne-accueil-en-marche

Le .dockerignore (a ne pas oublier)

application/node_modules et application/.next sont regeneres dans l'image par npm install ; inutile de les envoyer au build. On les exclut :

# Regeneres dans l'image : inutile de les envoyer.
application/node_modules
application/.next

# Bruit et fichiers d'usage.
.git
*.log
construire.sh
demarrer.sh
arreter.sh
README.md
.dockerignore