0Pricing
React Academy · Lezione

Dockerizzazione di un'app React/Next.js

Scriva un Dockerfile multi-stage per un'app Next.js e la esegua localmente con Docker Compose.

Dockerizzazione di un'app React/Next.js è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Perché Docker?

I container Docker raggruppano l'app e le relative dipendenze, garantendo un comportamento coerente negli ambienti di sviluppo, staging e produzione. La stessa immagine viene eseguita ovunque.

Dockerfile per una SPA React semplice

Una build in due fasi: Node.js per la compilazione e Nginx per servire l'output statico.

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

# Stage 2: Serve with Nginx
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Configurazione di Nginx per il routing di una SPA

Configurare Nginx affinché serva index.html per tutte le route (per supportare il routing lato client).

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

  location / {
    try_files $uri $uri/ /index.html; # SPA routing
  }

  location ~* \.(js|css|png|jpg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
}

Dockerfile per la modalità standalone di Next.js

Next.js 12+ supporta output: 'standalone', che copia solo i file necessari per creare un'immagine di produzione minima.

// next.config.js
module.exports = { output: 'standalone' };

# Dockerfile (Next.js standalone)
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

.dockerignore

Escludere i file non necessari dal contesto di build di Docker per velocizzare le build e ridurre le dimensioni dell'immagine.

node_modules
.next
dist
.env*
.git
README.md
*.test.ts

Compilazione ed esecuzione

Compilare l'immagine ed eseguirla localmente.

# Build:
docker build -t my-next-app .

# Run:
docker run -p 3000:3000 -e DATABASE_URL=postgres://... my-next-app

# Check size:
docker images my-next-app

Docker Compose per lo sviluppo locale

Utilizzare Docker Compose per eseguire l'app insieme alle sue dipendenze (database, Redis) con un solo comando.

# docker-compose.yml
services:
  web:
    build: .
    ports: ['3000:3000']
    environment:
      DATABASE_URL: postgresql://postgres:password@db:5432/myapp
    depends_on: [db]
  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_PASSWORD: password
      POSTGRES_DB: myapp
    volumes:
      - pgdata:/var/lib/postgresql/data
volumes:
  pgdata:

Controlli di integrità

Aggiungere un controllo di integrità al Dockerfile, in modo che gli orchestratori sappiano quando il container è pronto.

HEALTHCHECK --interval=30s --timeout=3s \
  CMD curl -f http://localhost:3000/api/health || exit 1

Variabili d'ambiente a runtime

Passare le variabili d'ambiente al momento di docker run oppure tramite --env-file. Non inserire mai i segreti nell'immagine.

docker run -p 3000:3000 \
  --env-file .env.production \
  my-next-app

Build multipiattaforma

Compilare immagini per più architetture CPU (ARM64 per i Mac M1 e le macchine virtuali cloud, AMD64 per la maggior parte dei server) con Docker Buildx.

docker buildx build \
  --platform linux/amd64,linux/arm64 \
  -t myregistry/my-next-app:latest \
  --push .

Verifica rapida

Qual è il vantaggio di utilizzare build Docker multi-stage per un'app React/Next.js?

Riepilogo

Utilizzare Dockerfile multi-stage: Node.js per la compilazione, Nginx o node:alpine per il serving. Aggiungere output: 'standalone' nella configurazione di Next.js per ottenere immagini minime. Utilizzare Docker Compose per lo sviluppo locale, passare i segreti a runtime tramite variabili d'ambiente e compilare immagini multipiattaforma con Buildx per la compatibilità con ARM e AMD64.

Domande Frequenti

La lezione «Dockerizzazione di un'app React/Next.js» è gratuita?

Sì — il testo completo di «Dockerizzazione di un'app React/Next.js» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Dockerizzazione di un'app React/Next.js»?

Scriva un Dockerfile multi-stage per un'app Next.js e la esegua localmente con Docker Compose. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Dockerizzazione di un'app React/Next.js»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Deployment su Vercel: zero configurazione e URL di anteprima
  2. Hosting di una SPA React su AWS S3 e CloudFront
  3. Dockerizzazione di un'app React/Next.js
  4. CI/CD di React con GitHub Actions
← Torna a React Academy