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

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

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

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

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

Третий интерфейс — это админка. Преимущественно им пользуются программисты при разработке сайта. Также сюда заходит менеджер, чтобы обновить меню ресторанов Star Burger.

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

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

Как собрать бэкенд

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

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

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

cd star-burger

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

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

python --version

Важно! Версия Python должна быть не ниже 3.8.

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

В каталоге проекта создайте виртуальное окружение:

python -m venv venv

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

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

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

pip install -r requirements.txt

Определите переменные окружения. Создать файл .env в каталоге star_burger/ и положите туда такой код:

# Секретный ключ для конкретной установки Django. Используется для обеспечения криптографической подписи, и его значение должно быть уникальным и непредсказуемым. Рекомендуется использовать не менее 50 символов.
DJANGO_SECRET_KEY = "django-insecure-0if40nf4nf93n4"

# Строка подключения к базе данных
DATABASE_URL = postgres://user:password@host/database

# Ключ Яндекс JavaScript API и HTTP Геокодера для получения координат по адресу
YAGEO_API_KEY = "x0x0x0x00-x00x0x000-x00x0x0xx-x0xxx00x"

# Токен системы мониторинга Rollbar. По-умолчанию "rollbar_token"
ROLLBAR_POST_SERVER_TOKEN = "d57b18ad651f4a069fd9a4371b8e4c4a"

# Профиль настроек Rollbar экземпляра проекта. По-умолчанию "production"
ROLLBAR_ENVIRONMENT = "development"

# Логическое значение, которое включает/выключает режим отладки. Если в вашем приложении возникает исключение, когда значение DEBUG равно True, Django отобразит подробную обратную трассировку, включая множество метаданных о вашей среде. Для рабочей среды настоятельно рекомендуется использовать значение False.
DEBUG = True

# Список строк, представляющих имена хостов/доменов, которые может обслуживать этот сайт на Django. Это мера безопасности для предотвращения атак на заголовки HTTP-узлов.
ALLOWED_HOSTS = .localhost,127.0.0.1,[::1]

Создайте файл базы данных SQLite и отмигрируйте её следующей командой:

python manage.py migrate

Запустите сервер:

python manage.py runserver

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

Собрать фронтенд

Откройте новый терминал. Для работы сайта в 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. В отличии от 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-версия сайта запускается в контейнерах с помощью docker-compose.
На сервере должны быть установлены docker-compose и nginx. В данной сборке используется postgre докер, но можно использовать и штатно установленный PostgreSQL сервер.

Перед запуском проекта необходимо заполнить файлы переменных среды:
.env:

# Секретный ключ для конкретной установки Django. Используется для обеспечения криптографической подписи, и его значение должно быть уникальным и непредсказуемым. Рекомендуется использовать не менее 50 символов.
DJANGO_SECRET_KEY=xxxXxxxXxxxxxXxxxxxXxxxxXxxxXxxxXxx

# Строка подключения к серверу баз данных
DATABASE_URL=postgres://user:password@host:port/database

# Ключ Яндекс JavaScript API и HTTP Геокодера для получения координат по адресу
YAGEO_API_KEY=x0x0x0x00-x00x0x000-x00x0x0xx-x0xxx00x

# Токен системы мониторинга Rollbar. По-умолчанию "rollbar_token"
ROLLBAR_POST_SERVER_TOKEN=xXxXXXxxxxxXxxxxxxxXXX

# Профиль настроек Rollbar экземпляра проекта. По-умолчанию "production"
ROLLBAR_ENVIRONMENT=production

# Логическое значение, которое включает/выключает режим отладки. Если в вашем приложении возникает исключение, когда значение DEBUG равно True, Django отобразит подробную обратную трассировку, включая множество метаданных о вашей среде. Для рабочей среды настоятельно рекомендуется использовать значение False.
DEBUG=False

# Список строк, представляющих имена хостов/доменов, которые может обслуживать этот сайт на Django. Это мера безопасности для предотвращения атак на заголовки HTTP-узлов.
ALLOWED_HOSTS=.localhost,127.0.0.1,[::1]

.env_db (Файл можно не создавать, если используется внешний сервер баз данных):

# Пользователь, пароль и название базы данных, которые докер Postgre создаст при старте
POSTGRES_USER=user
POSTGRES_PASSWORD=pass
POSTGRES_DB=db_name

Для запуска проекта выполните следующие шаги:

$ cd /opt/star-burger
$ docker-compose build # собираем образ django
$ docker-compose run frontend # собираем образ node + parcel и создаем бандлы
$ docker-compose up -d # запуск всей сборки

Для автоматизированного обновления прод-версии, можно использовать следующий bash-скрипт.
Создайте файл deploy_star_burger.sh в удобном месте со следующим содержанием:

#!/bin/bash

set -Eeuo pipefail

cd /opt/star-burger
git pull

docker-compose down
docker-compose build
docker-compose run frontend
docker-compose up -d
systemctl reload nginx

commithash=$(git log -n 1 --pretty=format:"%h")
commitauthor=$(git log -n 1 --pretty=format:"%an")
rollbar_token=$(source .env; echo $ROLLBAR_POST_SERVER_TOKEN)
curl -X POST -H "X-Rollbar-Access-Token: $rollbar_token" -H "Content-Type: application/json" -d '{"environment": "production", "revision": "'$commithash'", "rollbar_name": "{rollbar_login}", "local_username": "'$commitauthor'",  "status": "succeeded"}' https://api.rollbar.com/api/1/deploy

echo -e "\nStar-burger site updated successfully\n"

Сделайте файл исполняемым:

$ chmod +x deploy_star_burger.sh

И запустите:

$ ./deploy_star_burger.sh

Перейти на демо-сайт

Цели проекта

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

Где используется репозиторий:

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