Next.js per Docker & VPS in Produktion bereitstellen – Schritt-für-Schritt-Anleitung

Die Bereitstellung einer Next.js-Anwendung auf einem virtuellen privaten Server (VPS) muss kein komplizierter Prozess sein. Mit Docker und Bun lässt sich die Anwendung containerisieren, um konsistente Performance und einfache Skalierung zu gewährleisten. Diese Anleitung führt Sie durch die notwendigen Schritte – von der Konfiguration des Next.js-Standalone-Modus über die Einrichtung eines Reverse-Proxys mit NGINX bis hin zur Absicherung mit HTTPS über Certbot.

Next.js für den Standalone-Modus konfigurieren

Next.js bietet einen standalone-Ausgabemodus, der eine minimale Produktionsversion der Anwendung erstellt. Dadurch werden Entwicklungsabhängigkeiten ausgeschlossen und die Laufzeitperformance optimiert. Um diesen Modus zu aktivieren, passen Sie die next.config.ts wie folgt an:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "standalone",
};

export default nextConfig;

Diese Einstellung sorgt dafür, dass Next.js nur die für die Produktion erforderlichen Dateien bündelt. Für den produktiven Einsatz sind jedoch zusätzliche Sicherheits- und Performance-Optimierungen ratsam, um Stabilität und Effizienz zu gewährleisten.

Dockerfile für Bun und Next.js optimieren

Ein gut strukturiertes Dockerfile beschleunigt den Build-Prozess und sichert die Bereitstellung. Die Verwendung von Multi-Stage-Builds ermöglicht eine klare Trennung: eine Phase für Abhängigkeiten, eine für den Build der Anwendung und eine finale Phase für den Betrieb. Hier eine optimierte Version für Bun:

# Phase 1: Abhängigkeiten mit Bun installieren
FROM oven/bun:1 AS dependencies
WORKDIR /app
COPY package.json bun.lock* ./
RUN --mount=type=cache,target=/root/.bun/install/cache \
  bun install --no-save --frozen-lockfile

# Phase 2: Next.js-Anwendung bauen
FROM oven/bun:1 AS builder
WORKDIR /app
COPY --from=dependencies /app/node_modules ./node_modules
COPY . .
ENV NODE_ENV=production
RUN bun run build

# Phase 3: Anwendung ausführen
FROM oven/bun:1 AS runner
WORKDIR /app
ENV NODE_ENV=production
ENV PORT=3000
ENV HOSTNAME="0.0.0.0"

# Nur notwendige Dateien kopieren und Berechtigungen setzen
COPY --from=builder --chown=bun:bun /app/public ./public
RUN mkdir .next && chown bun:bun .next
COPY --from=builder --chown=bun:bun /app/.next/standalone ./
COPY --from=builder --chown=bun:bun /app/.next/static ./.next/static

# Sicherheitshalber als Nicht-Root-Benutzer ausführen
USER bun
EXPOSE 3000
CMD ["bun", "server.js"]

Zu den wichtigsten Optimierungen gehören die Nutzung des Docker-Cachings für Abhängigkeiten und die Verwendung des --frozen-lockfile-Flags von Bun, um reproduzierbare Builds zu gewährleisten. Die finale Phase läuft unter einem nicht-privilegierten Benutzerkonto, was die Sicherheit erhöht.

Docker Compose für Entwicklung und Produktion einrichten

Docker Compose vereinfacht die Verwaltung mehrerer Dienste, wie Next.js, NGINX und Certbot für HTTPS. Die folgende Konfiguration ist produktionsbereit und lässt sich sowohl lokal als auch auf dem VPS nutzen:

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    image: nextjs-standalone-bun-image
    container_name: nextjs-app
    environment:
      NODE_ENV: production
      PORT: "3000"
      HOSTNAME: "0.0.0.0"
    expose:
      - "3000"
    restart: unless-stopped
    networks:
      - app-network

  nginx:
    image: nginx:stable-alpine
    container_name: nginx-proxy
    depends_on:
      - app
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
      - certbot_www:/var/www/certbot
      - certbot_conf:/etc/letsencrypt
    restart: unless-stopped
    networks:
      - app-network

  certbot:
    image: certbot/certbot:latest
    container_name: certbot
    volumes:
      - certbot_www:/var/www/certbot
      - certbot_conf:/etc/letsencrypt
    entrypoint: >
      /bin/sh -c 'trap exit TERM; while :; do certbot renew --webroot -w /var/www/certbot --quiet; sleep 12h; done'
    restart: unless-stopped

volumes:
  certbot_www:
  certbot_conf:

networks:
  app-network:
    driver: bridge

Diese Konfiguration integriert NGINX als Reverse-Proxy, der Anfragen an die Next.js-Anwendung weiterleitet und HTTPS-Verbindungen terminiert. Certbot übernimmt dabei die automatische Erneuerung der SSL-Zertifikate. Passen Sie die default.conf an Ihre Domain an, um SSL korrekt zu konfigurieren.

NGINX als Reverse-Proxy und für HTTPS einrichten

Eine grundlegende NGINX-Konfiguration leitet den Traffic an Ihre Next.js-Anwendung weiter und aktiviert HTTPS. Erstellen Sie eine default.conf im nginx-Verzeichnis:

server {
  listen 80;
  server_name ihre-domain.de www.ihre-domain.de;

  location / {
    return 301 
  }

  location /.well-known/acme-challenge/ {
    root /var/www/certbot;
  }
}

server {
  listen 443 ssl;
  server_name ihre-domain.de www.ihre-domain.de;

  ssl_certificate /etc/letsencrypt/live/ihre-domain.de/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/ihre-domain.de/privkey.pem;

  location / {
    proxy_pass 
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

Diese Konfiguration leitet HTTP-Anfragen auf HTTPS um und leitet sie an den Next.js-Container weiter. Stellen Sie sicher, dass Ihre Domain auf die IP-Adresse des VPS zeigt, bevor Sie mit der Bereitstellung fortfahren.

Nach der Einrichtung Ihres Setups empfiehlt es sich, die Anwendung lokal mit Docker Compose zu testen:

# Dienste erstellen und starten
docker compose up --build

# Überprüfen, ob Next.js läuft
curl 

# NGINX- und HTTPS-Konfiguration testen
curl -I 

Für die Produktion sollten zusätzliche Maßnahmen wie Monitoring, Logging und Backups implementiert werden. Der Standalone-Modus von Next.js und die Multi-Stage-Builds von Docker bieten eine solide Grundlage, doch kontinuierliche Optimierung ist entscheidend, um Performance und Sicherheit langfristig zu gewährleisten.

Die Zukunft der Anwendungsbereitstellung liegt in Automatisierung und Skalierbarkeit. Durch die Containerisierung Ihrer Next.js-Anwendung mit Docker und Bun schaffen Sie nicht nur eine vereinfachte Bereitstellung – Sie legen den Grundstein für eine Infrastruktur, die sich nahtlos aktualisieren und erweitern lässt. Mit dieser Lösung sind Sie bestens gerüstet, um den Anforderungen einer wachsenden Anwendung gerecht zu werden und gleichzeitig eine hohe Verfügbarkeit zu garantieren.