Blog · Deploy-Anleitungen

So deployst du eine React-Router-App 2026: das Dockerfile des Templates, ein Befehl und HTTPS

Vom Pethost-Team · 10. Oktober 2026 · Aktualisiert 25. Oktober 2026 · 7 Min. Lesezeit

Du hast eine App mit create-react-router erstellt, sie rendert auf dem Server, und du willst sie unter einer Adresse mit HTTPS online haben. Das Standard-Template hat schon ein Dockerfile, und bei Pethost ist das alles, was ein Projekt braucht: Führ pethost deploy im Ordner der App aus. Das Template war beim ersten Mal in 11 s gebaut und gestartet und antwortete unter seiner neuen Adresse mit 200.

Was du brauchst, um eine React-Router-App 2026 zu deployen

Drei Dinge: die App, den Befehl pethost und ein Pethost-Konto.

Die App ist hier das Standard-Template, mit Server-Rendering und Tailwind CSS:

npx create-react-router@latest my-app

Es hinterlässt die package.json, die package-lock.json, den Ordner app/ und ein Dockerfile. Seine Skripte sind die, die das Dockerfile ausführt:

"scripts": {
  "build": "react-router build",
  "dev": "react-router dev",
  "start": "react-router-serve ./build/server/index.js",
  "typecheck": "react-router typegen && tsc"
}

Der Befehl ist ein Programm, installiert mit einer Zeile. Jeden seiner Befehle findest du in der Referenz der CLI.

curl -fsSL https://pethost.dev/install.sh | sh      # macOS, Linux
irm https://pethost.dev/install.ps1 | iex           # Windows, in PowerShell

Das Konto braucht einen Tarif. Wenn du nicht angemeldet bist, öffnet pethost deploy deinen Browser und meldet dich an. Wenn du noch keinen Tarif hast, zeigt er dir, wo du einen wählst, und wartet.

Die React-Router-App mit einem Befehl deployen

Geh in den Ordner der App und führ pethost deploy aus. Das ist der ganze Bildschirm, für das Standard-Template:

$ cd my-app
$ pethost deploy
Name it [my-app]:    it will live at https://my-app.sam.pethost.app
✓ Packed 22 files, 174 KB   (left out node_modules)
✓ Uploaded straight to your machine
✓ Built and started in 11 s
  · wrote compose.yaml for the Dockerfile: the service app, reading .env
✓ app listens on 3000 → https://my-app.sam.pethost.app
  It answers 200.

https://my-app.sam.pethost.app

Wrote .pethost (commit it). Next:   pethost logs -f   ·   pethost open

1. Er fragt eine Sache Den Namen des Projekts, das erste Wort seiner Adresse. Enter übernimmt den Namen des Ordners.
2. Der Ordner geht auf deine Maschine Ohne node_modules: Der Build installiert sie dort, aus der package-lock.json.
3. Die Maschine baut das Dockerfile Es ist das des Templates, unverändert. Die Zeile darunter sagt das Einzige, was die Maschine hinzugefügt hat: eine Compose-Datei um das Dockerfile, mit einem Service namens app.
4. Die App startet und wird aufgerufen Die Maschine sieht, dass der Server auf 3000 lauscht, und leitet die Adresse dorthin. Dann ruft pethost die Adresse selbst auf und gibt aus, was sie geantwortet hat: 200.

Wir haben das deployte Template so aufgerufen, wie es jemand tut, der die Adresse öffnet. Die Startseite antwortete mit 200 und dem auf dem Server gerenderten HTML, /favicon.ico antwortete mit 200, und eine Adresse ohne Route antwortete mit 404 und der Fehlerseite von React Router selbst.

Die Datei .pethost sagt, welches Projekt dieser Ordner ist. Committe sie, dann fragt der nächste Deploy nichts mehr.

Das Dockerfile des React-Router-Templates

Das ist die Datei, die create-react-router geschrieben hat und die die Maschine so gebaut hat, wie sie ist:

FROM node:24-alpine AS development-dependencies-env
COPY . /app
WORKDIR /app
RUN npm ci

FROM node:24-alpine AS production-dependencies-env
COPY ./package.json package-lock.json /app/
WORKDIR /app
RUN npm ci --omit=dev

FROM node:24-alpine AS build-env
COPY . /app/
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
WORKDIR /app
RUN npm run build

FROM node:24-alpine
COPY ./package.json package-lock.json /app/
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
COPY --from=build-env /app/build /app/build
WORKDIR /app
CMD ["npm", "run", "start"]

Drei Dinge, die du bei Pethost darüber wissen solltest:

• Es braucht das Lockfile. Beide Schritte mit npm ci lesen die package-lock.json, also behalte sie im Ordner und in deinem Repository.
• Es gibt keinen Port an. Die Datei hat keine Zeile EXPOSE und braucht keine: Die Maschine findet den Port, auf dem der laufende Server lauscht.
• Die App ist klein, wenn sie läuft. Die letzte Stage enthält die Produktionsabhängigkeiten und den Build. Das laufende Template brauchte 79 MB RAM.

Eine App ohne Dockerfile steckt nicht fest. In einem Ordner, der weder ein Dockerfile noch eine Compose-Datei hat, schreibt pethost deploy das Dockerfile für die Arten von Projekten, die er kennt, wie für eine Nuxt-App, und bei jedem anderen Ordner sagt er, warum er keins geschrieben hat.

Eine Route ändern und neu deployen

Bearbeite eine Route und führ denselben Befehl aus. Der zweite Deploy des Templates dauerte 6 s, weil die Maschine die Layer des Builds behält:

$ pethost deploy
my-app (.pethost)
✓ Packed 23 files · uploaded · built and started in 6 s
  · wrote compose.yaml for the Dockerfile: the service app, reading .env
  · kept the project's x-pethost
  It answers 200.
https://my-app.sam.pethost.app

Um stattdessen bei jedem Push zu deployen, verbinde das Repository einmal:

pethost github sam/my-app          # from now on, every push deploys itself

Pethost liest nur die Repositorys, die du seiner GitHub-App freigegeben hast. Wenn ein Deploy schiefgeht, holt pethost rollback die Version davor zurück, und deine Maschine behält die drei Versionen vor der aktuellen. Ein KI-Agent kann all das über den MCP-Server von Pethost für dich erledigen: wie ein Agent ein Projekt deployt und betreut.

Umgebungsvariablen und deine eigene Domain

Eine Variable, die ein Loader oder eine Action auf dem Server liest, ist ein Befehl. Er fragt nach dem Wert, ohne ihn anzuzeigen, schreibt ihn in die Datei .env des Projekts auf der Maschine, und spätere Deploys behalten ihn:

pethost env set SESSION_SECRET

Jeder Name unter der Domain deines Kontos ist sofort eine Adresse, mit HTTPS. Eine Domain, die dir gehört, braucht einen Befehl und einen DNS-Eintrag:

pethost domain add app.example.com

Der Befehl gibt den Eintrag aus, den du anlegen musst: einen CNAME von deinem Namen auf den Namen deiner Maschine. Das Zertifikat kommt von selbst, sobald der Name auflöst, und erneuert sich selbst. pethost password stellt eine Passwortseite vor die ganze App, für eine, die noch nicht öffentlich ist.

Was du für den Preis bekommst

Pethost kostet 9,99 € im Monat für alles, was du hostest, mit 2 vCPU, 3 GB RAM und 30 GB Disk. Der Server des Templates brauchte davon 79 MB RAM, also hat die Maschine Platz für die Datenbank der App, einen Worker und deine anderen Projekte. Es gibt keine Gebühr pro Projekt und nichts nach Verbrauch: Server-Rendering wird nicht pro Request abgerechnet, und ein voller Monat kostet so viel wie ein ruhiger.

• 9,99 € im Monat für alle deine Projekte, nichts nach Verbrauch
• 11 s, bis das Template beim ersten Mal gebaut und gestartet war
• 79 MB RAM für die laufende App

Was schon für dich erledigt ist: HTTPS mit Zertifikaten, die sich selbst erneuern, Deploys aus GitHub, nächtliche Backups, 14 Tage aufbewahrt, SSH in jeden Container und jeder Request gezählt, mit den meistaufgerufenen Pfaden und der Fehlerquote der letzten 30 Tage. Die Maschine läuft immer, also wartet der erste Request am Morgen nie auf einen Kaltstart. Die Tarife stehen im Teil Preise der Startseite.

Die Bildschirme zeigen Deploys des Standard-Templates, das create-react-router schreibt, mit React Router 8.4.0 und pethost 0.2.1, auf einer Testmaschine von uns. Das Konto darin ist das Beispielkonto, sam.

1. React Router: Installation
2. React Router: Deployment
3. React Router: die offiziellen Templates
4. pethost, die Kommandozeile von Pethost