Tutorial - Wie du Vite in Docker verwenden kannst

Lerne, wie du deine Vite-App mit Docker verpackst, kleinere Images erzeugst, Multi-Stage Builds nutzt und statisch servierst.

Wie immer, wenn du nur zum Kopieren und Einfügen hier bist, hier ist das finale Dockerfile, das ein 4,21 MB großes Image für deine Vite-App erzeugt:

FROM node:21-alpine3.20 AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

FROM busybox:1.30 AS runner
WORKDIR /app
COPY --from=builder /app/dist .
CMD ["busybox", "httpd", "-f", "-v", "-p", "8080"]

und die .dockerignore Datei:

node_modules
dist

und der Befehl zum Bauen und Ausführen des Images:

docker build -t vite-app .
docker run -p 8080:8080 vite-app

Nicht nur zum Kopieren und Einfügen hier? Dann schauen wir uns mal an, was in diesem Dockerfile passiert!

Die Voraussetzungen

Für dieses Tutorial gehe ich davon aus, dass du bereits irgendeine Art von Vite-Projekt eingerichtet hast. Ich habe dieses Dockerfile auf Basis dieses Starter-Templates erstellt. Es ist ein ziemlich einfaches npm-basiertes Projekt mit einem Build-Befehl, der die Dateien in einen dist-Ordner ausgibt. Falls du ein anderes Setup hast, musst du das Dockerfile möglicherweise anpassen.

Normalerweise würdest du einfach npm install und dann npm run dev ausführen, um lokal zu arbeiten. Wenn du deine App tatsächlich irgendwo deployen möchtest, willst du in der Regel keinen Dev-Server verwenden, sondern deine App bauen und die Dateien von einem statischen Fileserver bereitstellen. Du würdest also stattdessen npm run build ausführen, um die Dateien zu erstellen, und sie dann mit einem anderen Server bereitstellen.

Schauen wir uns die Details des Dockerfiles an.

Das Dockerfile

FROM node:21-alpine3.20 AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

FROM busybox:1.30 AS runner
WORKDIR /app
COPY --from=builder /app/dist .
CMD ["busybox", "httpd", "-f", "-v", "-p", "8080"]

Was passiert hier also?

1. Builder-Stage:

• Verwendet Node.js 21 auf Alpine 3.20. Tagge immer die spezifischen Versionen, die du verwendest, um unerwartete Fehler zu vermeiden!
• Installiert Abhängigkeiten, kopiert dann die App und baut sie.
• Nutzt Docker's Layer-Caching für schnellere Builds - erst node_modules, dann den Rest der App.

2. Runner-Stage:

• Verwendet Busybox 1.30 für eine minimale Laufzeitumgebung. Auch hier: Tagge immer die spezifischen Versionen!
• Kopiert die gebauten Dateien aus der Builder-Stage.
• Führt einen einfachen HTTP-Server auf Port 8080 aus. Du kannst jeden beliebigen Port wählen, ich habe einfach 8080 für dieses Beispiel genommen.

Dieser Multi-Stage-Ansatz hält das finale Image klein (4,21 MB), indem Build-Tools weggelassen werden und nur Busybox verwendet wird, was eine Sammlung häufig verwendeter Unix-Dienstprogramme ist.

Stelle sicher, dass du auch eine .dockerignore-Datei hinzufügst, um den node_modules- und dist-Ordner zu ignorieren. Das beschleunigt den Build-Prozess und reduziert die Größe des Images.

Deployment

Ich betreibe eine Cloud-Hosting-Plattform, die es super einfach macht, Docker-Container zu deployen, also zeige ich dir hier, wie das geht. Das Tolle an Docker ist, dass du es überall einfach deployen kannst, also denk nicht, dass Sliplane die einzige Option ist. Du kannst jeden Cloud-Anbieter nutzen, der Docker-Container unterstützt.

Wenn du deine Änderungen committet und in ein Git-Repository gepusht hast, kannst du sie bei Sliplane deployen, indem du dich anmeldest und dann einen neuen Service erstellst:

Du musst nichts ändern, klicke einfach auf "Deploy" und Sliplane kümmert sich um den Rest.

Nach ungefähr 2 Minuten sollte alles laufen und du kannst auf deine App über den bereitgestellten Link zugreifen. Den Fortschritt kannst du in den Logs verfolgen:

Das war's! Du hast jetzt erfolgreich eine Vite-App in der Cloud deployed. Cool, oder?

Nächste Schritte

Gibt es noch etwas, das du wissen möchtest? Brauchst du Hilfe beim Dockerisieren deiner Vite-App? Oder beim Deployen auf Sliplane? Melde dich gerne bei mir!

Du findest mich auf X @JonasScholz19 oder kommentiere einfach hier im Blog.

Viele Grüße,

Jonas