13,8 тыс подписчиков

Как запустить несколько приложений React на одном порту Nginx с Docker

3 апреля 20233 апр 2023

334

2 мин

Оглавление

Создаем приложения React
Настраиваем конфигурацию Docker
Добавляем в приложения React конфигурацию Nginx глобально

Курс SkillFactory Frontend-разработчик PRO. Получите перспективную творческую профессию. Изучите JavaScript и TypeScript. Выполните 13 проектов в портфолио.

Для запуска нескольких приложений React на одном порту с применением Docker мы:

1) создадим два приложения React в одном репозитории и настроим конфигурацию Docker;

2) добавим в приложения React конфигурацию Nginx глобально и файл docker-compose.yml.

Docker — это платформа с открытым исходным кодом для создания, развертывания, запуска, обновления и управления контейнерами. Контейнеры представляют собой стандартизированные исполняемые компоненты, в которых исходный код приложения объединяется с библиотеками и зависимостями операционной системы для запуска этого кода в любой среде.

Разберем структуру каталогов React:

Employee содержит исходный код проекта Employer.
Member с исходным кодом проекта Member.
Nginx конфигурируется через папку Nginx с конфигурационными файлами.

Создаем приложения React

В VS Code или терминале запускаем:

npx create-react-app member

Переходим к проекту:

cd member

Запускаем приложение:

npm start

В package.json приложения Employer должна добавиться строка:

"homepage":"/employee",

Файл package.json в приложении Employer:

Файл package.json в приложении Member:

Настраиваем конфигурацию Docker

В VS Code создаем для каждого приложения Dockerfile, в котором прописываем команды (строки с # — это комментарии):

Добавляем в приложения React конфигурацию Nginx глобально

Nginx (произносится как «энджин экс») — это обратный прокси-сервер с открытым исходным кодом для протоколов HTTP, HTTPS, SMTP, POP3 и IMAP, а также балансировщика нагрузки, кеша HTTP и веб-сервера (сервера-источника). Проект Nginx запущен с акцентом на высокую конкурентность и производительность и низкое потребление памяти.

Если вы используете react-router, создайте папку Nginx с файлами Nginx и site config в корне проекта, в файле nginx.conf пропишите конфигурации Nginx:

В файле site.conf прописываются конфигурации узла, в пути location должно быть название приложения:

Добавляем файл docker-compose.yml

Создаем новый файл docker-compose.yml, он чувствителен к отступам. Для файлов YAML предусматривается синтаксис с отступами из двух пробелов, но использоваться будет любая применяемая в конкретном файле система отступов. Отступ в два пробела хорош для SLS-файлов: данные унифицированные, без глубокой вложенности.

В файле docker-compose прописываются команды:

Конечный вывод

Выполняем в терминале команду:

docker-compose up

Затем запускается процесс сборки:

Вывод приложения Member:

Вывод приложения Employer:

Мы разместили приложения React на одном порту с помощью Nginx и Docker.