Digital Store - это настраиваемый интернет-магазин на платформе NodeJS для продажи ваших цифровых товаров.
Демонстрания функционирования интернет-магазина.
- О проекте
- Структура репозитория
- Установка и настройка скрипта
- Запуск скрипта на локальном компьютере
- Запуск скрипта на удаленном сервере
- Переменные среды
- API
- Требования
- Лицензия
Этот проект представляет из себя интернет-магазин на платформе NodeJS, вы можете продавать свои цифровые товары именно скачав этот репозиторий, в панели управления вы сможете создавать, удалять и редактировать товары или категории . В проекте используется концепция REST API, поэтому для отдачи информации клиенту существует отдельный API. Информация о покупателях, товарах, категориях и т.д хранится в БД MongoDB (используется нативный драйвер).
- Возможность выбирать интересующие категории, переход по одиночным страницам конкретного товара.
- Возможность комментировать как отдельный товар, так и весь магазин на отдельной странице с помощью системы комментариев Disqus.
- Возможность фильтровать интересующую категорию или все товары через фильтр.
- Покупатель может совершать одну или несколько покупок через корзину или через кнопку "Купить".
- Оплата осуществляется через сервис QIWI API.
- Результатом оплаты будут данные одного или нескольких товаров, все данные отсылаются на почту покупателя, которую он указывал при создании заказа.
- Покупатель может узнать все свои совершенные покупки в магазине на отдельной странице.
Для входа в админ-панель необходимо дописать в адресной строке /admin
, после вы попадете на страницу авторизации где нужно вписать данные email:password
. По умолчанию [email protected]:admin
- Пароль админа хэшируется через
bcrypt
для безопасности и записывается в БД. - На главной странице есть небольшая статистика, где можно посмотреть: сумму проданных товаров, кол-во проданных товаров, кол-во товаров в наличии.
- На главной странце так же можно узнать подробные данные о покупателях: номер заказа, почта покупателя, способ оплаты, дата покупки, сумма и данные которые были высланы по почте.
- Возможность находить конкретного покупателя через поле (нужно знать номер заказа).
- Возможность добавлять, удалять или редактировать товары на странице "Товары", так же можно посмотреть и информацию о товаре.
- Поиск товаров через поле поиска (нужно знать частичное или полное название товара).
- Добавление, удаление и редактирование категорий через страницу "Категории", каждой категории присваивается собственная иконка, которую можно загрузить через страницу "Иконки".
- Возможность править контент, изменять общее оформление магазина (только цвет).
- Возможность изменять данные администратора: почта, пароль, имя.
В основе всего репозитория существуют две ветки. Ветка master предназначена для разработки приложения, для выгрузки готового приложения на сервер используйте ветку production.
- Установите последний релиз Digital Store из GitHub репозитория.
- Или клонировать репозиторий
git clone https://github.com/sergeyyarkov/digital-store.git -b production
. - Установите Node.js не ниже версии 7.6.0, в процессе установки Node.js установите Node Package Manager.
- Установите БД MongoDB на ваш компьютер или создайте кластер на сайте www.mongodb.com и импортируйте туда дамп структуры БД, которые находится в корне приложения
/database_dump
. - Для работоспособности интернет-магазина необходимо установить зависимости. Выполните комманду
npm install
. - Далле необходимо настроить переменные среды. Создайте файл
.env
в корне вашего интернет-магазина и запишите туда значения для переменных. Обратите внимание, что для выгрузки скрипта на production сервер, нужно устанавливать переменные среды для вашего сервера, файл.env
создавать не нужно. - После этого, введите
npm run start
и перейдите по адресуlocalhost:3000
, вы увидите уже рабочий интернет-магазин который запущен у вас на локальном компьютере.
В данном примере на удаленном сервере будет использоваться связка Ubuntu 18.04, Nginx, MongoDB, PM2, NodeJS
+ SSL Lets Encrypt
- Переходим на сайт RUVDS.COM и приобретаем VPS услугу.
- Подключаемся к серверу по SSH и следуем далее описанным шагам.
- Устанавливаем NodeJS:
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
apt-get install -y nodejs <--- попросит перезагрузить сервисы - соглашаемся (YES)
Если при выполнении команд node -v
и npm -v
выдается версия, то идем дальше.
- Создаем папку
/apps
, после переходим в нее и клонируем проект с github и переходим в наш магазин:
mkdir apps
cd apps/
git clone https://github.com/sergeyyarkov/digital-store.git -b production
cd digital-store/
- Устанавливаем зависимости для интернет-магазина
npm install
. - Устанавливаем MongoDB:
apt install -y mongodb
systemctl status mongodb <--- проверяем состояние службы, должно быть active (running)
Теперь нужно дать доступ для подключения к БД именно с вашего компьютера, это нам понадобится для импортирования дампа БД: ip адресс берете с сайта 2ip
ufw enable
ufw allow from ваш_ip_адресс_компьютера/32 to any port 27017
- Далее открываем конфигурационный файл MongoDB:
nano /etc/mongodb.conf
: Добавляем IP-адрес вашего сервера в значение bindIP:
logappend=true
bind_ip = 127.0.0.1,your_server_ip
#port = 27017
- Сохраните файл, закройте редактор и перезапустите MongoDB:
systemctl restart mongodb
: - Теперь доступ к БД есть только у вашего компьютера, далее скачиваем Studio 3T и создаем новое соединение, ip адресс указываем вашего сервера.
- После подключения, создаем новую БД и называем её как хотим.
- Кликаем по вашей созданной БД и вверху нажимаем
Import
, после выбираем все JSON файлы, которые хранятся в папке/database_dump
. - Если все 6 коллекций успешно импортировались, то идем дальше.
- Устанавливаем менеджер процессов PM2
npm install -g pm2
. - Редактируем файл с переменными в файле ecosystem.config.js и устанавливаем свои значения
nano ecosystem.config.js
. - Далее запускаем наше приложение:
pm2 start ecosystem.config.js --env production <--- стартуем наше приложение
pm2 status <--- как узнать статус запущенных процессов
pm2 save <--- сохраняем процесс
pm2 startup ubuntu <--- автоматически запускаем наше приложение в случае рестарта сервера
- Настраиваем файрволл:
ufw allow ssh
ufw allow http
ufw allow https
- Далее устанавливаем веб-сервер nginx
apt install nginx
, после редактируем конфигурационный файлnano /etc/nginx/sites-available/default
:
server_name yourdomain.com www.yourdomain.com;
location / {
proxy_pass http://localhost:3000; #порт запущенного приложения
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
- Обязательно настройте gzip сжатие, ваш сайт будет работать быстрее:
server {
gzip on;
gzip_disable "msie6";
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
}
- Так же желательно избавиться от дубля страницы www:
if ($host = 'www.example.com') {
return 301 https://example.com$request_uri;
}
- После настройки проверьте ваш конфигурационный файл на ошибки
nginx -t
, если ошибок нет, то перезапускаем сервис nginxservice nginx restart
. - На сайте RUDVS добавьте свой домен и привяжите его к своему серверу, настройте DNS записи у регистратора. Через какое то время ваш магазин будет доступен по домену.
- Далее настройте SSL сертификат:
add-apt-repository ppa:certbot/certbot
apt-get update
apt-get install python-certbot-nginx
certbot --nginx -d yourdomain.com -d www.yourdomain.com <--- в процессе установки выбираем цифру 2
- Ваш конфигурационный файл должен выглядеть примерно так:
server {
gzip on;
gzip_disable "msie6";
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name yourdomain.ru www.yourdomain.ru;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
if ($host = 'www.yourdomain.ru') {
return 301 https://yourdomain.ru$request_uri;
}
listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/yourdomain.ru/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/yourdomain.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.yourdomain.ru) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = yourdomain.ru) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80 default_server;
listen [::]:80 default_server;
server_name yourdomain.ru www.yourdomain.ru;
return 404; # managed by Certbot
}
В скрипте на данный момент доступна система оплаты через сервис QIWI, чтобы настроить оплату в вашем магазине следуйте следующим шагам:
- Перейдите на сайт QIWI API и создайте пару ключей авторизации. Сохраните секретный ключ.
- Если вы хотите настроить оформление формы приемов перевода, то перейдите сюда и скопируйте значение переменной
themeCode
и вставьте это значение по адресуconfig/routes/payments/qiwi.payment.js
. - Секретный ключ нужно указать в поле переменной среды
QIWI_SECRET_KEY
. - Редирект после оплаты товара через QIWI на локальный адрес
localhost:3000
работать не будет, необходим домен.
Для отдачи данных товара на почту покупателя после покупки товара, нужно настроить nodemailer:
- Настройте почтовый сервис по адресу
config/nodemailer.config.js
:
host: "smtp.mail.ru",
port: 465,
secure: true, // true для 465, false для остальных.
- Затем укажите переменные среды
EMAIL_LOGIN
иEMAIL_PASSWORD
.
В интернет магазине используется система комментариев Disqus:
- Добавьте свой домен на их сайт и замените embed код по адресу
dist/public/js/disqus.js
.
Перменные среды нужны для работоспособности всего приложения, очень важно вписать верные данные для избежания возможных ошибок.
Переменная | Описание |
---|---|
DATABASE_URI | Подключение к БД MongoDB |
DATABASE_NAME | Имя БД |
EMAIL_LOGIN | Логин от почты для отправки данных покупателю |
EMAIL_PASSWORD | Пароль от почты |
QIWI_SECRET_KEY | Секретный ключ QIWI для работоспособности системы оплаты |
.env
файл:
DATABASE_URI=
DATABASE_NAME=
QIWI_SECRET_KEY=
EMAIL_LOGIN=
EMAIL_PASSWORD=
API представляет из себя различные URL, которые отвечают данными только в формате JSON. Здесь описаны основные GET
запросы на сервер для получения данных:
https://store-name.com/api/items
Ответ:
[
{
_id: "5e15dbc415303a1980cd77a0",
title: "Тестовый товар №1",
count: 0,
price: 1,
category: "steam",
description: "-",
date: "2020-01-08T13:40:20.353Z"
},
{
_id: "5e15dcb4138c3339bcbc3719",
title: "Тестовый товар №2",
count: 0,
price: 1,
category: "uplay",
description: "-",
date: "2020-01-08T13:44:20.940Z"
},
]
https://store-name.com/api/items/{category}
Ответ:
[
{
_id: "5e15dbc415303a1980cd77a0",
title: "Тестовый товар №1",
count: 0,
price: 1,
category: "steam",
description: "-",
date: "2020-01-08T13:40:20.353Z"
},
{
_id: "5e1ccf30d5b894228c86385a",
title: "Тестовый товар №2",
count: 10,
price: 1,
category: "steam",
description: "-",
date: "2020-01-13T20:12:32.814Z"
}
]
https://store-name.com/api/categories
Ответ:
[
{
_id: "5df64563309e691f2c33d400",
title: "uplay",
img: "img-1576349954743.svg",
type: "type",
format: "format"
},
{
_id: "5e04ea023625771abc75fd14",
title: "fortnite",
img: "img-1576349989720.svg",
type: "type",
format: "format"
},
]
https://store-name.com/api/category/{category}
Ответ:
[
{
_id: "5df64563309e691f2c33d400",
title: "uplay",
img: "img-1576349954743.svg",
type: "type",
format: "format"
}
]
https://store-name.com/api/items/data
Ответ:
[
{
_id: "5e15dbc415303a1980cd77a0",
title: "Тестовый товар №1",
data: ["login:pass", "login:pass", "login:pass"]
},
{
_id: "5e175c63b479600ac493ce88",
title: "Тестовый товар №2",
data: ["login:pass", "login:pass", "login:pass"]
}
]
https://store-name.com/api/buyers
Ответ:
[
{
_id: "5e1c97701b619a31f010062c",
bill_id: "9244e5ae-560a-432a-9882-bc1b941c8cca",
email: "[email protected]",
method: "qiwi",
date: "2020-01-13T18:13:38.623+03:00",
amount: 2,
data: ["login:pass", "login:pass"]
}
]
https://store-name.com/api/icons
Ответ:
[
"img-1576349954743.svg",
"img-1576349989720.svg",
"img-1576420937629.svg",
"img-1576421960189.svg"
]
- Node.js v7.6.0 или выше