Как сконфигурировать бэк и фронт через api?

Question

[Алексей Михайлов]

У меня есть проект на Symfony, который работает в окружении nginx, postgres, php fpm, все в Docker-контейнерах. Я хочу переделать его так, чтобы Symfony отдавал JSON-ответы, а уже отдельный компонент в лице vue.js рендерил ответы в странички. То есть бэк и фронт общаются через API. Как это сконфигурировать?

То есть, у меня на сервере лежит контейнер с node.js на нем запущен vue.js. Так же на сервере есть контейнер nginx, рядом запущен контейнер php, в этом окружении работает symfony, который предоставляет api для vue.js. Каким образом приходит запрос от пользователя? Он идет на node.js а оттуда на nginx? Или как? Если так, то как vue.js осуществляет роутинг?

Answer 1

[fkk]

Причем тут VDS, зачем вам вообще нода? Чистый Vue это больше о SPA. Вы о SPA или SSR/G?

Если вы хотите классический SPA, то вам (не) нужна нода, она нужна для сборки и локальной разработки, но на выходе у вас статика (html, js, css и еще какой-то набор ассетов аля картинки, шрифты и так далее).

Что там делает API и как он живет - фронту не важно и его не касается, ему не важно какой там стек, фронту важно одно - адрес, где бекенд живет и чтобы бекенд отдавал ответы на запросы в нужном фронту формате.

Поэтому что вам конфигурировать? Что вы хотите?
Ну в общих чертах вам нужен:

nginx, который:
- Отдает статику на 80/443 с вашим index.html и набором ассетов.
- Дает доступ к API проксипасом на условный путь /api юзая php-fpm линком с другого контейнера.

Как вы это упакуете на уровне докера - хз, делайте как удобно. Только понимайте, что фронт для локальной разработки нужно запускать в dev режиме, через nodejs, (HMR там и все такое) а для пре\прода - собирать в статику.

Поэтому, я бы вообще локально фронт не запускал в докере, а работал прямо на машине, в докере держал бы только всю инфру бекенда.

Да и как вы хотите хранить проекты? Монореп или все таки разные репы? Если разные - можете вообще сделать для каждого проекта сборку в docker имаджы и сторить их где-то в Gitlab Registry или аналогах с независимым деплоем фронта и бека. кароче вариантов масса. Выбирайте по возможностям и средствам. Возможно вам проще нанять прошаренного девопса.

Answer 2

[YepBro]

У тебя есть урл фронта (node + vue) и урл апи (nginx + php fpm + postgress).

По урл фронта ты из браузера обращаешься к своему фронту. Node + Vue смотрят свои маршруты, генерирую html страницы и отдают их тебе в браузер.

Браузер отображается страницы при необходимости обращаясь к апи. Там уже свои маршруты которым управляем симфони.

Это если в общих чертах.

Answer 3

[#]

в один контейнер. а лучше vds