Создание нового проекта
Первым делом нам нужно разобраться с вашей рабочей средой. Я использую одни из самых популярных инструментов:
- Операционную систему MacOS с менеджером пакетов Homebrew
- Laravel Valet для локальной разработки
- Интегрированную среду PhpStorm
- Веб-сервер Nginx
- База данных MySQL 8.0
- Php 7.4 и NodeJS 17
Здесь нет ничего особенного, обычный набор веб-разработчика.
Если вы используете такой же сетап, то поздравляю, вам будет максимально легко следовать моим инструкциям - нужно только установить специальный драйвер для Valet из репозитория vesp-valet-driver, что делается простым копированием файла VespValetDriver.php в ~/.config/valet/Drivers.
Структурно Vesp состоит из 2х больших частей: фронтенда на VueJS и бэкенда на PHP. Обе части разрабатываются (и могут быть использованы) независимо друг от друга и хранятся в разных репозиториях:
Объединяются они в 1 общем пакете, который называется просто Vesp и ставится из Packagist при помощи composer. Давайте создадим наш новый проект VespShop.
composer create-project vesp/vesp ./VespShopКоманда create-project у composer не просто скачивает пакеты, но и запускает скрипты, прописанные в composer.json. В нашем случае они устанавливают зависимости Node.js.
Далее заходим в директорию VespShop и делаем valet link vesp-shop, что создаёт в нашем Valet новый сайт vesp-shop.test.
В нём пока ничего нет, поэтому делаем в той же директории composer node:generate и переходим по локальному адресу http://vesp-shop.test - теперь вы должны увидеть такую картинку:
Давайте разберёмся как это всё работает.
Структура проекта
В корне проекта лежат следующие файлы и директории:
- .env.dist пример конфигурации проекта
- .env рабочая конфигурация, которая исопользуется в проекте
- composer.json наши PHP зависимости и команды управления проектом
- composer.lock служебный файл Composer с установленными версиями зависимостей
- core это наш бэкенд со всем PHP кодом: модели, контроллеры, маршруты, консольные скрипты - в общем, вся серверная часть.
- frontend а это, понятное дело, фронтенд. Причём внутри сразу 2 независимых веб-приложения: админка и публичный веб-сайт
- www публично доступная директория с одним единственным коннектором для запросов в API и примером правил для .htaccess.
Запущенная нами команда composer node:generate создала в frontend/dist статичные HTML и JS файлы нашего фронтенда. Причём там собрано 2 приложения: admin и site.
Когда вы открываете vesp-shop.test, ваш запрос принимает локальный Nginx, отправляет в Valet, тот смотрим доступные драйвера, запускает драйвер для Vesp, а тот говорит ему, откуда нужно грузить файлы - именно из frontend/dist.
Статичные файл загружаются в браузер и дальше отправляют запросы на сервер через API. Таким образом и происходит всё взаимодействие фронтеда с бэкендом, через разные запросы в API и ответы в формате JSON.
Важно понимать, что в отличие от MODX сервер здесь не генерирует никакой HTML код в момент запроса, весь нужный код уже заранее сгенерирован и загружен пользователем. Теперь он просто выводится в соотвеcтвии со своей логикой и ответами бэкенда.
Публичный сайт по умолчанию никаких запросов пока не делает, просто выводит логотип системы на чёрном фоне. Поэтому давайте посмотрим на админку по адресу http://vesp-shop.test/admin/.
Что бы вы здесь не указывали, получите ошибку. Потому что у нас еще нет никаких данных, мы даже таблицы еще не создали.
Работа с базой данных
Первым делом нам нужно создать базу для нашего проекта.
mysql -e "create database VespShop" -uroot -prootКак видно, у меня локальный root MySQL с паролем root. Дальше смотрим наш .env файл и меняем настройки:
# имя проекта, будет использовать на фронтенде
APP_NAME="Vesp Shop"
# базовый url сайта
SITE_URL=http://vesp-shop.test/
# url для API запросов, может отличаться от базового
API_URL=http://vesp-shop.test/api/
# Разрешение для кроссдоменных запросов, на локалке обязательно включаем
CORS=1
# Настройки доступа в MySQL
DB_DRIVER=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_PREFIX=app_
DB_DATABASE=VespShop
DB_USERNAME=root
DB_PASSWORD=root
DB_CHARSET=utf8mb4
DB_COLLATION=utf8mb4_general_ci
DB_FOREIGN_KEYS=1
# Настройки для генерации JWT, пока можно не трогать
JWT_SECRET=secret
JWT_EXPIRE=2592000
JWT_MAX=3
# Абсолютные пути к директориям
UPLOAD_DIR=/Users/bezumkin/Projects/VespShop/upload/
CACHE_DIR=/Users/bezumkin/Projects/VespShop/tmp/Вы должны указать собственные пути к директориям, их можно узнать командой pwd в MacOS.
После изменения файла .env нам нужно пересобрать фронтенд, потому что изменился адрес отправки API запросов - composer node:generate.
А дальше запускаем новые команды:
composer db:migrate
composer db:seedПервая команда создаёт таблицы, вторая "засеивает" их начальными данными.
После этого можно заходить в админку с логином и паролем admin.
Заключение
Сегодня мы создали и настроили новый проект на Vesp. Он уже работает, но все страницы и данные пока по-умолчанию. На следующих уроках мы научимся их менять под свои нужды.
Часть с настройкой проекта на локальной машине обычно вызывает самое больше число вопросов, поэтому я жду их в комментариях. Как только разберёмся с этим, дальше всё пойдёт гораздо проще и быстрее.
