Создание интернет-магазина на Node.js с нуля

Материал подготовлен командой Simple-Server для администраторов VPS и выделенных серверов. Команды и пути проверяйте на тестовой машине перед production.

Кратко о задаче

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

Купить домен через сервис Simple-Server.
Разместить купленный у другого регистратора домен на серверах Simple-Server.
Полностью перенести домен от другого регистратора в Simple-Server.

Купить домен через сервис Simple-Server.

Разместить купленный у другого регистратора домен на серверах Simple-Server.

Полностью перенести домен от другого регистратора в Simple-Server.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Контейнеризация всего стека технологий. Позволяет упаковать всё окружение (ОС, зависимости, runtime) вместе с приложением, обеспечивая полную изоляцию и воспроизводимость рабочей среды.
Однородность инфраструктуры. Вы запускаете приложение точно таким же образом на локальной машине, тестовом окружении и в production.
Простота деплоя. Легко переносить контейнеры между серверами, облачными провайдерами и средами.
Гибкость. Можно легко изменить конфигурацию ОС, зависимые библиотеки и среду исполнения (например, версию Node.js).

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

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

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

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

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

Мониторинг и управление процессами Node.js-приложений. Подходит для быстрого развертывания и управления node-проектами на хостинге или VPS.
Zero downtime reload. Удобная возможность обновления приложений без потери соединений клиентов.
Логи и журналирование. Хранит историю логов, позволяя удобно отслеживать работу приложения.
Кластеры и параллельное выполнение. Масштабирует одно приложение на несколько процессов для лучшей производительности.

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

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

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

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

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

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

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

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

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

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

Для этого воспользуйтесь утилитой 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.simple-server.tech"
MAIL_USER = "<email>"
MAIL_PASSWORD = "<password>"
URL = “server_ip”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 будет выглядеть следующим образом:

Далее нам необходимо подключить домен на наш 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
sudo nginx -t
sudo systemctl reload nginx

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

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

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

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

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

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

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

URL = https://cdn.example.ru

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

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

pm2 kill
pm2 start index.js

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

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

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

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

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

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

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

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

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

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

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

Нужен сервер для практики? Арендуйте VPS/VDS в России — root-доступ, NVMe, DDoS-защита и поддержка 24/7.

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

Кратко о задаче

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

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

VPS для проекта

StarterVDS

PerformanceVDS

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

Кратко о задаче

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

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

VPS для проекта

StarterVDS

PerformanceVDS

Читайте также