0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Из этого гайда вы узнаете, как деплоить приложение nodejs на<a>https://render.com</a>. Гайд будет полезен бэкенд- и фронтенд-разработчикам. В процессе мы создадим небольшое hello-world приложение. Весь код<a>находится здесь</a>.</p>
1
<p>Из этого гайда вы узнаете, как деплоить приложение nodejs на<a>https://render.com</a>. Гайд будет полезен бэкенд- и фронтенд-разработчикам. В процессе мы создадим небольшое hello-world приложение. Весь код<a>находится здесь</a>.</p>
2
<p>У вас должен быть аккаунт на этом сервисе и на GitHub. Если аккаунта еще нет, то создайте его. При регистрации укажите, что будете использовать сервис для учебных целей.</p>
2
<p>У вас должен быть аккаунт на этом сервисе и на GitHub. Если аккаунта еще нет, то создайте его. При регистрации укажите, что будете использовать сервис для учебных целей.</p>
3
<p>Гайд предполагает, что вы умеете работать с Git и имеете общее представление о nodejs. Если вы не знакомы с JS, то замените команды для своего стека.</p>
3
<p>Гайд предполагает, что вы умеете работать с Git и имеете общее представление о nodejs. Если вы не знакомы с JS, то замените команды для своего стека.</p>
4
<h3>Создание приложения</h3>
4
<h3>Создание приложения</h3>
5
<p>В качестве примера создадим приложение на фреймворке<a>fastify</a>. Если вы фронтенд-разработчик и не собираетесь делать бэкенд-приложение, не расстраивайтесь. Я расскажу далее как подключить SPA-приложение на React и настроить деплой. Просто следуйте инструкциям.</p>
5
<p>В качестве примера создадим приложение на фреймворке<a>fastify</a>. Если вы фронтенд-разработчик и не собираетесь делать бэкенд-приложение, не расстраивайтесь. Я расскажу далее как подключить SPA-приложение на React и настроить деплой. Просто следуйте инструкциям.</p>
6
<p>Для создания приложения на fastify используйте команду:</p>
6
<p>Для создания приложения на fastify используйте команду:</p>
7
<p>Если утилита запрашивает установку дополнительных пакетов, согласитесь (введите y)</p>
7
<p>Если утилита запрашивает установку дополнительных пакетов, согласитесь (введите y)</p>
8
<p>Утилита сгенерирует файлы. После этого установите зависимости:</p>
8
<p>Утилита сгенерирует файлы. После этого установите зависимости:</p>
9
<p>Проверьте, что приложение работает. Для этого запустите его:</p>
9
<p>Проверьте, что приложение работает. Для этого запустите его:</p>
10
<p>И перейдите по адресу сервера. Приложение подсказывает адрес:</p>
10
<p>И перейдите по адресу сервера. Приложение подсказывает адрес:</p>
11
<p>Теперь все готово для деплоя на render.</p>
11
<p>Теперь все готово для деплоя на render.</p>
12
<h3>Первый деплой</h3>
12
<h3>Первый деплой</h3>
13
<p>Создайте репозиторий на GitHub и запушьте приложение</p>
13
<p>Создайте репозиторий на GitHub и запушьте приложение</p>
14
<p>Затем зайдите в свой аккаунт на<a>https://render.com</a>и нажмите "New +", далее выберите "Web Service"</p>
14
<p>Затем зайдите в свой аккаунт на<a>https://render.com</a>и нажмите "New +", далее выберите "Web Service"</p>
15
<p>Выберите пункт "Build and deploy from a Git repository"</p>
15
<p>Выберите пункт "Build and deploy from a Git repository"</p>
16
<p>Если ваш аккаунт на Github привязан, вы сможете выбрать проект из списка репозиториев. Выберите нужный репозиторий с приложением. Либо введите адрес репозитория на Github в поле ниже</p>
16
<p>Если ваш аккаунт на Github привязан, вы сможете выбрать проект из списка репозиториев. Выберите нужный репозиторий с приложением. Либо введите адрес репозитория на Github в поле ниже</p>
17
<p>Заполните настройки приложения: придумайте любое имя, выберите регион, укажите команды установки и запуска, выберите тарифный план Free для бесплатного использования.</p>
17
<p>Заполните настройки приложения: придумайте любое имя, выберите регион, укажите команды установки и запуска, выберите тарифный план Free для бесплатного использования.</p>
18
<p>Для корректной работы приложения, добавьте переменную среды FASTIFY_ADDRESS=0.0.0.0. Либо вы можете это сделать позже, после создания сервиса.</p>
18
<p>Для корректной работы приложения, добавьте переменную среды FASTIFY_ADDRESS=0.0.0.0. Либо вы можете это сделать позже, после создания сервиса.</p>
19
<p>Нажмите "Create Web Service". Через некоторое время приложение соберется и запустится.</p>
19
<p>Нажмите "Create Web Service". Через некоторое время приложение соберется и запустится.</p>
20
<p>Когда сервис запустится, перейдите по ссылке задеплоенного приложения</p>
20
<p>Когда сервис запустится, перейдите по ссылке задеплоенного приложения</p>
21
<p>Проверьте результат: {"root":true}.</p>
21
<p>Проверьте результат: {"root":true}.</p>
22
<p>Поздравляю, проект задеплоен и уже можно звать гостей!</p>
22
<p>Поздравляю, проект задеплоен и уже можно звать гостей!</p>
23
<h3>Деплой React-приложения</h3>
23
<h3>Деплой React-приложения</h3>
24
<p>Теперь немного усложним проект, добавив в него SPA-приложение на React. Для этого в директории проекта выполните команду:</p>
24
<p>Теперь немного усложним проект, добавив в него SPA-приложение на React. Для этого в директории проекта выполните команду:</p>
25
<p>Она создаст приложение на React в директории my-app в корне нашего проекта. Имя приложения my-app можете заменить на любое другое.</p>
25
<p>Она создаст приложение на React в директории my-app в корне нашего проекта. Имя приложения my-app можете заменить на любое другое.</p>
26
<p>Проверьте, что приложение работает. Для этого перейдите в директорию и запустите React-приложение:</p>
26
<p>Проверьте, что приложение работает. Для этого перейдите в директорию и запустите React-приложение:</p>
27
<p>После старта откроется страница в браузере с адресом приложения (по умолчанию<a>http://localhost</a></p>
27
<p>После старта откроется страница в браузере с адресом приложения (по умолчанию<a>http://localhost</a></p>
28
<p>). Проверьте, что вы остановили fastify-проект, который мы создали ранее, чтобы он не занимал порт. Вы должны увидеть логотип React.</p>
28
<p>). Проверьте, что вы остановили fastify-проект, который мы создали ранее, чтобы он не занимал порт. Вы должны увидеть логотип React.</p>
29
<p>Приложение на React имеет особенность: его нужно собирать. Команда npm start запускает вебпак-сервер, который предназначен для разработки, но не для полноценной работы. Об этом пишет само приложение после запуска:</p>
29
<p>Приложение на React имеет особенность: его нужно собирать. Команда npm start запускает вебпак-сервер, который предназначен для разработки, но не для полноценной работы. Об этом пишет само приложение после запуска:</p>
30
<p>Чтобы собрать приложение, выполните команду сборки в директории my-app:</p>
30
<p>Чтобы собрать приложение, выполните команду сборки в директории my-app:</p>
31
<p>После этого появится директория<strong>build</strong>- это и есть наше собранное React-приложение, подготовленное для работы на проде.</p>
31
<p>После этого появится директория<strong>build</strong>- это и есть наше собранное React-приложение, подготовленное для работы на проде.</p>
32
<p>Билд не включает в себя вебпак-сервер, поэтому нам нужен какой-то другой сервер, который будет предоставлять клиентам веб-приложение. Этим сервером будет наше приложение на fastify, которое мы до этого уже создали.</p>
32
<p>Билд не включает в себя вебпак-сервер, поэтому нам нужен какой-то другой сервер, который будет предоставлять клиентам веб-приложение. Этим сервером будет наше приложение на fastify, которое мы до этого уже создали.</p>
33
<p>Нужно немного доработать наше fastify-приложение, чтобы оно умело раздавать фронт. Перейдите в корень проекта, все команды ниже будут выполняться в этой директории</p>
33
<p>Нужно немного доработать наше fastify-приложение, чтобы оно умело раздавать фронт. Перейдите в корень проекта, все команды ниже будут выполняться в этой директории</p>
34
<p>Для работы со статикой (билдом React-приложения) установите библиотеку:</p>
34
<p>Для работы со статикой (билдом React-приложения) установите библиотеку:</p>
35
<p>Отредактируйте файл<em>app.js</em>. В него нужно импортировать установленную библиотеку:</p>
35
<p>Отредактируйте файл<em>app.js</em>. В него нужно импортировать установленную библиотеку:</p>
36
<p>И добавьте внутри функции подключение нашего React-приложения:</p>
36
<p>И добавьте внутри функции подключение нашего React-приложения:</p>
37
<p>Добавьте обработчик по умолчанию, чтобы он возвращал страницу html:</p>
37
<p>Добавьте обработчик по умолчанию, чтобы он возвращал страницу html:</p>
38
<p>Это даст возможность открывать React-приложение при любых несуществующих роутах. Полный код файла должен получиться таким:</p>
38
<p>Это даст возможность открывать React-приложение при любых несуществующих роутах. Полный код файла должен получиться таким:</p>
39
<p>Код написан с использованием commonJS-модулей. Можете переделать на ES-модули или оставить как есть. Не переживайте, если что-то в коде не понятно. Основная работа позади.</p>
39
<p>Код написан с использованием commonJS-модулей. Можете переделать на ES-модули или оставить как есть. Не переживайте, если что-то в коде не понятно. Основная работа позади.</p>
40
<p>Проверьте, что приложение на React остановлено - оно может занимать порт. Запустите приложение fastify и откройте его в браузере, добавив к адресу любой путь, например<a>http://localhost</a></p>
40
<p>Проверьте, что приложение на React остановлено - оно может занимать порт. Запустите приложение fastify и откройте его в браузере, добавив к адресу любой путь, например<a>http://localhost</a></p>
41
<p><a>/somepath</a>. Если вы видите приложение на React, то все получилось.</p>
41
<p><a>/somepath</a>. Если вы видите приложение на React, то все получилось.</p>
42
<p>Запушьте изменения в гитхаб. На render начнется автоматическая сборка приложения.</p>
42
<p>Запушьте изменения в гитхаб. На render начнется автоматическая сборка приложения.</p>
43
<p>Перейдите в проект на render и проверьте работу. Приложение работает, но страница React недоступна. Так происходит, потому что директория<strong>build</strong>не попадает в репозиторий, а render на выполняет билд. В сервисе выполняются стандартные команды для запуска приложения.</p>
43
<p>Перейдите в проект на render и проверьте работу. Приложение работает, но страница React недоступна. Так происходит, потому что директория<strong>build</strong>не попадает в репозиторий, а render на выполняет билд. В сервисе выполняются стандартные команды для запуска приложения.</p>
44
<p>Если мы клонируем проект в новую директорию и выполним npm ci, а затем npm start, то приложение на реакте так же не будет работать. Тоже самое делает и render. Перед запуском должно собираться React-приложение.</p>
44
<p>Если мы клонируем проект в новую директорию и выполним npm ci, а затем npm start, то приложение на реакте так же не будет работать. Тоже самое делает и render. Перед запуском должно собираться React-приложение.</p>
45
<p>Для решения этой проблемы можно модифицировать<em>package.json</em>. Нужно добавить в него воркспейс с React-приложением, для этого добавьте "workspaces":</p>
45
<p>Для решения этой проблемы можно модифицировать<em>package.json</em>. Нужно добавить в него воркспейс с React-приложением, для этого добавьте "workspaces":</p>
46
<p>"workspaces": ["my-app"]</p>
46
<p>"workspaces": ["my-app"]</p>
47
<p>После добавления воркспейса выполните команду npm install, чтобы обновить package-lock.json.</p>
47
<p>После добавления воркспейса выполните команду npm install, чтобы обновить package-lock.json.</p>
48
<p>Благодаря этому будут устанавливаться зависимости в директории<strong>my-app</strong>при каждой установке зависимостей в корневом проекте.</p>
48
<p>Благодаря этому будут устанавливаться зависимости в директории<strong>my-app</strong>при каждой установке зависимостей в корневом проекте.</p>
49
<p>Для сборки фронтенд-приложения добавьте команду в секцию "scripts":</p>
49
<p>Для сборки фронтенд-приложения добавьте команду в секцию "scripts":</p>
50
<p>"build": "npm run build --prefix my-app"</p>
50
<p>"build": "npm run build --prefix my-app"</p>
51
<p>Добавьте вызов команды сборки после установки зависимости, для этого вы можете модифицировать установку зависимостей, заменив ее на команду npm ci && npm run build:</p>
51
<p>Добавьте вызов команды сборки после установки зависимости, для этого вы можете модифицировать установку зависимостей, заменив ее на команду npm ci && npm run build:</p>
52
<p>Теперь render будет устанавливать зависимости в my-app и делать сборку перед запуском приложения.</p>
52
<p>Теперь render будет устанавливать зависимости в my-app и делать сборку перед запуском приложения.</p>
53
<p>Запушьте изменения, проверьте работу. Проверьте страницу на React, добавив к адресу путь /somepath.</p>
53
<p>Запушьте изменения, проверьте работу. Проверьте страницу на React, добавив к адресу путь /somepath.</p>
54
<p>Готовый проект для деплоя<a>находится здесь</a></p>
54
<p>Готовый проект для деплоя<a>находится здесь</a></p>