Для того чтобы загрузить статические файлы из сборки в Docker контейнер, вам потребуется выполнить следующие шаги:
1. Создайте `Dockerfile` в корне вашего React проекта, если он еще не существует. Пример `Dockerfile` для создания образа с React приложением может выглядеть так:
```Dockerfile
# Используйте официальный образ Node.js как базовый
FROM node:14 AS build
# Установите рабочую директорию внутри контейнера
WORKDIR /app
# Скопируйте файлы package.json и package-lock.json
COPY package*.json ./
# Установите зависимости проекта
RUN npm install
# Скопируйте исходный код проекта в контейнер
COPY . .
# Соберите статические файлы проекта
RUN npm run build
# Используйте образ nginx для раздачи статических файлов
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
# Определите порт, который будет прослушивать веб-сервер
EXPOSE 80
```
2. Создайте конфигурационный файл `nginx.conf` для настройки веб-сервера в соответствии с вашими потребностями. Пример конфигурации Nginx для обслуживания React приложения:
```nginx
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
```
Эта конфигурация Nginx обрабатывает клиентский роутинг, перенаправляя все запросы на `index.html`, что важно для одностраничных приложений (SPA).
3. Создайте образ Docker с вашим приложением, выполнив в терминале команду:
```shell
docker build -t react-app .
```
Здесь `react-app` — это имя вашего образа.
4. Запустите контейнер из созданного образа с пробросом порта, чтобы приложение было доступно на локальной машине:
```shell
docker run -d -p 8080:80 react-app
```
Здесь `8080` — это порт на вашей локальной машине, а `80` — порт, который прослушивает веб-сервер внутри контейнера.
Теперь, если вы перейдете в веб-браузере по адресу `http://localhost:8080`, вы должны увидеть свое React приложение.
