Блог · Гайди з деплою

Як задеплоїти застосунок на React Router у 2026: Dockerfile шаблону, одна команда і HTTPS

Команда Pethost · 10 жовтня 2026 р. · Оновлено 25 жовтня 2026 р. · 6 хв читання

Ви створили застосунок командою create-react-router, він рендериться на сервері, і ви хочете, щоб він був онлайн за адресою з HTTPS. У типовому шаблоні вже є Dockerfile, а в Pethost проєктові більше нічого й не треба: запустіть pethost deploy у папці застосунку. Першого разу шаблон зібрався й запустився за 11 секунд і відповів 200 за своєю новою адресою.

Що потрібно, щоб задеплоїти застосунок на React Router у 2026

Три речі: застосунок, команда pethost і акаунт Pethost.

Застосунок тут — типовий шаблон, із серверним рендерингом і Tailwind CSS:

npx create-react-router@latest my-app

Він лишає package.json, package-lock.json, папку app/ і Dockerfile. Його скрипти — ті, які запускає Dockerfile:

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

Команда — це одна програма, яка встановлюється одним рядком. Усі її команди є в довіднику CLI.

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

Акаунту потрібен тариф. Якщо ви не ввійшли, pethost deploy відкриє браузер і виконає вхід. Якщо тарифу ще немає, команда покаже, де його обрати, і зачекає.

Деплой застосунку на React Router однією командою

Перейдіть у папку застосунку й запустіть pethost deploy. Ось увесь екран для типового шаблону:

$ 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. Вона питає одне Назву проєкту, яка стає першим словом його адреси. Enter бере назву папки.
2. Папка йде на вашу машину Без node_modules: збірка встановлює їх там, із package-lock.json.
3. Машина збирає Dockerfile Це власний файл шаблону, без змін. Рядок під ним каже про єдине, що додала машина: файл Compose навколо Dockerfile із сервісом app.
4. Застосунок запускається, і його перевіряють Машина бачить, що сервер слухає 3000, і спрямовує туди адресу. Потім pethost сам відкриває адресу й виводить, що вона відповіла: 200.

Ми спитали задеплоєний шаблон те, що питає відвідувач. Головна сторінка відповіла 200 із HTML, відрендереним на сервері, /favicon.ico відповів 200, а адреса без маршруту відповіла 404 із власною сторінкою помилки React Router.

Файл .pethost каже, який проєкт відповідає цій папці. Закомітьте його, і наступний деплой нічого не питатиме.

Dockerfile шаблону React Router

Ось файл, який написала create-react-router і який машина зібрала як є:

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

Що про нього варто знати в Pethost:

• Йому потрібен lock-файл. Обидва кроки npm ci читають package-lock.json, тож тримайте його в папці й у репозиторії.
• Порт не оголошено. У файлі немає рядка EXPOSE, і він не потрібен: машина сама знаходить порт, на якому слухає запущений сервер.
• Запущений застосунок невеликий. В останньому етапі лише production-залежності та збірка. Запущений шаблон займав 79 MB пам’яті.

Застосунок без Dockerfile теж не застрягне. У папці, де немає ні Dockerfile, ні файлу Compose, pethost deploy пише Dockerfile для тих видів проєктів, які знає, як для застосунку на Nuxt, а для будь-якої іншої папки пояснює, чому не написав його.

Змініть маршрут і задеплойте знову

Відредагуйте маршрут і запустіть ту саму команду. Другий деплой шаблону зайняв 6 секунд, бо машина зберігає шари збірки:

$ 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

Щоб натомість деплоїти на кожен пуш, один раз підключіть репозиторій:

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

Pethost читає лише ті репозиторії, які ви надали його GitHub App. Якщо деплой пішов не так, pethost rollback повертає попередню версію, а ваша машина зберігає три версії перед поточною. ШІ-агент може зробити все це за вас через MCP-сервер Pethost: як агент деплоїть проєкт і доглядає за ним.

Змінні середовища й власний домен

Змінна, яку читає на сервері loader чи action, — це одна команда. Вона питає значення, не показуючи його, записує його у файл .env проєкту на машині, і наступні деплої його зберігають:

pethost env set SESSION_SECRET

Будь-яке ім’я в домені вашого акаунта одразу стає адресою з HTTPS. Домен, яким ви володієте, потребує однієї команди й одного DNS-запису:

pethost domain add app.example.com

Команда виводить запис, який треба створити: CNAME з вашого імені на ім’я вашої машини. Сертифікат з’являється сам, щойно ім’я почне вказувати на машину, і сам поновлюється. pethost password ставить сторінку з паролем перед усім застосунком, поки він ще не публічний.

Що ви отримуєте за ці гроші

Pethost коштує 9,99 € на місяць за все, що ви хостите, на 2 vCPU, 3 GB пам’яті та 30 GB диска. Сервер шаблону зайняв 79 MB цієї пам’яті, тож на машині лишається місце для бази даних застосунку, воркера й інших ваших проєктів. Плати за проєкт немає, і нічого не тарифікується за використанням: серверний рендеринг не оплачується за запити, а насичений місяць коштує стільки ж, скільки спокійний.

• 9,99 € на місяць за всі ваші проєкти, без оплати за використання
• 11 с на першу збірку й запуск шаблону
• 79 MB пам’яті для запущеного застосунку

Що вже зроблено за вас: HTTPS із сертифікатами, які поновлюються самі, деплої з GitHub, щонічні бекапи, що зберігаються 14 днів, SSH у будь-який контейнер і облік кожного запиту з найпопулярнішими шляхами й часткою помилок за останні 30 днів. Машина працює завжди, тож перший ранковий запит ніколи не чекає на холодний старт. Тарифи — у розділі ціни на головній сторінці.

На екранах — деплої типового шаблону, який пише create-react-router, з React Router 8.4.0 і pethost 0.2.1, на нашій тестовій машині. Акаунт на них — приклад, sam.

1. React Router: встановлення
2. React Router: деплой
3. React Router: офіційні шаблони
4. pethost, командний рядок Pethost