spirit-drive / digital-store Goto Github PK

Digital Store - это настраиваемый интернет-магазин на платформе NodeJS для продажи ваших цифровых товаров.
Демонстрация функционирования интернет-магазина.

• О проекте
• Структура репозитория
• Установка и настройка скрипта
• Запуск скрипта на локальном компьютере
• Запуск скрипта на удаленном сервере
• Выгрузка скрипта на бесплтаный хостинг от Heroku
• Переменные среды
• 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 i.
• Далле необходимо настроить переменные среды. Создайте файл .env в корне вашего интернет-магазина и запишите туда значения для переменных. Обратите внимание, что для выгрузки скрипта на production сервер, нужно устанавливать переменные среды для вашего сервера, файл .env создавать не нужно.
• После этого, введите npm run start и перейдите по адресу localhost:3000, вы увидите уже рабочий интернет-магазин который запущен у вас на локальном компьютере.

В данном примере на удаленном сервере будет использоваться связка Ubuntu 18.04, Nginx, MongoDB, PM2, NodeJS + SSL Lets Encrypt

• Переходим на сайт RUVDS.COM и приобретаем услугу VPS-хостинга.
• Подключаемся к серверу по SSH и следуем далее описанным шагам.
• Устанавливаем NodeJS:

apt-get update && apt-get install curl -y
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
source ~/.bashrc
nvm install 12

Если при выполнении команд 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, если ошибок нет, то перезапускаем сервис nginx service 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 <--- в процессе установки выбираем цифру 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
}

• Регистрируемся на сайте Heroku.
• Устанавливаем heroku-cli https://devcenter.heroku.com/articles/heroku-cli.
• Проверьте установку, написав в консоле heroku --help если всё выводит, идем дальше.
• Залогиньтесь: heroku login.
• Создайте новый проект Herkou: heroku create.
• Создайте кластер на сайте www.mongodb.com и импортируйте туда дамп структуры БД, который находится в корне приложения /database_dump. При подключении к БД выберите метод Connect Your Application
• Переходим на сайт heroku, идем в свое созданное приложение и открываем вкладку Settings -> Config Vars кнопка Reveal Config Vars и настраиваем переменные среды.
• Создаем папку с любым названием, открываем её и клонируем проект с github: git clone https://github.com/sergeyyarkov/digital-store.git -b production .
• Сменим ветку на master: git checkout -b master
• Удаляем файл ecosystem.config.js (в случае с heroku он не нужен т.к переменные мы храним у heroku)
• Добавляем удаленный репозиторий heroku git:remote -a название вашего приложения.
• Деплой:

git add .
git commit -m "make it better"
git push heroku master

В скрипте на данный момент доступна система оплаты через сервис 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.

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

.env файл:

DATABASE_URI=
DATABASE_NAME=
QIWI_SECRET_KEY=
EMAIL_LOGIN=
EMAIL_PASSWORD=

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 или выше

MIT