Создание интернет-магазина на Node.js с нуля. Часть 4: Деплой

Добро пожаловать в завершающую и, наверное, самую важную статью нашего цикла, посвященного созданию современного интернет-магазина с нуля.

Мы проделали огромный путь: от концепции и проектирования архитектуры до создания бэкенда на Node.js и проработки клиентского интерфейса на React.js.

На предыдущем этапе мы с вами сосредоточились на фронтенде — с помощью React мы создали интуитивно понятный интерфейс с маршрутизацией, состоянием корзины, интерактивными компонентами и формами, которые делают работу с сайтом по-настоящему комфортной. У вас на локальном компьютере теперь есть готовый, полностью рабочий проект, где серверная и клиентская части идеально взаимодействуют. Но самый главный вопрос остается открытым: как перенести проект в глобальное пространство интернета, чтобы ваш магазин увидели все?

Именно на этот вопрос мы и дадим ответ сегодня. Разработка — это лишь половина работы. Реальная ценность любого веб-проекта, особенно такого сложного, как интернет-магазин, раскрывается тогда, когда он становится доступен вашим клиентам, партнерам и поисковым системам 24/7. 

Процесс вывода приложения в продакшн, или деплой, — это финальный рубеж, который отделяет идею от работающего бизнес-инструмента. К концу этой статьи вы не просто «запустите сайт» — вы получите глубокое понимание того, как работает жизненный цикл полноценного JavaScript-приложения в production-среде, и ваш интернет-магазин займет свое место в онлайн-пространстве, готовый принимать первых посетителей. 

Домен

Перед началом деплоя создадим доменное имя. Для этого перейдем в панель управления Timeweb Cloud и откроем раздел «Домены и SSL». Перед вами страница, на которой можно увидеть все активные домены и купленные SSL-сертификаты, а также:

• Купить домен через сервис Timeweb Cloud.

• Разместить купленный у другого регистратора домен на серверах Timeweb Cloud.

• Полностью перенести домен от другого регистратора в Timeweb Cloud.

Мы воспользуемся первым вариантом — зарегистрируем новый домен. Нажимаем «Купить домен».

Перед нами откроется страница, на которой можно или ввести название домена самостоятельно или воспользоваться ИИ-генератором — он поможет подобрать доменное имя. Для данной статьи мы создадим домен twconlinestore.ru. 

После выбора домена нужно перейти на страницу оплаты и ввести контактные данные администратора. Вы увидите следующее:

Вы можете выбрать сертификат SSL Timeweb Pro на этом этапе или в дальнейшем выпустить бесплатный SSL-сертификат Let's Encrypt.

Далее необходимо создать почту. Перейдите в раздел «Почта», выберите нужный домен и создайте ящик. Для примера создадим ящик с адресом shop@twconlinestore.ru — это стоит 100 рублей в месяц.

Деплой проекта на VPS

Мы будем разворачивать проект на VPS от Timeweb Cloud. Создадим сервер с конфигурацией: 

• 2 x 3.3 ГГц CPU
• 2 ГБ RAM
• 40 ГБ NVMe
• OC: Ubuntu 24.04

Установка Node.js и npm

Проверьте, что на вашем сервере уже есть Node.js, при помощи команды:

Если нет, установите его:

После установки введите в командной строке:

Убедитесь, что версии Node.js и npm отображаются.

Мы разместим Backend и Frontend на одном сервере, поэтому, чтобы не возникало конфликтов, бэкенд будет работать на 5000 порту, а фронтенд — на 80.

Деплой Backend’а 

Есть два пути деплоя: используя Docker или PM2. Выбор зависит от ваших целей и потребностей проекта. Давайте сравним оба решения.

Docker

Преимущества:

• Контейнеризация всего стека технологий. Позволяет упаковать всё окружение (ОС, зависимости, runtime) вместе с приложением, обеспечивая полную изоляцию и воспроизводимость рабочей среды.

• Однородность инфраструктуры. Вы запускаете приложение точно таким же образом на локальной машине, тестовом окружении и в production.

• Простота деплоя. Легко переносить контейнеры между серверами, облачными провайдерами и средами.

• Гибкость. Можно легко изменить конфигурацию ОС, зависимые библиотеки и среду исполнения (например, версию Node.js).

PM2

PM2 — это продвинутый менеджер процессов для приложений Node.js. Он обеспечивает автоматический перезапуск сервисов, балансировку нагрузки между несколькими экземплярами приложения и мониторинг производительности.

Преимущества:

• Мониторинг и управление процессами Node.js-приложений. Подходит для быстрого развертывания и управления node-проектами на хостинге или VPS.

• Zero downtime reload. Удобная возможность обновления приложений без потери соединений клиентов.

• Логи и журналирование. Хранит историю логов, позволяя удобно отслеживать работу приложения.

• Кластеры и параллельное выполнение. Масштабирует одно приложение на несколько процессов для лучшей производительности.

Итог

Используйте Docker, если хотите создать изолированную и воспроизводимую рабочую среду, готовую к запуску на любых инфраструктурах.

Выбирайте PM2, если перед вами стоит задача простого и эффективного управления процессом приложения Node.js на одной конкретной инфраструктуре.

Часто оба решения используются совместно: сначала создается Docker-контейнер с вашим приложением, а внутри контейнера запускается само приложение через PM2. Такой подход обеспечивает лучшие практики контейнеризации и удобство эксплуатации Node.js-проекта.

В рамках нашей статьи мы будем выполнять деплой с pm2.

Деплой при помощи pm2

Для переноса проекта из вашего локального ПК можно воспользоваться двумя способами: 

С помощью SSH:

• Для этого воспользуйтесь утилитой rsync. Подробнее об этом в нашей статье.

С помощью GitHub:

• Создайте репозиторий на GitHub;

• Подключите репозиторий;

• Выполните пуш изменений в проект.

Подробнее можете узнать в данной статье.

Оригинальный код проекта можно найти на Гитхабе и клонировать в своей репозиторий при помощи команды:

Перейдите в директорию с RestAPI и проверьте .env-файл. Он должен выглядеть следующим образом:

Подробнее про настройку .env-файла вы можете прочитать здесь.

Теперь установим все пакеты для нашего Backend. Для этого пропишем команду:

Установим пакет для запуска приложения при помощи pm2:

Запустим приложение командой:

Вы должны получить следующий вывод в консоль:

Деплой Frontend

Код также необходимо перенести на сервер, используя методы, указанные выше. 

Оригинальный код проекта можно найти на Гитхабе и клонировать в свой репозиторий при помощи команды:

Далее перейдите в папку OnlineStore-Frontend и установите библиотеки:

Создайте .env-файл в корневой директории проекта с данными, указанными в статье. А именно:

Вместо server_url укажите ваш домен.

Фронтенд собираем при помощи команды:

Если на данном этапе у вас возникают ошибки, попробуйте следующее:

1. Проверьте наличие tsc:

2. Если TypeScript не установлен в devDependencies, добавьте его:

3. Сборка после установки:

4. Если проблема сохраняется, попробуйте переустановить зависимости начисто и снова пересоберите проект:

Подключение домена

Для того чтобы подключить ваш домен к VPS, необходимо создать в DNS-записях домена запись типа А с IP-адресом вашего сервера. Выглядеть это должно следующим образом:

Далее нажмите кнопку «Добавить» и дождитесь, пока ваш сайт будет отображаться по доменному имени.

Также нам понадобится поддомен для Backend. В настройках домена перейдите на вкладку «Поддомены» и создайте новый поддомен, например, cdn. В сервисах выберите тот же сервер, что и у основного домена.

Подключение бесплатного SSL-сертификата Let’s Encrypt

Для начала нам необходимо установить Nginx. Для этого введите следующие команды:

Создайте конфигурационный файл. Во всех командах ниже не забудьте заменить example.ru на ваш домен.

Добавьте в него следующую информацию:

После этого перенесите файлы из папки dist, в которой было собрано приложение, в папку Ngnix при помощи команды:

После чего активируйте конфигурацию:

Теперь получим SSL-сертификат. Пропишите команду:

При первом запуске Certbot запросит ваш контактный email, а также предложит принять условия лицензионного соглашения.

После успешного завершения процедуры Certbot покажет путь к сохраненным сертификатам, а конфигурация Ngnix будет выглядеть следующим образом:                                                   

Далее нам необходимо подключить домен на наш backend. Посмотрите активные проекты pm2, чтобы убедиться, что он запущен:

Если нет, выполните действия, описанные в разделе «Деплой при помощи pm2», чтобы его запустить.

Далее, этого создадим новую конфигурацию Ngnix:

И добавим следующее:

Здесь снова замените example.ru на ваш домен, а server_ip — на публичный IP-адрес сервера.

Активируйте конфигурацию и перезапустите Ngnix:

Выпустите SSL-сертификат на этот домен:

Перезапустите Ngnix:

Далее нужно изменить .env-файл для Frontend, заменив адрес API на домен cdn.example.ru. Для этого в папке с Frontend откройте файл .env:

И замените значение VITE_URL_API на ваш поддомен:

Соберите измененный проект:

И перенесите его в папку проекта Ngnix:

Также изменим в .env-файле backend-а строчку URL, указав поддомен вместо IP-адреса. Откройте файл в папке бэкенда: 

Замените строку URL на:

Важно: https://cdn.example.ru необходимо указать именно в таком виде, без кавычек.

Убедитесь, что вы находитесь в каталоге с backend, и перезапустите его при помощи команд:

Проверка работоспособности

Для проверки, что наше приложение работает, сделаем тестовый заказ.

Добавьте товар на сайт, как это описано в одной из наших предыдущих статей.

Перейдите на сайт, и вы увидите следующее:

Нажмите «Купить сейчас» и на странице товара добавьте его в корзину:

Перейдите в корзину, введите ваши данные и нажмите «Оплатить и заказать»:

Перейдите в почту; вы должны увидеть письмо:

Заключение

В заключение подведем итоги и выделим основные технологические решения для практического применения.

Backend-разработка

В качестве основы серверной части был выбран Node.js вместе с фреймворком Express, что обеспечило создание структурированного и производительного API. Для хранения данных использовалась NoSQL-база MongoDB, которая продемонстрировала эффективность при работе с динамическими и большими объемами информации благодаря гибкой схеме и механизмам индексации.

Frontend-разработка

Клиентская сторона была реализована на React с использованием TypeScript, что позволило построить модульный интерфейс с повышенной надежностью за счет статической типизации. Инструмент сборки Vite значительно ускорил процесс разработки благодаря оптимизированной работе с модулями и мгновенному обновлению кода.

Итоги

Представленный технологический стек (Node.js/Express/MongoDB для backend и React/TypeScript/Vite для frontend) подтвердил свою эффективность для создания полнофункциональных веб-приложений. Он сочетает высокую производительность, строгую типизацию для снижения ошибок и гибкость архитектуры, что обеспечивает масштабируемость и простоту поддержки проекта. Данный опыт служит прочной основой для реализации аналогичных и более сложных задач в области веб-разработки.