Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Подробно рассказываем, как деплоить приложение Node.js на Railway и что для этого нужно знать.

2 Важное предисловие - в этом гайде рассматривается способ деплоя с помощью GitHub, поэтому у вас должен быть свой аккаунт на<a>Railway</a>и на GitHub. Для полноценного понимания текста вы должны уметь работать с Git и знать, как устроен Node.js. Если пока нет - вот наш<a>большой бесплатный курс по Git</a>и профессия<a>Node.js-разработчик</a>. Гайд будет полезен бэкенд и фронтенд-разработчикам - в процессе мы создадим небольшое hello-world приложение. Подробно код нашего приложения можно изучить<a>здесь</a>.

3 <h2>Содержание</h2>

4 <ul><li><a>Создание приложения</a></li>

5 <li><a>Первый деплой</a></li>

6 <li><a>Деплой React-приложения</a></li>

7 </ul><h2>Создание приложения</h2>

8 В качестве примера создадим приложение на фреймворке<a>Fastify</a>. Если вы фронтенд-разработчик и не собираетесь делать бэкенд-приложение, не расстраивайтесь. Дальше я расскажу, как подключить SPA-приложение на React и правильно настроить деплой. Просто следуйте инструкциям.

9 Для создания приложения на Fastify используйте команду:

10 Если утилита запрашивает установку дополнительных пакетов, согласитесь - введите y:

11 Утилита сгенерирует файлы. После этого установите зависимости:

12 Проверьте, что приложение работает. Для этого его нужно запустить:

13 Перейдите по адресу сервера. В случае чего, приложение подскажет нужный адрес:

14 Теперь все готово для деплоя на Railway.

15 <h2>Первый деплой</h2>

16 Есть несколько способов деплоя: с помощью cli-утилиты и через GitHub. В нашем гайде я расскажу про второй способ.

17 Создайте репозиторий на GitHub и запушьте туда наше приложение. После этого зайдите в свой аккаунт на<a>Railway</a>и нажмите "Start a New Project". Дальше нужно выбрать "Deploy from Github repo".

18 Выберите нужный репозиторий с приложением, для этого можно воспользоваться поиском.

19 Нажмите "Deploy now". Через некоторое время приложение соберется и запустится, а в окне появится статус успешности деплоя.

20 Дальше нужно перейти на него, а после этого нажать "Deploy logs". В случае успешного выполнения вы должны увидеть логи работы приложения.

21 Приложение работает, но еще не доступно для внешнего мира. Нужно его привязать к определенному адресу. Закройте окно деплоя и вернитесь в проект, зайдите в настройки (1) и нажмите "Generate Domain" (2).

22 Появится адрес, по которому нужно будет перейти и дождаться, когда приложение запустится и выведет результат: {"root":true}.

23 Поздравляю, проект задеплоен и уже можно звать гостей!

24 <blockquote><h3>Читайте также:</h3>

25 Разбираем Node.js.<a>Как свойство main в package.json определяет точку входа</a>

26 </blockquote><h2>Деплой React-приложения</h2>

27 Теперь немного усложним проект, добавим в него SPA-приложение на React. Для этого в директории проекта выполните команду:

28 Она создаст приложение на React в директории my-app в корне нашего проекта. Имя приложения my-app можно будет заменить на любое другое.

29 Проверьте, что приложение работает. Для этого перейдите в директорию и запустите React-приложение:

30 После старта откроется страница в браузере с адресом приложения, по умолчанию это<a>http://localhost</a>

31 . Проверьте, что вы остановили Fastify-проект, который мы создали ранее, чтобы он не занимал порт. Вы должны увидеть логотип React.

32 Приложение на React имеет особенность: его нужно собирать. Команда npm start запускает Webpack-сервер, который предназначен для разработки, но не для полноценной работы. Об этом пишет само приложение после запуска:

33 Чтобы собрать приложение, выполните команду сборки в директории my-app:

34 После этого появится директория build - это и есть наше собранное React-приложение, подготовленное для работы на проде. Билд не включает в себя вебпак-сервер, поэтому нам нужен какой-то другой сервер, который будет предоставлять клиентам веб-приложение. Этим сервером будет наше приложение на Fastify, которое мы до этого уже создали.

35 Нужно немного доработать наше Fastify-приложение, чтобы оно умело раздавать фронт. Перейдите в корень проекта, все команды ниже будут выполняться в этой директории.

36 Для работы со статикой (билдом React-приложения), установите библиотеку:

37 Отредактируйте файл app.js. В него нужно импортировать установленную библиотеку:

38 И добавьте внутри функции подключение нашего React-приложения:

39 Добавьте обработчик по умолчанию, чтобы он возвращал html-страницу:

40 Это даст возможность открывать React-приложение при любых несуществующих роутах. Полный код файла должен получиться таким:

41 Код написан с использованием commonJS-модулей. Вы можете переделать код на ES-модули, либо оставить его как есть. Не переживайте, если что-то в коде не понятно. Основная работа уже позади.

42 Проверьте, что ваше приложение на React остановлено - оно может занимать порт, который нам еще понадобится. Запустите приложение Fastify и откройте его в браузере, добавив к адресу любой путь, например -<a>http://localhost</a>

43 <a>/somepath</a>. Если вы видите приложение на React, то все получилось.

44 Запушьте изменения в GitHub. На Railway сразу начнется автоматическая сборка приложения - вам нужно перейти в ваш проект и проверить его работу. Вы увидите, что приложение работает, но страница React недоступна. Так происходит, потому что директория build не попадает в репозиторий, а Railway не выполняет билд. В сервисе выполняются стандартные команды для запуска приложения.

45 Если мы склонируем проект в новую директорию и выполним npm ci, а затем npm start, то приложение на React тоже не будет работать. Это произойдет и с Railway. Перед запуском должно собираться React-приложение. Для решения этой проблемы можно модифицировать package.json. Нужно добавить в него установку зависимостей React-приложения, для этого добавьте в секцию scripts еще одну команду:

46 "postinstall": "npm ci --prefix my-app"`

47 Эта команда будет устанавливать зависимости в директории my-app при каждой установке зависимостей в корневом проекте.

48 Аналогично нужно добавить команду сборки фронтенд приложения:

49 "build": "npm run build --prefix my-app"

50 Либо это можно сделать через настройки проекта Railway. Не забудьте при этом нажать на кнопку (2):

51 Теперь Railway будет устанавливать зависимости в my-app и делать сборку перед запуском приложения. Запушьте ваши изменения, проверьте работу, проверьте страницу на React.

52 Если что-то пошло не так, проверьте логи. Если вы правильно указали postinstall, то в логах вы должны видеть запуск установки зависимостей:

53 Если вы только изучаете программирование и у вас на Railway есть бесплатный аккаунт, рекомендую удалять каждый деплой, чтобы ваше приложение не тратило ресурсы. Изначально вам доступно ограниченное количество ресурсов на сервисе, а если ваши приложения превысят лимит, то придется брать платный тариф или ждать начало нового месяца. То есть каждый месяц лимиты, которые тратит пользователь, сбрасываются, но в таком случае придется ждать.

54 Готовый проект для деплоя<a>находится здесь</a>.

55 <blockquote><h3>На Хекслете запускается набор первого онлайн-буткемпа:</h3>

56 Всю программу первого онлайн-буткемпа от Хекслета по профессии "Фронтенд-разработчик" можно посмотреть<a>здесь</a>

57 </blockquote>