In diesem Artikel wird erklärt, wie du eine Next.js-Anwendung mit einer Dockerdatei containerisierst, um sie individuell zu verteilen. Alternativ kannst du eine Next.js-Anwendung auch über die automatische Bereitstellung auf Kinsta bereitstellen.

Mit Docker packen wir eine Anwendung, ihre Umgebung und ihre Abhängigkeiten in einen isolierten Container. Ein Container besteht aus einer Anwendung, die in einer abgespeckten Linux-Version läuft. Ein Docker-Image ist die Blaupause für einen Container, und der Container ist eine laufende Instanz eines Images.

Um eine Anwendung zu containerisieren, verwenden wir eine deklarative Methode über ein Dockerfile. Docker liest die in dieser Datei definierten Skripte und führt sie aus, um deine Anwendung zu erstellen und einzusetzen.

Vorteile der Containerisierung deiner Anwendung

Die Containerisierung einer Anwendung bringt viele Vorteile mit sich, z. B. Portabilität, Stabilität, Skalierbarkeit, Sicherheit und Leistung. Wenn du eine Anwendung mit einem Dockerfile auf Kinsta bereitstellst, kannst du auch die Anpassungsfähigkeit der Anwendung nutzen.

Portabilität

Docker kapselt alles, was eine Anwendung braucht, um zu laufen, so dass sie leicht zwischen verschiedenen Umgebungen ausgetauscht werden kann. Egal, ob du sie lokal, auf einem Computer mit einem anderen Betriebssystem oder in Staging- und Produktionsumgebungen ausführst, Docker baut die Anwendung mit denselben Komponenten auf, was das Programmieren, Testen und Bereitstellen erleichtert.

Skalierbarkeit

Mit Docker kannst du mehrere Instanzen deines Containers auf verschiedenen Servern laufen lassen. Die Container-Orchestratoren bewältigen einen erhöhten Datenverkehr, ohne die Leistung deiner Anwendung zu beeinträchtigen.

Stabilität

Wenn du deine Anwendung in einem isolierten Container ausführst, hast du vorhersehbare Ergebnisse, wenn du den Code zwischen Entwicklungs-, Test- und Produktionssystemen verschiebst. Da dein Container exakte Versionen der benötigten Bibliotheken und Pakete enthält, minimiert er das Risiko von Fehlern aufgrund unterschiedlicher Abhängigkeitsrevisionen.

Wenn deine Anwendung auf einem Produktionsserver eingesetzt wird, hält Docker sie außerdem von anderen Anwendungen isoliert und minimiert so das Risiko, von deren Verkehrsspitzen betroffen zu sein.

Sicherheit

Docker-Container bieten eine sicherere Umgebung für deine Workloads als herkömmliche Modelle. Da sie deine Anwendungen in viel kleinere, lose gekoppelte Komponenten aufteilen, die jeweils voneinander isoliert sind, ist die Angriffsfläche deutlich geringer. Docker-Container verringern die Chancen von Hackern, deine Computersysteme auszunutzen, und machen es im Falle eines Angriffs schwieriger, sich auszubreiten. Erfahre mehr in diesem Artikel: 9 Best Practices für die Sicherheit von Docker-Containern.

Leistung

Container enthalten kein komplettes Betriebssystem wie virtuelle Maschinen und herkömmliche Server. Dadurch haben Container einen wesentlich geringeren Platzbedarf und lassen sich schneller aufbauen und starten.

Individuelle Bereitstellung

Mit Kinsta kannst du deine Anwendungen mit Hilfe von Buildpacks und Nixpacks automatisch bereitstellen. Aber wenn der Build-Prozess automatisch auf der Grundlage der Codebasis deiner Anwendung ausgelöst wird, hast du nicht viel Spielraum für Anpassungen. Wenn du deine Anwendung mit einer Dockerdatei in Kinsta bereitstellst, kannst du genau konfigurieren, wie du sie bauen und bereitstellen möchtest.

Anforderungen

Um eine Next.js-Anwendung mit Docker bereitzustellen, brauchst du:

Mit einer Next.js-Anwendung beginnen

Wenn du mit einer bestehenden Anwendung beginnst, kannst du diesen Schritt überspringen. Wenn du neu beginnst, erstelle eine neue Next.js-Anwendung:

  1. Öffne dein Terminal und installiere create-next-app:
npm i -g create-next-app@latest
  1. Navigiere zu dem Verzeichnis, in dem du es installieren möchtest, und erstelle eine neue Next.js-Anwendung in einem eigenen Verzeichnis:
npx create-next-app@latest new-app

Next fordert dich auf, eine Reihe von Konfigurationsoptionen für deine neue Anwendung anzugeben. Für diesen Leitfaden kannst du einfach die vorgeschlagenen Standardeinstellungen übernehmen.

  1. Um eine Vorschau deiner neuen Anwendung zu sehen, navigiere zum Verzeichnis new-app und führe sie aus:
npm run dev

Zu deiner Information haben wir eine Beispielanwendung mit dieser Methode erstellt.

Containerisierung einer Next.js-Anwendung mit einer Dockerdatei

Um deine Next.js-Anwendung zu containerisieren und mit Docker bereitzustellen, erstellst du ein Dockerfile im Stammverzeichnis deiner Anwendung.

Build-Phase

Beginne in deinem Dockerfile mit der Erstellung der build Stage, um deine Anwendung zu bauen:

  1. Verwende das offizielle letzte stabile Node.js-Alpine-Image als Basis-Image für die build Stage:
FROM node:18-alpine AS build
WORKDIR /app
  1. Kopiere die Dateien package.json und package-lock.json in den Container:
COPY package*.json ./
  1. Installiere die Anwendungs-Abhängigkeiten mit:
RUN npm ci
  1. Kopiere den Rest des Anwendungscodes in den Container mit:
COPY . .
  1. Erstelle die Anwendung:
RUN npm run build

Runtime Stage

Erstelle die runtime Stage, um deine Anwendung einzusetzen:

  1. Verwende das offizielle letzte stabile Node.js-Alpine-Image als Basis-Image für die runtime Stage:
FROM node:18-alpine AS runtime
  1. Setze das Arbeitsverzeichnis auf /app:
WORKDIR /app
  1. Kopiere die Dateien package.json und package-lock.json in den Container:
COPY package*.json ./
  1. Installiere nur die Produktionsabhängigkeiten:
RUN npm ci --only=production
  1. Kopiere die erstellte Anwendung von der build Stage auf die runtime Stage:
COPY --from=build /app/.next ./.next
  1. Kopiere den öffentlichen Ordner von der Phase build in die Phase runtime:
COPY --from=build /app/public ./public
  1. Schalte Port 3000 frei:
EXPOSE 3000
  1. Führe den Container als unprivilegierter Benutzer aus:
USER node
  1. Starte die Next.js-Anwendung:
CMD ["npm", "start"]

Am Ende erhalten wir das folgende Dockerfile:

FROM node:18-alpine AS build

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:18-alpine AS runtime

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY --from=build /app/.next ./.next
COPY --from=build /app/public ./public

EXPOSE 3000
USER node
CMD ["npm", "start"]

Lokale Bereitstellung der Anwendung mit Docker

Obwohl du deine Anwendung mit run npm dev in der Vorschau anzeigen kannst, solltest du sie lokal mit Docker ausführen, um die Produktionsumgebung zu simulieren und alle Änderungen am Dockerfile deiner Anwendung zu testen.

Um eine Vorschau deiner Anwendung zu erstellen:

  1. Erstelle die Anwendung mit docker build:
docker build -t next-docker .
  1. Starte den Container, um eine Vorschau deiner Anwendung zu erhalten:
docker run -p 3000:3000 next-docker
  1. Öffne in deinem Browser http://localhost:3000.

Bereitstellen der containerisierten Next.js-Anwendung auf Kinsta

Befolge die folgenden Schritte, um deine Anwendung mithilfe des Dockerfiles auf Kinsta bereitzustellen.

  1. Horte die Codebasis deiner Anwendung in einem Git-Repository (auf GitHub, GitLab oder Bitbucket).
  2. Logge dich in dein MyKinsta-Konto ein oder erstelle ein neues, um auf dein Dashboard zuzugreifen.
  3. Klicke auf Dienst hinzufügen und wähle Anwendung.
  4. Wähle deinen Git-Anbieter, dein Repository und den Zweig, von dem aus du bereitstellen willst.
  5. Aktiviere das Kontrollkästchen Automatische Bereitstellung bei Übergabe, wenn du deine Anwendung bei jedem Push an dein Repository bereitstellen möchtest.
  6. Wähle das Rechenzentrum aus, das deiner Zielgruppe am nächsten liegt, und klicke auf Weiter.
  7. Wähle deine Build-Umgebung und wähle Dockerfile verwenden, um das Container-Image zu erstellen.
  8. Wenn sich deine Dockerdatei nicht im Stammverzeichnis deines Repos befindet, gib ihren Pfad mit Context an und klicke auf Weiter.
  9. Du kannst den Eintrag Start command leer lassen. Kinsta verwendet npm start, um deine Anwendung zu starten.
  10. Wähle die Pod-Größe und die Anzahl der Instanzen, die für deine Anwendung am besten geeignet sind, und klicke auf Weiter.
  11. Gib deine Kreditkartendaten ein und klicke auf Anwendung erstellen.

Deine Anwendung ist nun bereit für die Bereitstellung. Wenn du in Schritt 5 das Kontrollkästchen Automatic deployment on commit aktiviert hast, startet Kinsta die Bereitstellung automatisch.

Zusammenfassung

In diesem Artikel haben wir einige Vorteile der Verwendung von Docker gegenüber herkömmlichen Modellen besprochen. Wir haben erklärt, wie du eine Dockerdatei für eine Next.js-Anwendung erstellst, sie lokal mit Docker baust und bereitstellst und sie bei Kinsta bereitstellst.

Das Anwendungs-Hosting von Kinsta macht deinen Entwicklungs-Workflow mühelos und effizient.

Funktionen wie containerisierte Anwendung auf der GCP-Infrastruktur, die auf C2-Maschinen mit 37 Rechenzentren laufen, die Premium-Integration mit Cloudflare für ein hochleistungsfähiges CDN, das deine Website von 260+ Points of Presence aus bedient, DDoS-Schutz auf Unternehmensniveau durch Firewalls, Edge Caching und die Überwachung der Betriebszeit (mit einer Betriebszeitgarantie von 99 %) sorgen dafür, dass deine Anwendung schnell und sicher läuft und zuverlässig im Internet verfügbar ist.

Marcia Ramos Kinsta

Ik ben de Editorial Team Lead bij Kinsta. Ik ben een open source liefhebber en ik houd van coderen. Met meer dan 7 jaar ervaring in technisch schrijven en redactiewerk voor de tech-industrie, werk ik graag samen met mensen om duidelijke en beknopte content te creëren en workflows te verbeteren.