Как оптимально реализовать фронт на Vue и бэк на Yii (желательно без CORS)?

Question

[coderisimo]

Стандартная рекомендация - сделать два поддомена.
Ок, но тогда в дело вступает любимый всеми CORS. Его можно настроить (там тоже много радости!), но он будет постоянно слать PREFLIGHT запросы для так называемых "сложных" реквестов. Т.е место одного запроса будет два. Разумеется, это не ускоряет сайт (и бесит!).
Такого раздвоения не будет лишь для так называемых 'простых' запросов. Например, для GET - он считается простым при соблюдении остальной пачки правил. Но, есть одно но : если вы используете (а вы используете!) bearer tokens , то ваш запрос уже не считается простым, ибо в наличии корсо-противный заголовок Authorization. А значит снова в деле наши любимые двойные запросы.
Конечно, мы можем попробовать кэшировать эти OPTIONS , но многие браузеры плюют на наши желания с высокой колокольни. И время кэширования ограничивают 600 секундами. Так что это не дает существенного выигрыша. Так же можно убрать заголовок Authorization и слать токен прямо в запросе, что тоже некрасиво (а мы же хотим красоты и правильности).
Соответственно, что же делать? ))
Vue желает быть отдельным приложением. При работе кошерным способом через CLI (удобно!) генерирует свою папку. Как подсунуть ее Yii, так чтобы все работало без танцев, CORS и прочих веселых вещей ? Мне не надо REST API (хотя я его уже написал и настроил), мне надо чтобы работало быстро и без лишних сложностей. Или в наше время так не бывает?

Раньше я делал все корявым способом , подключал js файлы в Yii шаблоны И так далее. У продвинутых людей это вызывает ночные кошмары. Сейчас хочется сделать "как положено", разделить мух (Yii) и котлеты (Vue). Однако, получать тормоза только из-за продвинутой(двинутой?) архитектуры не хочется.

Поделитесь соображениями.
Спасибо!

ЗЫ Слышал что-то про реверс прокси, как решение данной проблемы.Но еще и это, боюсь, не осилю. Итак потратил неделю за освоение модных консолей, веб паков, настройки двух поддоменов, изучения postman, cors и прочего. По старинке, запихнув все в Yii вьюхи все бы уже сделал давно.

Comments

[Yustas Alexu]

Сомневаюсь, что вы получите какой-то ощутимый выигрыш в производительности от отключения preflight requests. Проблема тормозов у вас скорее всего на бэкенде, а точнее между стулом и монитором.

[coderisimo]

Yustas Alexu, уважаемый автор вопроса :

Как сделать, чтобы модальное окно в Bootstrap 3 выезжало справа, а не сверху?

который

После долгого гугления на английском нашел подходящий ответ:

вы ошибаетесь! Не

скорее всего

,
а совершенно точно : в моем случае проблема тормозов на бэкенде, между стулом и монитором

И все равно спасибо! Вы очень помогли.

[Yustas Alexu]

coderisimo, у вас так бомбануло, что вы полезли искать мои вопросы, которые я задавал много много лет назад. Похвально, что вы интересуетесь моей персоной.

[coderisimo]

Yustas Alexu, да, я потратил 10 секунд, чтобы два раза кликнуть мышкой. Мне хотелось быть объективным. Я понимаю, это тоже недостаток.

Answer 1

[Alex Wells]

Бэкэнду выделите поддомен backend на том же домене, что и фронт. Настройте что бы работало.

Потом в конфиге фронта добавьте локейшен на /backend/, там хедер Host с полным доменом бэка (и.е. backend.domain.com) и proxy_pass на 127.0.0.1.

Хотя 500мс это бред полный. Пинг в штаты - 200мс гора. Каким образом там выходит 500-600 - загадка.

Comments

[coderisimo]

Уже настроены два поддомена. Я уже понял, что можно попробовать настроить и фронт и бэк на одном домене.

Потом в конфиге фронта добавьте локейшен на /backend/, там хедер Host с полным доменом бэка (и.е. backend.domain.com) и proxy_pass на 127.0.0.1.

Вот это не ясно :) .
Буду искать подробное описание в сети.
Спасибо!

[Alex Wells]

coderisimo, вот:

location /backend {
    rewrite /backend/(.*) /$1  break;
    proxy_set_header Host backend.domain.com;
    proxy_pass https://127.0.0.1;
}

Никому не пожелаю таким заниматся. Тоже избавлялся от OPTIONS, на эту херь ушло часов 5-6.

[coderisimo]

Alex Wells,
я вам ответ нарисую!


Cпасибо! Все гораздо быстрее и проще. Если в будущем понадобится REST API для приложения или чего-то в таком духе - все уже будет. А с другой стороны не надо сейчас воевать с этой редиской cors и разруливать все енти options.

Answer 2

[Александр Аксентьев]

OPTIONS не содержит практически никакой логики на бекенде, разве что авторизацию проверить, чего у вас так от него бомбит? Итого выполняется <50ms, ну дальше уже от интернета зависит.
"Чинится" двумя заголовками и больше не беспокоит.
Весь бекенд уже давно понимает OPTIONS.

Сейчас хочется сделать "как положено", разделить мух (Yii) и котлеты (Vue).

И бомбить от корса, а всего лишь нужно было узнать что это работает только между разными доменами, так почему бы просто не поднять бекенд и фронт на одном домене?

Comments

[coderisimo]

Я и обратился за советом, ибо хочется решить проблему.

"Чинится" двумя заголовками и больше не беспокоит.

что вы имеете ввиду ?
Можно поконкретнее.Как чинится? Хочу избавиться от беспокойства :)

Вот пример. Сервер в штатах (ясно , что латенси больше, чем с урюпинским сервером). Каждый второй запрос мой любимый OPTIONS

так почему бы просто не поднять бекенд и фронт на одном домене?

вот это и есть мой вопрос. Как это сделать. Обычно я настраиваю nginx на index.php. Как можно настроить один домен чтобы запросы к бэку и фронту разруливались как положено?

Спасибо за ответ.

[Roman K]

coderisimo,

Как можно настроить один домен чтобы запросы к бэку и фронту разруливались как положено?

Ну например весь бэк пойдёт через /api. Итого, location /api проксируется в бэк, остальное — try_files в статике, если ничего не нашёл — index.html

[coderisimo]

Roman Kitaev, " в теории это лошадь, а на практике она падает" :) Общее описание мне не поможет. Как реализовать подобное буду искать примеры в сети. ))

Answer 3

[xmoonlight]

Мне не надо REST API (хотя я его уже написал и настроил), мне надо чтобы работало быстро и без лишних сложностей. Или в наше время так не бывает?

Зачем API? Зачем vue? Зачем Yii? Не думали, что сложность именно в применяемых инструментах?

Однако, получать тормоза только из-за продвинутой(двинутой?) архитектуры не хочется.

Говорите правильно, но "продолжаете есть кактус". ЗАЧЕМ?!

Есть PHP, есть JS/AJAX - всё!

Берёте и делаете так, чтобы не было API/CORS и тучи "жрущих" производительность никому ненужных вложенных ООП-классов на PHP (для тех, кто может нормально кодить!).

Обмен данными?
fetch() для json! с методом GET/POST и Content-type: text/plain

Хотите блоки разметки быстро менять без перезагрузки страницы и без всяких CORS?
Легко: includeHTML (одна строка!)

Comments

[coderisimo]

Ключевой момент

(для тех, кто может нормально кодить!).

По мере усложнения проекта часто оказывается , что готовые решения все же лучше для не слишком искушенных программистов. Я ,например, вижу, что vue компоненты мне сильно облегчают жизнь по сравнению с периодом, когда я делал SPA без них. Конечно, матерые зубры напишут и "без всего этого". А не матерые... пускай изучают готовый инструментарий :). Просто изучение порой идет сложновато :).

За ссылку спасибо - ознакомлюсь.

[xmoonlight]

coderisimo, Понял. Тогда мне нечего добавить.
Появятся вопросы - Welcome!

[coderisimo]

xmoonlight, благодарю!

[Alex Wells]

Говорите правильно

Нет, говорит херню. Архитектура (в рамках одного проекта) никак не влияет на производительность, зато спасает от триллиона проблем в будущем.

Есть PHP, есть JS/AJAX - всё!

Все! Че это они там придумывают - какие то JIT, TS, SPA, джава.. надо пойти и расказать коллегам, как оказывается все просто!

без перезагрузки страницы и без всяких CORS?

Причем тут cors и перезагрузка страница? Это к твоему творению не имеет никакого отношения.

(для тех, кто может нормально кодить!).

Это как, интересно? В процедурном стиле что-ли? И ты серьезно приписал свое чудо к "нормально кодить"?

[xmoonlight]

Alex Wells, Уморительно)

[Alex Wells]

xmoonlight, интересно, почему я ожидал другого ответа?)

Answer 4

[tolalur]

Добрый вечер.

Vue желает быть отдельным приложением. При работе кошерным способом через CLI (удобно!) генерирует свою папку. Как подсунуть ее Yii,

Сто лет не делал ничего на Yii, так что не судите строго.
При деплое на прод в том шаблоне(я про Yii-шный шаблон), в котором вы хотите Vue отдаете то что у вас получилось из папки dist при билде Vue приложения. При разработке Vue приложения просто проксируете все запросы на Yii endpoint

Comments

[coderisimo]

Cпасибо.Все уже работает. При локальной разработке web pack проксирует куда надо. А на проде два поддомена и проксирование в бекэнд силами в nginx.

location /backend {
rewrite /backend/(.*) /$1 break;
proxy_set_header Host backend.domain.com;
proxy_pass https://127.0.0.1;
}

[tolalur]

coderisimo, Как скажете. Надо будет освежить знания, мне все же кажется можно без дополнительных приседаний с 2-мя поддоменами :).

[coderisimo]

tolalur, если есть еще решение - пишите. Пригодится и мне и тем , кто наступит на те же грабли ))