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

11 декабря 2025 г.

12 минут чтения

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

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

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

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

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

App Platform

Готовое окружение для быстрого деплоя
и тестирования проектов из GitHub, GitLab, Bitbucket
или любого другого git-репозитория.

Домен

Перед началом деплоя создадим доменное имя. Для этого перейдем в панель управления 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 -v && npm -v

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

    
      
    
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
\. "$HOME/.nvm/nvm.sh"
nvm install 22

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

    
      
    
    node -v && npm -v

Убедитесь, что версии 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;
Подключите репозиторий;
Выполните пуш изменений в проект.

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

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

    
      
    
    git clone https://github.com/SLEMSIK/OnlineStore-RestAPI.git

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

    
      
    
    MONGO_URL = "mongodb://<user>:<password>@<ip>:27017/<db>?authSource=admin&directConnection=true" 
PORT = 5000
MAIL_SERVICE = "smtp.timeweb.ru"
MAIL_USER = "<email>"
MAIL_PASSWORD = "<password>"
URL = “server_ip”

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

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

    
      
    
    npm install

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

    
      
    
    npm install pm2 -g

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

    
      
    
    pm2 start index.js

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

Деплой Frontend

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

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

    
      
    
    git clone https://github.com/SLEMSIK/OnlineStore-Frontend.git

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

    
      
    
    npm install

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

    
      
    
    VITE_API_URL=http://server_url:5000/api
VITE_ADMIN_EMAIL=admin@twconlinestore.ru
VITE_ADMIN_PHONE=+71234567890

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

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

    
      
    
    npm run build

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

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

    
      
    
    npx tsc -v

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

    
      
    
    npm i -D typescript

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

    
      
    
    npm run build

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

    
      
    
    rm -rf node_modules package-lock.json && npm install && npm run build

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

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

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

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

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

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

    
      
    
    sudo apt update
sudo apt install nginx certbot python3-certbot-nginx

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

    
      
    
    sudo nano /etc/nginx/sites-available/example.ru

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

    
      
    
    server {
    server_name example.ru www.example.ru;
    root /var/www/store;
    index index.html;
}

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

    
      
    
    sudo mkdir /var/www/store && cp -r ~/OnlineStore-Frontend/dist/* /var/www/store/

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

    
      
    
    sudo ln -s /etc/nginx/sites-available/example.ru /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

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

    
      
    
    sudo certbot --nginx -d example.ru -d www.example.ru

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

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

    
      
    
    server {
    server_name twconlinestore.ru www.twconlinestore.ru;
    root /var/www/store;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/ twconlinestore.ru/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/twconlinestore.ru/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
server {
    if ($host = www.twconlinestore.ru) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = twconlinestore.ru) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    server_name twconlinestore.ru www.twconlinestore.ru;
    listen 80;
    return 404; # managed by Certbot

    location / {
        try_files $uri $uri/ /index.html;
    }
}

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

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

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

    
      
    
    sudo nano /etc/nginx/sites-available/cdn.example.ru

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

    
      
    
    server {
    listen 80;
    server_name cdn.example.ru www.cdn.example.ru;

    location / {
        proxy_pass http://server_ip:5000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_connect_timeout 30s;
        proxy_send_timeout 30s;
        proxy_read_timeout 30s;
    }
}

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

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

    
      
    
    sudo ln -s /etc/nginx/sites-available/cdn.example.ru /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

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

    
      
    
    sudo certbot --nginx -d cdn.example.ru -d www.cdn.example.ru

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

    
      
    
    sudo nginx -t
sudo systemctl reload nginx

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

    
      
    
    nano .env

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

    
      
    
    VITE_API_URL=https://cdn.example.ru/api

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

    
      
    
    npm run build

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

    
      
    
    rm -rf /var/www/store
mkdir /var/www/store
sudo cp -r ~/OnlineStore-Frontend/dist/* /var/www/store/

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

    
      
    
    nano .env

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

    
      
    
    URL = https://cdn.example.ru

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

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

    
      
    
    pm2 kill
pm2 start index.js

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

Итоги

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

11 декабря 2025 г.

12 минут чтения

Разработка Node.js

Эту статью проверил Дмитрий Костин

Инженер поддержки

Хотите внести свой вклад?

Участвуйте в нашей контент-программе за
вознаграждение или запросите нужную вам инструкцию

Пока нет комментариев

Вход/ Регистрация