Создание нового проекта
Первым делом нам нужно разобраться с вашей рабочей средой. Я использую одни из самых популярных инструментов:
- Операционную систему 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. Он уже работает, но все страницы и данные пока по-умолчанию. На следующих уроках мы научимся их менять под свои нужды.
Часть с настройкой проекта на локальной машине обычно вызывает самое больше число вопросов, поэтому я жду их в комментариях. Как только разберёмся с этим, дальше всё пойдёт гораздо проще и быстрее.
0
👍
👎
❤️
🔥
😮
😢
😀
😡
955
30.05.2022, 10:31:26
63 комментария
NightRider
31.05.2022, 16:02:07
Использую Valet, но при заходе на локальный домен пишет:
Did not get front controller from driver. Please return a front controller to be executed.
Василий Наумкин
31.05.2022, 16:10:47
Нужно установить драйвер Valet для Vesp
А потом перейти в директорию проекта и проверить, что её обслуживает именно он командой valet which, в ответ должно быть
NightRider
31.05.2022, 16:29:53
Спасибо! Да, дело оказалось в нём в итоге. Только в моем случае его надо было скопировать в папку ~/.valet/Drivers поскольку конфиги лежали именно там. Видимо от версии еще зависит.
Василий Наумкин
31.05.2022, 16:41:14
Видимо =)
Кирилл Дворянинов
02.06.2022, 16:38:36
У меня вообще чему-то пишет при заходе на vesp-shop.test 404 - Not Found
А в папке при команде valet which выдает следующее - This site is served by [BasicValetDriver].
Да и еще при вызове node:generate - [BABEL] Note: The code generator has deoptimised the styling of /Users/kirill/Desktop/Project/VespShop/frontend/node_modules/bootstrap-vue/src/icons/icons.js as it exceeds the max of 500KB.
Василий Наумкин
02.06.2022, 16:46:49
Значит драйвер Vesp не установлен. Проверь директорию, может тоже нужно в ~/.valet/Drivers скопировать.
Это просто замечание, не ошибка - можно смело игнорировать.
Alexey
04.06.2022, 15:38:20
Valet не использую. С иконками в админке какая-то шляпа.
Конфиг для NGINXа такой
Василий Наумкин
04.06.2022, 15:51:37
Скорее всего это баг стилей fontawesome, после их перехода на 6ю версию.
Пока можно не обращать внимания, я проверю и добавлю исправление в Vesp.
Дмитрий П.
04.06.2022, 19:53:15
Я решал эту проблему добавляя в index.scss импорт стилей
При чем в dev режиме все нормально, а в production - ломаются стили
Василий Наумкин
04.06.2022, 19:55:26
Да, именно так это и решается - просто мне надо прописать импорт в Vesp по умолчанию.
Василий Наумкин
05.06.2022, 08:32:57
Обновил пакет в репозитории, теперь все новые установки будут с этими стилями.
Вася
04.06.2022, 20:15:08
vesp-shop.test "Not found."
Три раза все переустанавливал
valet which
This site is served by [VespValetDriver].
Василий Наумкин
04.06.2022, 20:24:39
А что говорит valet links?
Эта команда должна показать домены всех обслуживаемых сайтов.
Василий Наумкин
05.06.2022, 07:44:48
Слушай, а ты не забыл сделать composer node:generate случайно? А то, может, сайт-то работает - просто открывать нечего?
Вася
05.06.2022, 23:14:44
[BABEL] Note: The code generator has deoptimised the styling of ***/Sites/VespShop/frontend/node_modules/bootstrap-vue/src/icons/icons.js as it exceeds the max of 500KB.
Вот такая ошибка
куда вставить babel: { compact: true } который я нагуглил по этой ошибке не разобрался
Василий Наумкин
06.06.2022, 07:14:41
Это не ошибка, а note - заметка, можно смело игнорировать.
Но спасибо за наводку, добавил в nuxt.config.js по умолчанию:
Вася
06.06.2022, 13:51:55
заработал Vesp. Ура! И да я пропустил node:generate :)
Василий Наумкин
06.06.2022, 14:01:39
Отлично!
Вася
04.06.2022, 20:33:59
vesp-shop | | http://vesp-shop.test | /Users/***/Sites/VespShop | php@7.4
Думал может настроил что то не так при установке в окружении, но modx установился все в порядке
Василий Наумкин
04.06.2022, 20:46:26
Показывает, что типа все ок.
Похоже проблема в DnsMasq
Вася
04.06.2022, 20:50:51
sudo brew services list:
dnsmasq started
а вот если просто brew services list то так:
dnsmasq error 19968
Попробую погуглить что не так с этим может быть
Василий Наумкин
04.06.2022, 20:55:33
Попробуй сам пока разобраться, если никак - спишемся завтра в Телеграмм и настрою тебе всё через AnyDesk удаленно.
Александр Наумов
05.06.2022, 04:26:32
Василий, добрый день!
У меня локально стоит Ubuntu desktop, а сервер настроен по твоей инструкции
https://modx.pro/hosting/678
Конфигурация такая: Nginx, MySQL 8.0, Php 7.4, NodeJS 17.
Valet не использую отсюда не могу выполнить команду valet link vesp-shop
Запускаю composer node:generate и получаю ошибку:
Направь, пожалуйста, куда копать?
Василий Наумкин
05.06.2022, 08:23:04
Это моя ошибка в composer.json, я там указал npm generate, а нужно npm run generate
Пожалуйста, скопируй новый файл себе из репозитория.
Александр Наумов
05.06.2022, 12:28:21
Сейчас вот так:
Василий Наумкин
05.06.2022, 12:42:34
Ха-ха, вот я криворукий!
Короче, сделай npm install --global yarn, чтобы глобально установить пакетный менеджер yarn и дальше все должно быть ок
Александр Наумов
05.06.2022, 13:09:53
Василий, спасибо, все круто!
А почему npm не справился, там же написано (yarn generate || npm run generate)?
Василий Наумкин
05.06.2022, 13:14:51
Да просто я сам не пользуюсь npm, поэтому команды не проверил.
На неделе починю их как положено, спасибо за баг-репорт.
Александр Наумов
05.06.2022, 13:19:12
Все понял, спасибо!
Александр Наумов
08.06.2022, 18:03:41
Василий добрый день!
После настройки файла .env запускаю команду composer node:generate и получаю ошибку:
Пишет, что у concurrently нет прав, а у меня в корне не сформировалась папка node_modules - видимо в этом проблема.
Направь, пожалуйста, куда копать?
На данном этапе у меня в корне вот так:
Василий Наумкин
08.06.2022, 18:56:56
node_modules должно быть внутри frontend, а не в корне.
Попробуй запустить еще раз composer node:install, а потом проверить права на файл frontend/node_modules/.bin/concurrently - возможно в Ubuntu он не делается исполняемым при установке.
Если так, то chmod +x frontend/node_modules/.bin/concurrently должно помочь.
Александр Наумов
09.06.2022, 04:36:14
Василий, спасибо большое!
Да, в папке .bin у всех файлов не было прав на исполнение.
Команда composer node:install сделала все файлы исполняемыми.
Еще сделал исполняемыми файлы carbon и phinx в папке /core/vendor/bin.
Таблица с данными создалась.
Но вот при входе в админку появилась 405 ошибка.
Почитал в Интернете про ошибку, понастраивал nginx конфиг.
Вопрос, может еще где-то нужно сделать файлы исполняемыми или это всего скорее проблема из-за настроек FastCGI?
Василий Наумкин
09.06.2022, 08:56:36
Я думаю, что проблема в Nginx - там нужно прописать отдельный location для запросов API. Вот мой рабочий конфиг для продакшн-сервера на Ubuntu:
Тебе нужно поменять пути и указать свой fastcgi_pass - он создаётся в php-fpm.
Александр Наумов
09.06.2022, 15:26:08
Спасибо за наводку, и за конфиг!
Все, первый урок осилил, вошел в админку!
Только вот страница админки без вот таких настроек не открывалась:
Взял из коммента https://bezumkin.ru/lessons/vesp/3077#comment-26287
Василий Наумкин
09.06.2022, 15:31:23
Да, всё верно - я скопировал правила из проекта без админки =)
Очень рад, что ты справился!
Игорь
09.06.2022, 07:25:20
Доброй ночи! Локальный адрес сайта открывается, в базе данных таблицы создались, начальные данные "засеяны". Но при попытке зайти в админку получаю 404 ошибку.
Содержимое . env-файла
Василий Наумкин
09.06.2022, 09:01:02
Посмотри в консоли браузера, куда улетают запросы - возможно ты забыл обновить фронтенд после редактирования .env, тогда будет неправильный адрес для API запросов. Нужно запустить composer node:generate еще раз.
Если адрес верный, то попробуй открыть http://vesp-shop.test/api/user/profile, в отает должно быть "Authentication required". Если увидишь тот же Not Found от сервера, значит он неправильно настроен и запросы в API не работают.
Игорь
09.06.2022, 17:27:45
Адрес для API запросов верный, при открытии http://vesp-shop.test/api/user/profile - получаю ответ - "Authentication required"
Василий Наумкин
09.06.2022, 17:36:23
Что-то в консоли адрес совсем неверный - там много непонятного между /api/ и /security/login/
Думаю комментарии из .env нужно убрать, они явно попадают в значения.
переделать в
И пересобрать фронтенд
Игорь
09.06.2022, 17:50:24
Ты прав, спасибо! Убрал комментарии из .env + пересобрал фронтенд и все заработало.
Василий Наумкин
09.06.2022, 18:12:15
Поправил заметку, чтобы такого не было у других!
Вася
09.06.2022, 21:08:29
У меня такое было
Забыл написать, что комментарии тоже убирал
ссылка такая и получалась "http://vesp-shop.test/api/ # url для API запросов, может отличаться от базового"
Василий Наумкин
10.06.2022, 07:43:36
Честно говоря, я не подумал, что кто-то будет заменять оригинальные файлы примерами из заметки =)
Ivan CR
25.06.2022, 13:53:07
Василий, привет! Пытаюсь установить Vesp на сервер с Ubuntu 22.04 и PHP 8.1 который идет по умолчанию.
Получаю такую ругань:
Поправь пожалуйста версии.
Василий Наумкин
25.06.2022, 17:56:04
Поправил, спасибо!
Дмитрий
26.04.2023, 13:17:41
Блин, все оказалось несколько сложнее чем ожидалось. Пользуюсь Windows и именно с этого проблемы начались. Docker не установился должным образом, провозился день с ним, психанул удалил. Laravel Valet это для Маков. Решил попробовать старый добрый Open Server.
Не запускался ни один из скриптов composera. После нескольких часов поиска понял, что нужно в composer.json слэши на обратные слэши поменять. Далее, так как нет специального драйвера Valet, запустил проект командой composer node:dev. Сайт открылся по адресу http://192.168.88.180:4100/. Админка открылась по адресу http://192.168.88.180:4000/admin/
Теперь проблема, при заходе в админку, ошибка 500, стал ругаться CORS. Поскольку в настройках .env API_URL стоит http://vespshop/api/.
Окей, API_URL ставлю http://192.168.88.180:4000/api/ , запускаю команду composer node:generate.
Пытаюсь опять зайти в админку, вылетает ошибка
gin.vue:32 URIError: URI malformed
at decodeURIComponent ()
at Storage.getCookie (runtime.mjs:292:1)
at Storage.getUniversal (runtime.mjs:140:1)
at Storage.syncUniversal (runtime.mjs:151:1)
at Token._syncToken (runtime.mjs:1019:1)
at Token.sync (runtime.mjs:971:1)
at LocalScheme.check (runtime.mjs:1148:1)
at LocalScheme.fetchUser (runtime.mjs:1208:1)
at LocalScheme.login (runtime.mjs:1199:1)
Что делать не пойму. Идти макбук покупать? Может посоветуете для винды чего-нибудь помимо докера
Василий Наумкин
26.04.2023, 13:54:54
Это что за файл такой, откуда взялся?
Ошибка говорит, что в нём вызывается команда decodeURIComponent с неправильными параметрами. Надо найти и поправить.
Могу посоветовать обычную виртуалку с GNU/Linux.
Дмитрий
26.04.2023, 15:43:27
Не правильно вставил, две буквы затерлись, там файл login.vue:32
А вообще как решается проблема с CORS на продакшене. Допустим я положил бекенд на один хост, а фронтенд на другой? Он же не даст общаться через APi
Василий Наумкин
26.04.2023, 17:02:34
Нет никакой проблемы с CORS, эти заголовки разрешаются или запрещаются в файле .env соответствующей переменной.
Судя по ошибке в login.vue у тебя как раз с этим файлом проблемы, видимо там указан неправильный адрес для запросов в API, поэтому его и не получается обработать.
Дмитрий
27.04.2023, 10:29:07
Почему тогда такой запрос не проходит ?
В .env стоит
API_URL=http://vespshop/api/
CORS=1
Василий Наумкин
27.04.2023, 10:47:20
У тебя указан домен первого уровня, без домена второго уровня.
Попробуй просто открыть из браузера http://vespshop/api/ и посмотреть, что получится. Я думаю, что твой браузер просто не надёт такого сайта.
Дмитрий П.
27.04.2023, 12:10:09
Попробуй WSL с Ubuntu. У меня под win10 все работает как и на обычной ubuntu.
Только файлы проекта лучше размещать внутри wsl, а не на примонтированных виндовых дисках (у них скорость чтения очень маленькая).
Дмитрий
27.04.2023, 14:01:21
Попробую, спасибо
Futuris
25.05.2023, 12:55:30
Я сначала пробовал на винде WSL с Ubuntu, но там не все у меня получалось как Вася пишет. В итоге повесил VESP на свой VPS с Ubuntu 20.04 и там все работает, правда после того как хостеры мне PHP-FPM помогли настроить). Но к докеру на WSL с Ubuntu потом вернусь, нужно будет все же научиться на локалке работать.
Nurbol Boken
26.05.2023, 07:50:24
на локалке windows использую virtual box, можно смонтировать любое окружение и работать точно так же как и на выделенном сервере
Futuris
26.05.2023, 11:05:19
Можно и так. Главное - варианты есть, если хочешь ковырять VESP). Virtual Box я использовал на десктопной Убунте, чтобы ставить некроссплатформенный виндовский софт. И у меня остались от этого не очень хорошие воспоминания - страшно медленно все работало и это ужасное маленькое окошко. Может сейчас и по-другому. Лично мне Докер на WSL показался намного удобнее , я просто запутался там с открытием страниц с разными портами и параметрами - на домене все потом устаканилось.
Yuran
05.04.2024, 11:22:09
Я пытаюсь поставить проект на windows 10 под Openserver. Есть ли какое то действие, чтобы сделать подобное.... Или это не обязательно и для windows использовать просто домен http://vespshop/ ?
И еще такой вопрос - где находится корень сайта в этом приложении? C:\OSPanel\domains\VespShop или C:\OSPanel\domains\VespShop\www
Я записал в .env так
SITE_URL=http://vespshop/
API_URL=http://vespshop/api/
Но где эта папка api? В корне сайта ее нет...
Василий Наумкин
05.04.2024, 12:46:49
Увы, не могу ничем помочь - ни разу в жизни не пользовался OpenServer.
Её и не должно быть - это виртуальный адрес. Все запросы должны перенапрвляться на www/api.php, а там уже сработает роутинг.
Yuran
05.04.2024, 11:58:41
Подскажите пожалуйста почему не срабатывает миграция? База данных создана, пользователь и пароль в .env прописаны правильные.... Что ему нужно?
Василий Наумкин
05.04.2024, 12:49:42
Полагаю, что на Windows такие пути и команды просто не работают.
Yuran
05.04.2024, 14:50:10
Я понял, спасибо за ответы. Попробую на VPS собрать и запустить.
Yuran
09.04.2024, 00:06:31
Блин... не получается:( Создаю проект командой composer create-project vesp/vesp site.ru
Все отрабатывается нормально. Захожу в директорию site.ru там выполняю composer node:generate
Тоже все отрабатывается нормально. Прописываю в .env
SITE_URL=http://site.ru/
API_URL=http://site.ru/api/
и данные для базы данных.
Выполняю в консоли composer db:migrate и composer db:seed - все отрабатывает нормально. Главная страница открылась, при попытке войти в админку выдает Ошибка 500: Ошибка сервера.
Я подозреваю, что неправильно составил конфиг Nginx. Вот мой конфиг.
Вообще VPS сконфигурирован как связка apache+nginx. Может что то нужно в apache добавить? Или этот валет нужен? Я так понял он только для локальной на макбуке.... Кто хорошо разбирается - помогите пожалуйста настрить нормально конфиг.
Василий Наумкин
09.04.2024, 04:45:01
Это не похоже на ошибку Nginx, это скорее всего ошибка PHP - надо смотреть его логи.
Тогда непонятно, почему в конфиге Nginx указан php-fpm:
В общем, нужно смотреть логи Nginx, PHP и Apache2 в поисках конкретной проблемы, чтобы её решать.
bezumkin.ru
Личный сайт Василия Наумкина
Прямой эфир
Ivan CR
24.10.2024, 15:20:54
С днем рождения!!! Класс, что в твоей жизни есть такие интересные достижения.
Василий Наумкин
01.07.2024, 11:56:41
Да, верно, именно так.
А в контроллере, скорее всего, ловить данные методом post.
Василий Наумкин
26.06.2024, 09:38:15
О, точно, вылезает если не залогинен.
Спасибо, исправил!
Василий Наумкин
09.04.2024, 04:45:01
> Ошибка 500
Это не похоже на ошибку Nginx, это скорее всего ошибка PHP - надо смотреть его логи.
...
Создание нового проекта
63
russel gal
09.03.2024, 20:17:18
> А этот стоило написать хотя бы затем, чтобы получить комментарий от юзера, который ничего не писал...
Александр Наумов
27.01.2024, 03:06:18
Василий, спасибо!
Извини, тупанул.