Сайт доставки еды Star Burger

Это сайт сети ресторанов Star Burger. Здесь можно заказать превосходные бургеры с доставкой на дом.

Сеть Star Burger объединяет несколько ресторанов, действующих под единой франшизой. У всех ресторанов одинаковое меню и одинаковые цены. Просто выберите блюдо из меню на сайте и укажите место доставки. Мы сами найдём ближайший к вам ресторан, всё приготовим и привезём. На сайте есть три независимых интерфейса. Первый — это публичная часть, где можно выбрать блюда из меню, и быстро оформить заказ без регистрации и SMS. Второй интерфейс предназначен для менеджера. Здесь происходит обработка заказов. Менеджер видит поступившие новые заказы и первым делом созванивается с клиентом, чтобы подтвердить заказ. После оператор выбирает ближайший ресторан и передаёт туда заказ на исполнение. Там всё приготовят и сами доставят еду клиенту. Третий интерфейс — это админка. Преимущественно им пользуются программисты при разработке сайта. Также сюда заходит менеджер, чтобы обновить меню ресторанов Star Burger.

Тестовая версия

Проект имеет рабочую тестовую версию.

Как установить

Как запустить dev-версию сайта

Для запуска сайта нужно запустить одновременно бэкенд и фронтенд, в двух терминалах.

Как собрать бэкенд (dev-версия)

Скачайте код:

git clone https://github.com/atmoslayer/star-burger.git

Перейдите в каталог проекта:

cd star-burger

Установите Python, если этого ещё не сделали.

Проверьте, что python установлен и корректно настроен. Запустите его в командной строке:

python --version

Важно! Версия Python должна быть не ниже 3.6. Возможно, вместо команды python здесь и в остальных инструкциях этого README придётся использовать python3. Зависит это от операционной системы и от того, установлен ли у вас Python старой второй версии. В каталоге проекта создайте виртуальное окружение:

python -m venv venv

Активируйте его. На разных операционных системах это делается разными командами:

• Windows: .\venv\Scripts\activate
• MacOS/Linux: source venv/bin/activate

Установите зависимости в виртуальное окружение:

pip install -r requirements.txt

• Получите API токен Яндекса в кабинете разработчика.
• Получите API токен Rollbar, зарегистрировавшись и войдя в личный кабинет (опционально).
• Определите переменную окружения ROLLBAR_TOKEN для полученного ключа.
• Определите переменную окружения ENVIRONMENT для названия окружения, которое будет отображаться в Rollbar при деплое:
• Определите переменную окружения YANDEX_API_KEY для полученного ключа.
• При запуске на сервере определите переменную окружения ALLOWED_HOSTS и положите туда ip-адрес сервера.
• Определите переменную окружения SECRET_KEY. Создайте файл .env в каталоге star_burger и положите туда такой код:
• В проекте используется база данных Postgresql, для её работы требуется указать следующие переменные:
  • POSTGRES_PASSWORD - пароль для доступа к postgres
  • POSTGRES_HOST - хост для работы с postgres. Если сайт запускается с помощью docker, то значением данной переменной должно быть название контейнера с базой данных.
  • POSTGRES_PORT - порт, для работы postgres. По умолчанию устанавливается значение 5432, менять его не рекомендуется.
  • POSTGRES_USER - пользователь для работы с базой данных. Не стоит путать с djando superuser, он создается отдельно.
  • POSTGRES_DB - название базы данных.
  • PGDATA - директория для хранения данных.

Пример заполненного файла .env

YANDEX_API_KEY=gkdirks-aappr5hf73hdns9-66hfk
ROLLBAR_TOKEN=ghfhsieyt748skamfnsbmldk243
ENVIRONMENT=development
POSTGRES_PASSWORD=strong_password
POSTGRES_HOST=postgres
POSTGRES_PORT=5432
POSTGRES_USER=atmoslayer
POSTGRES_DB=starburger
PGDATA=/var/lib/postgresql/data

Команды для конфигурации БД

Запустите миграции следующей командой:

python manage.py migrate

Для пользования административной панелью создайте пользователя с помощью команды

python manage.py createsuperuser

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

python manage.py load_locations

После конфигурации БД можно переходить к запуску сервера. Используйте команду:

python manage.py runserver

Откройте сайт в браузере по адресу http://127.0.0.1:8000/. Если вы увидели пустую белую страницу, то не пугайтесь, выдохните. Просто фронтенд пока ещё не собран. Переходите к следующему разделу README.

Как собрать фронтенд (dev-версия)

Откройте новый терминал. Для работы сайта в dev-режиме необходима одновременная работа сразу двух программ runserver и parcel. Каждая требует себе отдельного терминала. Чтобы не выключать runserver откройте для фронтенда новый терминал и все нижеследующие инструкции выполняйте там. Установите Node.js, если у вас его ещё нет. Проверьте, что Node.js и его пакетный менеджер корректно установлены. Если всё исправно, то терминал выведет их версии:

nodejs --version
# v16.16.0
# Если ошибка, попробуйте node:
node --version
# v16.16.0

npm --version
# 8.11.0

Версия nodejs должна быть не младше 10.0 и не старше 16.16. Лучше ставьте 16.16.0, её мы тестировали. Версия npm не важна. Как обновить Node.js читайте в статье: How to Update Node.js. Перейдите в каталог проекта и установите пакеты Node.js:

cd star-burger
npm ci --dev

Команда npm ci создаст каталог node_modules и установит туда пакеты Node.js. Получится аналог виртуального окружения как для Python, но для Node.js. Помимо прочего будет установлен Parcel — это упаковщик веб-приложений, похожий на Webpack. В отличиe от Webpack он прост в использовании и совсем не требует настроек.

Теперь запустите сборку фронтенда и не выключайте. Parcel будет работать в фоне и следить за изменениями в JS-коде:

./node_modules/.bin/parcel watch bundles-src/index.js --dist-dir bundles --public-url="./"

Если вы на Windows, то вам нужна та же команда, только с другими слешами в путях:

.\node_modules\.bin\parcel watch bundles-src/index.js --dist-dir bundles --public-url="./"

Дождитесь завершения первичной сборки. Это вполне может занять 10 и более секунд. О готовности вы узнаете по сообщению в консоли:

✨  Built in 10.89s

Parcel будет следить за файлами в каталоге bundles-src. Сначала он прочитает содержимое index.js и узнает какие другие файлы он импортирует. Затем Parcel перейдёт в каждый из этих подключенных файлов и узнает что импортируют они. И так далее, пока не закончатся файлы. В итоге Parcel получит полный список зависимостей. Дальше он соберёт все эти сотни мелких файлов в большие бандлы bundles/index.js и bundles/index.css. Они полностью самодостаточно и потому пригодны для запуска в браузере. Именно эти бандлы сервер отправит клиенту.

Теперь если зайти на страницу http://127.0.0.1:8000/, то вместо пустой страницы вы увидите:

Каталог bundles в репозитории особенный — туда Parcel складывает результаты своей работы. Эта директория предназначена исключительно для результатов сборки фронтенда и потому исключёна из репозитория с помощью .gitignore.

Сбросьте кэш браузера Ctrl-F5. Браузер при любой возможности старается кэшировать файлы статики: CSS, картинки и js-код. Порой это приводит к странному поведению сайта, когда код уже давно изменился, но браузер этого не замечает и продолжает использовать старую закэшированную версию. В норме Parcel решает эту проблему самостоятельно. Он следит за пересборкой фронтенда и предупреждает JS-код в браузере о необходимости подтянуть свежий код. Но если вдруг что-то у вас идёт не так, то начните ремонт со сброса браузерного кэша, жмите Ctrl-F5.

Как запустить prod-версию сайта

Как собрать бэкенд (prod-версия)

Необходимо выполнить все пункты для работы сайта в dev-режиме Необходимо добавить в файл .env следующие настройки:

• DEBUG — дебаг-режим. Поставьте False.
• SECRET_KEY — секретный ключ проекта. Он отвечает за шифрование на сайте. Например, им зашифрованы все пароли на вашем сайте.
• ALLOWED_HOSTS — см. документацию Django

Так как при отключенном дебаг-режиме требуется использовать отдельный веб-сервер для статики, необходимо установить и настроить nginx В конфиге настроек nginx требуется указать путь к каталогу статики и медиа, а так же настроить reverse-proxy и адреса работы сайта.

Пример конфига nginx:

server {
    server_name <server ip>;
    location /media/ {
        alias /opt/star-burger/media/;
    }
    location /static/ {
        alias /opt/star-burger/staticfiles/;
    }
    location / {
        include '/etc/nginx/proxy_params';
        proxy_pass http://127.0.0.1:8080/;
    }

Команда запуска бэкенда на сервере будет отличаться. После активации виртуального окружения и установки зависимостей используйте:

gunicorn -w 5 -b 127.0.0.1:8080 star_burger.wsgi:application

Как собрать фронтенд (prod-версия):

Необходимо выполнить все пункты для работы сайта в dev-режиме Для production версии используется следующая команда по сборке фронтенда:

./node_modules/.bin/parcel build bundles-src/index.js --dist-dir bundles --public-url="./"

Как запустить prod-версию сайта с помощью сервиса docker

Docker и docker-compose должны быть установлены. В Docker Desktop и в новых версиях docker плагин уже установлен, но синтаксис его использование в таком случае отличается от плагина, установленного отдельно. В проекте содержится деплойный скрипт, упрощающий работу с docker, чтобы им пользоваться рекомендуется отдельно установить плагин docker-compose версии не младше 1.19. Рекомендуется установить версию 2.20.3, именно она тестировалась в проекте. Проверьте, что docker и docker-compose корректно установлены. Если все исправно, терминал выведет их версии:

docker version
# Client:
#  Version:           24.0.5

docker-compose version
# Docker Compose version v2.20.3

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

Запуск с помощью инструкции docker-compose

Перейдите в каталог проекта. Проект запускается командой

docker-compose up --build -d

Данная команда соберет все образы, контейнеры и запустит их в общей сети. При запуске в данном режиме сайт будет готов к работе, но его база данных будет пуста, а так же будут отсутствовать миграции, их придется применить вручную. Для этого подключитесь к запущенному контейнеру с помощью команды:

docker exec -it backend /bin/bash

Вы окажетесь в терминале запущенного контейнера. Здесь можно выполнить миграции, создать супер-пользователя и загрузить локации с помощью команд конфигурации БД. По окончании настройки БД выйти из контейнера можно с помощью команды:

exit

Запуск с помощью деплойного скрипта

Проект содержит деплойный скрипт, который подтягивает изменения с GitHub, а затем пересобирает контейнеры на основе новых образов и делает миграции. Перед запуском скрипта выполните:

chmod ugo+x deploy_star_burger.sh

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

./deploy_star_burger.sh

После запуска скрипта

Цели проекта

Код написан в учебных целях — это урок в курсе по Python и веб-разработке на сайте Devman. За основу был взят код проекта FoodCart. Где используется репозиторий:

• Второй и третий урок учебного курса Django
• Второй урок учебного курса Docker