Dockeriser React et Next.js ⚛️

Architecture React/Next.js Dockerisée

React (SPA)

┌─────────────────┐     HTTP     ┌─────────────────┐
│   Nginx         │ ───────────→ │   API Backend   │
│ (fichiers       │              │   (port 8000)   │
│  statiques)     │              │                 │
│  Port 80        │              └─────────────────┘
└─────────────────┘

Next.js (SSR)

┌─────────────────┐     HTTP     ┌─────────────────┐
│   Next.js       │ ───────────→ │   API Backend   │
│ (SSR + static)  │              │   (port 8000)   │
│  Port 3000      │              │                 │
└─────────────────┘              └─────────────────┘
         │
    Base de données

---

Dockeriser React (SPA)

Dockerfile

# Étape 1 : Build
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Étape 2 : Production avec Nginx
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Configuration Nginx

# nginx.conf
server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /static {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

---

Dockeriser Next.js

Dockerfile

# Étape 1 : Dependencies
FROM node:18-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci

# Étape 2 : Build
FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
ENV NEXT_TELEMETRY_DISABLED 1
RUN npm run build

# Étape 3 : Production
FROM node:18-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000
ENV PORT 3000

CMD ["node", "server.js"]

next.config.ts

// next.config.ts
const nextConfig = {
  output: 'standalone',  // ← Indispensable pour Docker
};

module.exports = nextConfig;

---

docker-compose.yml (Next.js + API)

version: '3.8'

services:
  # Frontend Next.js
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - API_URL=http://api:8000
    depends_on:
      - api
    networks:
      - app-network

  # API Backend (Node/Laravel/etc)
  api:
    build:
      context: ./api
      dockerfile: Dockerfile
    ports:
      - "8000:8000"
    environment:
      - DB_HOST=db
      - DB_PORT=5432
      - DB_NAME=mabase
      - DB_USER=postgres
      - DB_PASSWORD=secret
    depends_on:
      - db
    networks:
      - app-network

  # Base de données
  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_DB: mabase
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: secret
    volumes:
      - pgdata:/var/lib/postgresql/data
    networks:
      - app-network

volumes:
  pgdata:

networks:
  app-network:
    driver: bridge

---

Optimisation des images React

# Taille avant optimisation
docker images my-react-app
# REPOSITORY       TAG    SIZE
# my-react-app     1.0    1.2GB  ← Énorme !

# Après multi-stage build
docker images my-react-app
# REPOSITORY       TAG    SIZE
# my-react-app     1.0    23MB   ← 98% plus léger !

---

Variables d'environnement

React

# .env
REACT_APP_API_URL=http://localhost:8000
REACT_APP_NAME=MonApp

// src/config.js
export const API_URL = process.env.REACT_APP_API_URL;

Next.js

# .env.local
NEXT_PUBLIC_API_URL=http://localhost:8000
DATABASE_URL=postgresql://user:pass@localhost:5432/mydb

// lib/config.js
export const API_URL = process.env.NEXT_PUBLIC_API_URL;

---

Exercices 🎯

1. React : Dockerisez une application Create React App avec Nginx.
2. Next.js : Dockerisez une application Next.js avec le mode standalone.
3. Multi-service : Créez un docker-compose avec React + API + BDD.
4. Performance : Comparez la taille des images avant et après optimisation.

Prochaine leçon : Debugging Docker.