Blog · Poradniki wdrożeń

Jak wdrożyć aplikację React Router w 2026: Dockerfile z szablonu, jedno polecenie i HTTPS

Zespół Pethost · 10 października 2026 · Zaktualizowano 25 października 2026 · 6 min czytania

Masz aplikację z create-react-router, renderuje się na serwerze, a ty chcesz ją mieć w sieci pod adresem z HTTPS. Domyślny szablon ma już Dockerfile, a na Pethost projekt nie potrzebuje niczego więcej: uruchom pethost deploy w katalogu aplikacji. Za pierwszym razem szablon zbudował się i uruchomił w 11 sekund, a pod nowym adresem odpowiedział 200.

Czego potrzebujesz, żeby wdrożyć aplikację React Router w 2026

Trzech rzeczy: aplikacji, polecenia pethost i konta Pethost.

Aplikacja to tutaj domyślny szablon, z renderowaniem na serwerze i Tailwind CSS:

npx create-react-router@latest my-app

Zostawia package.json, package-lock.json, katalog app/ i Dockerfile. Jego skrypty to te, które uruchamia Dockerfile:

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

Polecenie to jeden program, instalowany jedną linią. Wszystkie jego polecenia są w dokumentacji CLI.

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

Konto potrzebuje planu. Jeśli nie jesteś zalogowany, pethost deploy otwiera przeglądarkę i cię loguje. Jeśli nie masz jeszcze planu, pokazuje, gdzie go wybrać, i czeka.

Wdróż aplikację React Router jednym poleceniem

Przejdź do katalogu aplikacji i uruchom pethost deploy. Oto cały ekran, dla domyślnego szablonu:

$ 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. Pyta o jedno O nazwę projektu, która jest pierwszym słowem jego adresu. Enter bierze nazwę katalogu.
2. Katalog trafia na twoją maszynę Bez node_modules: build instaluje je tam, z package-lock.json.
3. Maszyna buduje Dockerfile To plik samego szablonu, niezmieniony. Linia pod spodem mówi o jedynej rzeczy, którą dodała maszyna: pliku Compose wokół Dockerfile, z usługą o nazwie app.
4. Aplikacja startuje i zostaje odpytana Maszyna widzi, że serwer nasłuchuje na 3000, i kieruje tam adres. Potem pethost sam odpytuje adres i wypisuje, co odpowiedział: 200.

Zapytaliśmy wdrożony szablon o to, o co pyta odwiedzający. Strona główna odpowiedziała 200 z HTML-em wyrenderowanym na serwerze, /favicon.ico odpowiedział 200, a adres bez trasy odpowiedział 404 z własną stroną błędu React Routera.

Plik .pethost mówi, którym projektem jest ten katalog. Zrób z nim commit, a kolejne wdrożenie o nic nie zapyta.

Dockerfile szablonu React Router

Oto plik, który zapisał create-react-router, a maszyna zbudowała go tak, jak jest:

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"]

Trzy rzeczy, które warto o nim wiedzieć na Pethost:

• Potrzebuje lockfile’a. Oba kroki npm ci czytają package-lock.json, więc trzymaj go w katalogu i w repozytorium.
• Nie deklaruje portu. Plik nie ma linii EXPOSE i jej nie potrzebuje: maszyna sama znajduje port, na którym nasłuchuje działający serwer.
• Działająca aplikacja jest mała. Ostatni etap zawiera zależności produkcyjne i build. Działający szablon zajął 79 MB pamięci.

Aplikacja bez Dockerfile nie utknie. W katalogu, w którym nie ma ani Dockerfile, ani pliku Compose, pethost deploy pisze Dockerfile dla rodzajów projektów, które zna, tak jak dla aplikacji Nuxt, a przy każdym innym katalogu mówi, dlaczego żadnego nie napisał.

Zmień trasę i wdróż ponownie

Zmień trasę i uruchom to samo polecenie. Drugie wdrożenie szablonu zajęło 6 sekund, bo maszyna przechowuje warstwy builda:

$ 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

Żeby zamiast tego wdrażać po każdym pushu, podłącz raz repozytorium:

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

Pethost czyta tylko repozytoria udostępnione jego GitHub App. Jeśli wdrożenie pójdzie źle, pethost rollback przywraca wersję sprzed niego, a twoja maszyna trzyma trzy wersje sprzed bieżącej. Agent AI może zrobić to wszystko za ciebie przez serwer MCP Pethost: jak agent wdraża projekt i o niego dba.

Zmienne środowiskowe i własna domena

Zmienna, którą loader albo action czyta na serwerze, to jedno polecenie. Pyta o wartość, nie pokazując jej, zapisuje ją w pliku .env projektu na maszynie, a kolejne wdrożenia ją zachowują:

pethost env set SESSION_SECRET

Każda nazwa pod domeną twojego konta od razu jest adresem, z HTTPS. Domena, którą masz, to jedno polecenie i jeden rekord DNS:

pethost domain add app.example.com

Polecenie wypisuje rekord do utworzenia: CNAME z twojej nazwy na nazwę twojej maszyny. Certyfikat pojawia się sam, gdy tylko nazwa zacznie się rozwiązywać, i sam się odnawia. pethost password stawia stronę z hasłem przed całą aplikacją, gdy nie jest jeszcze publiczna.

Co dostajesz za tę cenę

Pethost kosztuje 9,99 € miesięcznie za wszystko, co hostujesz, na 2 vCPU, 3 GB pamięci i 30 GB dysku. Serwer szablonu zajął 79 MB tej pamięci, więc na maszynie zostaje miejsce na bazę danych aplikacji, workera i twoje inne projekty. Nie ma opłaty za projekt ani żadnych liczników: renderowanie na serwerze nie jest rozliczane za żądanie, a pracowity miesiąc kosztuje tyle samo co spokojny.

• 9,99 € miesięcznie za wszystkie twoje projekty, bez liczników
• 11 s na zbudowanie i uruchomienie szablonu za pierwszym razem
• 79 MB pamięci dla działającej aplikacji

Co jest już zrobione za ciebie: HTTPS z certyfikatami, które same się odnawiają, wdrożenia z GitHuba, nocne backupy trzymane przez 14 dni, SSH do każdego kontenera i każde żądanie policzone, z najczęściej odwiedzanymi ścieżkami i odsetkiem błędów z ostatnich 30 dni. Maszyna działa cały czas, więc pierwsze żądanie z rana nigdy nie czeka na zimny start. Plany są w cenniku na stronie głównej.

Ekrany to wdrożenia domyślnego szablonu, który zapisuje create-react-router, z React Router 8.4.0 i pethost 0.2.1, na naszej maszynie testowej. Konto na nich to przykładowe sam.

1. React Router: instalacja
2. React Router: wdrażanie
3. React Router: oficjalne szablony
4. pethost, narzędzie wiersza poleceń Pethost