Fullstack архитектура с react-приложением и nginx
Строю архитектуру для сильно нагруженных сервисов и не совсем уверен в том, что должно делать приложение на React в связке с Nginx.
Например: Пользователь по URL стучится в Nginx. Nginx работая как прокси-сервер перенаправляет запрос на приложение React.
Приложение React каким-то образом надо развернуть как веб-сервер? (serve / nodejs express / next.js) И в случае, если потребуется обращение к данным в бд, уже методами nodejs обращаться далее к бекенду?
Nginx же тоже можно настроить как веб-сервер для раздачи статичных файлов. Но как тогда посылать запрос на бекэнд и обрабатывать ответ...
При этом, каждый кубик - это отдельный docker контейнер.
Вопрос: как нужно deploy react приложение в моем случае? Как отдельный webservis?
Ответы (2 шт):
Nginx отдает статику, т.е ui сборку react, ui стучится дальше к api, через тот же nginx, который по url проксирует запрос в нужный сервис.
В общем и целом суть такова:
С помощью команды react-scripts build создается в отдельной папке (build) в корне проекта собранный и оптимизированный пакет для дальнейшего использования.
Размещаешь его на веб-хостинге, рядом кладешь файл docker (Dockerfile) (Пример ниже)
# pull official base image
FROM node:20.12.2-alpine
# set working directory
WORKDIR /app
# install app dependencies
COPY ./build/ ./build
RUN npm install -g serve
# start app
EXPOSE 3000
ENTRYPOINT ["serve", "-s", "build"]