Wie Du Deine Remix Apps Dockerisieren Kannst 💿🐳

Wenn Du Deine Remix-App dockerisierst, vereinfachst Du den Deployment-Prozess, machst sie unabhängig von Hosting-Anbietern und sorgst für konsistente Umgebungen in allen Entwicklungsphasen.

Eine Remix-App zu dockerisieren ist ziemlich einfach und macht Deine App unabhängig von Hosting-Anbietern! Lass uns direkt loslegen und ein produktionsreifes Dockerfile erstellen! 🤘🗿

Einfaches Dockerfile

Fangen wir mit einem einfachen Dockerfile für unsere Remix-App an:

FROM node:21-bullseye-slim
WORKDIR /myapp
ADD . .
RUN npm install
RUN npm run build
CMD ["npm", "start"]

Achte darauf, den Startbefehl anzupassen, falls Du nicht npm start verwendest. Du kannst das Docker-Image dann so bauen:

docker build -t remix-minimal .

Verbesserungen

Wie immer bei Docker kannst Du Dein Image auf einige einfache Weisen verbessern. Schauen wir uns die zwei offensichtlichsten Wege an: nur das Nötigste kopieren (verbessert das Caching!) und Multi-Stage-Builds (verkleinert die Image-Größe!) 🚀

Nur das Nötige kopieren

Ein Großteil der Docker-Build-Zeit wird durch teure I/O-Operationen oder die Unfähigkeit, einzelne Schritte des Build-Prozesses zu cachen, verursacht.

.dockerignore 🤷

Erstelle zunächst eine .dockerignore-Datei mit allem, was Du nicht in Deinem Docker-Image haben möchtest. Das sind typischerweise Dinge wie node_modules, kompilierte Dateien oder Dokumentation. Schreibe einfach die Ordnernamen, die ignoriert werden sollen, in eine Datei oder kopiere eine bestehende.

node_modules
README.md
LICENSE
.env

Getrennte Kopierschritte

Wenn Du aktiv an Deiner App entwickelst und ständig Dein Docker-Image neu bauen musst, ändert sich Dein Code wahrscheinlich viel häufiger als Deine Abhängigkeiten. Diesen Umstand kannst Du ausnutzen, indem Du die Install- und Build-Schritte trennst. Docker wird dann nur Deine Abhängigkeiten neu installieren, wenn sie sich tatsächlich geändert haben! 🥳

FROM node:21-bullseye-slim
WORKDIR /myapp

### Lock- und Package-Datei kopieren

ADD package.json .npmrc ./

### Abhängigkeiten installieren

RUN npm install --include=dev

### Deinen Quellcode kopieren

### Wenn sich nur Dateien im src-Ordner geändert haben, ist dies der einzige Schritt, der ausgeführt wird!

ADD . .

RUN npm run build && npm prune --omit=dev

CMD ["npm", "start"]

Multi-Stage-Builds

Wenn Du es etwas ausgefeilter haben möchtest oder ein kleineres Docker-Image benötigst, kannst Du auch Multi-Stage-Builds verwenden. Dadurch wird die endgültige Image-Größe reduziert, da nur die notwendigen Laufzeitabhängigkeiten enthalten sind.

Wir nehmen das Dockerfile aus dem vorherigen Schritt als Vorlage und erweitern es für Multi-Stage-Builds. Wir bauen die App in einer Stufe und verwenden ein kleineres Basis-Image für die endgültige Stufe.

# Basis-Node-Image

FROM node:21-bullseye-slim as base

# Gilt für die Basis und alle Ebenen, die davon erben

ENV NODE_ENV production

# Alle node_modules installieren, einschließlich Dev-Dependencies

FROM base as deps

WORKDIR /myapp

ADD package.json .npmrc ./
RUN npm install --include=dev

# Production-node_modules einrichten

FROM base as production-deps

WORKDIR /myapp

COPY --from=deps /myapp/node_modules /myapp/node_modules
ADD package.json .npmrc ./
RUN npm prune --omit=dev

# Die App bauen

FROM base as build

WORKDIR /myapp

COPY --from=deps /myapp/node_modules /myapp/node_modules

ADD . .
RUN npm run build

# Schließlich das Production-Image mit minimaler Größe erstellen

FROM base

WORKDIR /myapp

COPY --from=production-deps /myapp/node_modules /myapp/node_modules

COPY --from=build /myapp/build /myapp/build
COPY --from=build /myapp/public /myapp/public
ADD . .

CMD ["npm", "start"]

Credits

Das Dockerfile basiert auf einem der offiziellen Remix-Stacks!

Nächste Schritte

Wie waren Deine Erfahrungen beim Entwickeln und Deployen Deiner Remix-App? Ich habe es bisher sehr genossen, obwohl es noch viel zu tun gibt, um es wirklich großartig zu machen. Ich würde gerne Deine Meinung hören!

Wenn Du weitergehen möchtest, schau Dir Sliplane an, um all Deine dockerisierten Apps zu deployen!