Как я могу связать BackEnd с FrontEnd?

Question

[outplayedrq]

Добрый день, у меня есть такое вот дерево

На BackEnd-е запросы к базе данных, роуты через Express и так далее.
На Front-е, Webpack, который собирает React, Typescript, Less и статичные файлы.
Как я могу их связать, чтобы у меня роуты на BackEnd-е запускались с файлами из FrontEnd-а.
До меня не доходит, как я могу это реализовать.
Собирал Webpack в папку dist, далее запускал сервер на BackEnd-е ( На Front-е нет как такового сервера, поэтому пришлось просто собирать файлы в папку dist ). Далее прописал в роутах в Express путь до файла index.html в папке dist и запускал сервер на BackEnd-е, а там куча ошибок в консоле и не подгруженные файлы, которые прописываются Webpack-ом..
P.S. Больше всего работаю с BackEnd-ом, но надо же хоть какой-то Front с взаимодействием.

Comments

[Михаил]

Nginx для себя откройте

Answer 1

[Иван Корюков]

Вам необходимо сделать так, чтобы какой-нибудь web-сервер раздавал файлы фронта.
Это может быть:
1) отладочный сервер прям во фронте: часто добавляют пакет, который позволяет выполнить команду вроде `yarn serve --port=3000`
2) express вашего бэка: там можно в пару строчек активировать раздачу статики изх указанной папки
3) отдельный web-сервер, например nignx: в продуктивной среде скорее всего именно он и будет заниматься раздачей статики

Кроме того, в зависимости от выбранного способа, вам надо будет понимать куда вы делаете запросы и как они идут до бэк.
Если вы запускаете отладночный сервер на порту 8080, а бэк на порту 3000, то ajax запросы вам надо делать на localhost:3000
Если вы используете nginx, то лучше настроить в нём проксирование, так чтобы все запросы на localhost:8080 на самом деле шли на localhost:3000.

Для локальной разработки рекомендую настроить бэк чтобы он раздавал статику
https://expressjs.com/ru/starter/static-files.html

Comments

[outplayedrq]

Как я понял, грубо говоря, я должен развернуть 2 сервера и обрабатывать запросы к серверу на BackEnd-е. Я недавно видел обработку запросов через axios в самом BackEnd-е - это хорошая практика так делать?

[outplayedrq]

Или проще всё через fetch делать?

[Иван Корюков]

outplayedrq, не совсем. У вас просто какой-то веб-сервер должен раздавать результаты сборки фронта.
Это не обязательно дополнительный сервер, но может быть и так. В зависимости от выбранного подхода надо будет делать ajax запросы на тот же или на другой домен (точнее порт).
Используйте раздачу статики через express вашего бэка и не парьтесь.

axios это универсальный http клиент. Он работает как в браузере, так и в nodejs. Если ваш бэк должен делать куда-то запросы - ну пусть делает, axios тут хороший выбор.
А если вы придумываете как делать запросы с фронта на бэк, то вам не надо думать про axios на бэке, просто используйте его на фронте.

P.S. по вопросу "fetch vs axios" не подскажу. Как вам удобнее делать ajax запросы так и делайте. Я бы делал через axios, потому что я с ним итак работаю, и мне кажется что у него больше настроек.

[outplayedrq]

Иван Корюков, Можете подсказать хорошие отладочные серверы для фронта?

[outplayedrq]

Я сейчас включил статику в сайт, всё заработало, просто указал путь до dist и там всё как всегда в Express.
Ни одной ошибки. Я так понимаю отладочный сервер для фронта нужен только для того, чтобы передавать запросы и в моём случае работать с socket-ом. А так я могу просто ренедерить вебпаком и он будет подгружать нужную страницу. Большое спасибо!

[outplayedrq]

Подойдёт ли для этого обычный webpack dev server? ( Вместо какого-либо отладочного сервера )

[Иван Корюков]

outplayedrq, отладочный сервер про который я писал - это только чтобы раздавать статику. Только чтобы в браузере вы открывали localhost:8080 а не file:///path/to/dist
Такой сервер никоим образом не способствует связи фронта с бэком.
Вот пример такого сервера https://www.npmjs.com/package/serve

[Иван Корюков]

outplayedrq, да, конечно, webpack dev server подойдёт.
Тут главно не забывать, что бэк надо запускать отдельно и ajax запросы надо делать на адрес бэка.

[outplayedrq]

Иван Корюков, Большое спасибо, за то что подробно всё объяснили