Первым делом нам нужно разобраться с вашей рабочей средой. Я использую одни из самых популярных инструментов:
Здесь нет ничего особенного, обычный набор веб-разработчика.
Если вы используете такой же сетап, то поздравляю, вам будет максимально легко следовать моим инструкциям - нужно только установить специальный драйвер для 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 - теперь вы должны увидеть такую картинку:
Давайте разберёмся как это всё работает.
В корне проекта лежат следующие файлы и директории:
.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. Он уже работает, но все страницы и данные пока по-умолчанию. На следующих уроках мы научимся их менять под свои нужды.
Часть с настройкой проекта на локальной машине обычно вызывает самое больше число вопросов, поэтому я жду их в комментариях. Как только разберёмся с этим, дальше всё пойдёт гораздо проще и быстрее.
Использую Valet, но при заходе на локальный домен пишет: Did not get front controller from driver. Please return a front controller to be executed.
Нужно установить драйвер Valet для Vesp
А потом перейти в директорию проекта и проверить, что её обслуживает именно он командой
valet which
, в ответ должно бытьСпасибо! Да, дело оказалось в нём в итоге. Только в моем случае его надо было скопировать в папку ~/.valet/Drivers поскольку конфиги лежали именно там. Видимо от версии еще зависит.
Видимо =)
У меня вообще чему-то пишет при заходе на 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.
Значит драйвер Vesp не установлен. Проверь директорию, может тоже нужно в
~/.valet/Drivers
скопировать.Это просто замечание, не ошибка - можно смело игнорировать.
Valet не использую. С иконками в админке какая-то шляпа.
Конфиг для NGINXа такой
Скорее всего это баг стилей fontawesome, после их перехода на 6ю версию.
Пока можно не обращать внимания, я проверю и добавлю исправление в Vesp.
Я решал эту проблему добавляя в index.scss импорт стилей
При чем в dev режиме все нормально, а в production - ломаются стили
Да, именно так это и решается - просто мне надо прописать импорт в Vesp по умолчанию.
Обновил пакет в репозитории, теперь все новые установки будут с этими стилями.
vesp-shop.test "Not found."
Три раза все переустанавливал valet which This site is served by [VespValetDriver].
А что говорит
valet links
?Эта команда должна показать домены всех обслуживаемых сайтов.
Слушай, а ты не забыл сделать composer
node:generate
случайно? А то, может, сайт-то работает - просто открывать нечего?[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 } который я нагуглил по этой ошибке не разобрался
Это не ошибка, а note - заметка, можно смело игнорировать.
Но спасибо за наводку, добавил в
nuxt.config.js
по умолчанию:Config.build = { babel: { compact: true, }, }
заработал Vesp. Ура! И да я пропустил node:generate :)
Отлично!
vesp-shop | | http://vesp-shop.test | /Users/***/Sites/VespShop | php@7.4
Думал может настроил что то не так при установке в окружении, но modx установился все в порядке
Показывает, что типа все ок.
Похоже проблема в DnsMasq
sudo brew services list:
dnsmasq started
а вот если просто brew services list то так: dnsmasq error 19968
Попробую погуглить что не так с этим может быть
Попробуй сам пока разобраться, если никак - спишемся завтра в Телеграмм и настрою тебе всё через AnyDesk удаленно.
Василий, добрый день!
У меня локально стоит Ubuntu desktop, а сервер настроен по твоей инструкции
https://modx.pro/hosting/678
Конфигурация такая: Nginx, MySQL 8.0, Php 7.4, NodeJS 17.
Valet не использую отсюда не могу выполнить команду
valet link vesp-shop
Запускаю
composer node:generate
и получаю ошибку:Направь, пожалуйста, куда копать?
Это моя ошибка в
composer.json
, я там указалnpm generate
, а нужноnpm run generate
Пожалуйста, скопируй новый файл себе из репозитория.
Сейчас вот так:
Ха-ха, вот я криворукий!
Короче, сделай
npm install --global yarn
, чтобы глобально установить пакетный менеджер yarn и дальше все должно быть окВасилий, спасибо, все круто!
А почему npm не справился, там же написано
(yarn generate || npm run generate)
?Да просто я сам не пользуюсь npm, поэтому команды не проверил.
На неделе починю их как положено, спасибо за баг-репорт.
Все понял, спасибо!
Василий добрый день!
После настройки файла .env запускаю команду
composer node:generate
и получаю ошибку:Пишет, что у concurrently нет прав, а у меня в корне не сформировалась папка node_modules - видимо в этом проблема.
Направь, пожалуйста, куда копать?
На данном этапе у меня в корне вот так:
node_modules
должно быть внутриfrontend
, а не в корне.Попробуй запустить еще раз
composer node:install
, а потом проверить права на файлfrontend/node_modules/.bin/concurrently
- возможно в Ubuntu он не делается исполняемым при установке.Если так, то
chmod +x frontend/node_modules/.bin/concurrently
должно помочь.Василий, спасибо большое!
Да, в папке .bin у всех файлов не было прав на исполнение.
Команда composer node:install сделала все файлы исполняемыми.
Еще сделал исполняемыми файлы carbon и phinx в папке /core/vendor/bin. Таблица с данными создалась.
Но вот при входе в админку появилась 405 ошибка.
Почитал в Интернете про ошибку, понастраивал nginx конфиг.
Вопрос, может еще где-то нужно сделать файлы исполняемыми или это всего скорее проблема из-за настроек FastCGI?
Я думаю, что проблема в Nginx - там нужно прописать отдельный
location
для запросов API. Вот мой рабочий конфиг для продакшн-сервера на Ubuntu:server { listen 80; server_name vesp.pro; root /home/vesp/www; access_log /var/log/vesp/vesp-access.log; error_log /var/log/vesp/vesp-error.log; index 200.html; client_max_body_size 0; rewrite_log on; location ~ \.php$ { include fastcgi_params; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_pass backend-vesp; } location ~ ^/(api|__clockwork)/ { rewrite ^/(api|__clockwork)/(.*)$ /api.php; } location ~ ^/(favicons|images)/(.*) { access_log off; alias /home/vesp/frontend/dist/site/$1/$2; } location / { root /home/vesp/frontend/dist/site/; access_log off; gzip on; gzip_types text/css application/javascript application/x-javascript text/javascript image/svg+xml; expires 1y; try_files $uri /200.html; } }
Тебе нужно поменять пути и указать свой
fastcgi_pass
- он создаётся вphp-fpm
.Спасибо за наводку, и за конфиг! Все, первый урок осилил, вошел в админку!
Только вот страница админки без вот таких настроек не открывалась:
Взял из коммента https://bezumkin.ru/lessons/vesp/3077#comment-26287
Да, всё верно - я скопировал правила из проекта без админки =)
Очень рад, что ты справился!
Доброй ночи! Локальный адрес сайта открывается, в базе данных таблицы создались, начальные данные "засеяны". Но при попытке зайти в админку получаю 404 ошибку. Содержимое . env-файла
Посмотри в консоли браузера, куда улетают запросы - возможно ты забыл обновить фронтенд после редактирования
.env
, тогда будет неправильный адрес для API запросов. Нужно запуститьcomposer node:generate
еще раз.Если адрес верный, то попробуй открыть
http://vesp-shop.test/api/user/profile
, в отает должно быть"Authentication required"
. Если увидишь тот жеNot Found
от сервера, значит он неправильно настроен и запросы в API не работают.Адрес для API запросов верный, при открытии http://vesp-shop.test/api/user/profile - получаю ответ - "Authentication required"
Что-то в консоли адрес совсем неверный - там много непонятного между
/api/
и/security/login
/Думаю комментарии из .env нужно убрать, они явно попадают в значения.
переделать в
И пересобрать фронтенд
Ты прав, спасибо! Убрал комментарии из .env + пересобрал фронтенд и все заработало.
Поправил заметку, чтобы такого не было у других!
У меня такое было Забыл написать, что комментарии тоже убирал ссылка такая и получалась "http://vesp-shop.test/api/ # url для API запросов, может отличаться от базового"
Честно говоря, я не подумал, что кто-то будет заменять оригинальные файлы примерами из заметки =)
Василий, привет! Пытаюсь установить Vesp на сервер с Ubuntu 22.04 и PHP 8.1 который идет по умолчанию.
Получаю такую ругань:
Поправь пожалуйста версии.
Поправил, спасибо!
Блин, все оказалось несколько сложнее чем ожидалось. Пользуюсь 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)
Что делать не пойму. Идти макбук покупать? Может посоветуете для винды чего-нибудь помимо докера
Это что за файл такой, откуда взялся?
Ошибка говорит, что в нём вызывается команда
decodeURIComponent
с неправильными параметрами. Надо найти и поправить.Могу посоветовать обычную виртуалку с GNU/Linux.
Не правильно вставил, две буквы затерлись, там файл login.vue:32
А вообще как решается проблема с CORS на продакшене. Допустим я положил бекенд на один хост, а фронтенд на другой? Он же не даст общаться через APi
Нет никакой проблемы с CORS, эти заголовки разрешаются или запрещаются в файле
.env
соответствующей переменной.Судя по ошибке в
login.vue
у тебя как раз с этим файлом проблемы, видимо там указан неправильный адрес для запросов в API, поэтому его и не получается обработать.У тебя указан домен первого уровня, без домена второго уровня.
Попробуй просто открыть из браузера http://vespshop/api/ и посмотреть, что получится. Я думаю, что твой браузер просто не надёт такого сайта.
Попробуй WSL с Ubuntu. У меня под win10 все работает как и на обычной ubuntu. Только файлы проекта лучше размещать внутри wsl, а не на примонтированных виндовых дисках (у них скорость чтения очень маленькая).
Попробую, спасибо
Я сначала пробовал на винде WSL с Ubuntu, но там не все у меня получалось как Вася пишет. В итоге повесил VESP на свой VPS с Ubuntu 20.04 и там все работает, правда после того как хостеры мне PHP-FPM помогли настроить). Но к докеру на WSL с Ubuntu потом вернусь, нужно будет все же научиться на локалке работать.
на локалке windows использую virtual box, можно смонтировать любое окружение и работать точно так же как и на выделенном сервере
Можно и так. Главное - варианты есть, если хочешь ковырять VESP). Virtual Box я использовал на десктопной Убунте, чтобы ставить некроссплатформенный виндовский софт. И у меня остались от этого не очень хорошие воспоминания - страшно медленно все работало и это ужасное маленькое окошко. Может сейчас и по-другому. Лично мне Докер на WSL показался намного удобнее , я просто запутался там с открытием страниц с разными портами и параметрами - на домене все потом устаканилось.