Configurer Docker Hub

Préparer Docker Hub pour accueillir nos images

Docker Hub est le « GitHub des conteneurs » : on y stocke les images buildées en CI puis on les télécharge sur le VPS avec un simple docker pull algomax/react-router-7:production. Dans cette leçon tu vas :

1. Créer un repository privé ou public sur Docker Hub.
2. Taguer et pousser manuellement une première image (pour bien comprendre).
3. Connecter le CLI Docker à ton compte.
4. Mettre à jour docker-compose pour pointer vers l’image hébergée.
5. Préparer les secrets nécessaires aux prochaines GitHub Actions.

C’est parti !

1. Créer le repository sur Docker Hub

1. Va sur hub.docker.com et connecte-toi.
2. Clique sur Create → Repository.
3. Renseigne :
   • Namespace : ton pseudo Docker Hub (ex. algomax).
   • Name : react-router-7.
   • Visibility :
     • Public : gratuit, image visible par tout le monde.
     • Private : une seule image gratuite ; sinon 5 €/mois.

Le nouveau dépôt est accessible sous algomax/react-router-7.

2. Taguer et pousser une image en local

Nous avons déjà un Dockerfile fonctionnel (voir la leçon précédente). On crée un tag explicite :

1
docker build -t algomax/react-router-7:1.0.0 .

Vérifie qu’il apparaît dans Docker Desktop :

1
docker images | grep react-router-7

Exemple de sortie :

1
algomax/react-router-7   1.0.0    137MB

2.1 Se connecter au registre

1
docker logout      # au cas où
2
docker login       # saisir username + PAT

Le Personal Access Token (PAT) se génère dans Docker Hub → Account Settings → Security → New token (scope read/write, pas d’expiration).

2.2 Pousser l’image

1
docker push algomax/react-router-7:1.0.0

Quelques secondes plus tard le tag apparaît dans l’UI Docker Hub avec sa taille compressée (~137 Mo dans le transcript).

3. Ajuster le docker-compose

Dans l’environnement de PROD on tire l’image au lieu de la reconstruire :

1
services:
2
  web:
3
    image: algomax/react-router-7:1.0.0
4
    platform: linux/amd64   # ↩️ nécessaire si tu développes sur puce Apple Silicon
5
    env_file: .env.production
6
    restart: always
7
    ports:
8
      - "3000:3000"

platform: linux/amd64 résout l’erreur vue dans la vidéo :

1
no matching manifest for linux/arm64 in the manifest list entries

4. Tester le pull localement

On purge d’abord le cache Docker pour simuler une machine « vierge » :

1
docker system prune --all --volumes --force

Puis :

1
docker compose -f docker-compose.prod.yml up -d

Le client télécharge l’image depuis Docker Hub et démarre le conteneur. Ouvre http://localhost:3000 – ton appli React Router 7 tourne à nouveau, preuve que le pipeline pull → run est OK.

5. Stocker les secrets dans GitHub

Prochaine étape : la CI va devoir push l’image. Ajoute les deux secrets dans ton repo GitHub :

1
Settings → Secrets and variables → Actions → New secret

Ces variables seront référencées dans le workflow :

1
- uses: docker/login-action@v2
2
  with:
3
    username: ${{ secrets.DOCKERHUB_USERNAME }}
4
    password: ${{ secrets.DOCKERHUB_TOKEN }}

6. Récap concret des commandes du transcript

1
# 1. Build local avec tag explicite
2
docker build -t algomax/react-router-7:1.0.0 .
3

4
# 2. Authentification CLI
5
docker login
6

7
# 3. Push vers Docker Hub
8
docker push algomax/react-router-7:1.0.0
9

10
# 4. Purge locale pour tester le pull
11
docker system prune --all --volumes --force
12

13
# 5. Pull & run via compose
14
docker compose -f docker-compose.prod.yml up -d

Points clés à retenir

• Repository Docker Hub = stockage central de tes images.
• Tag clair (1.0.0, production, latest) : facilite le déploiement multi-environnements.
• docker login indispensable avant docker push et avant le docker pull automatique sur ton VPS.
• Ajoute platform: linux/amd64 dans docker-compose si tu développes sur Apple Silicon.
• Les secrets Docker Hub doivent être enregistrés dans GitHub avant de créer les actions CI/CD.

Et maintenant ?

Dans la prochaine leçon on branche ces opérations dans GitHub Actions : le build + push deviendront automatiques à chaque git push sur main ou dev. Direction Configurer les GitHub Actions → tu vas aimer voir la CI passer toute seule 🟢 !