Dockerized Django-React-PostgreSQL App Not Serving Frontend Despite Successful Build and Container Rebuild
У меня есть Dockerized приложение, включающее React frontend и Django backend сервис. Несмотря на успешную сборку Docker-контейнера и обеспечение работы бэкенда, когда я пытаюсь получить доступ к фронтенду, я получаю следующее сообщение: 'This URL is only accessible after you've built the React frontend.'
Я попытался пересобрать контейнер Docker с нуля, чтобы убедиться в отсутствии проблем с кэшированием, но проблема сохраняется.
Окружение: Операционная система: Win10 -- Использование Ubuntu через WSL для сборки контейнера Версия Docker: Docker версии 25.0.3, сборка 4debf41 Версия узла: 10.5.0
Взятые шаги:
- Пересборка контейнера Docker: Я использовал команду
docker build --no-cache -t mycontainer:latest. чтобы обеспечить свежую сборку без использования каких-либо кэшированных слоев. - Запуск контейнера: После пересборки я запустил контейнер с помощью команды
docker run -d -p 8000:80 --name mycontainer mycontainer:latest. - Проверка функциональности бэкенда: Я могу подтвердить, что бэкэнд-сервисы работают, как и ожидалось, отвечая на вызовы API.
Dockerfile:
# Stage 0: Build React Frontend
FROM node:16 AS build-frontend
WORKDIR /app/frontend
COPY frontend/package\*.json ./
RUN npm install
COPY frontend/ .
RUN npm run build
# Stage 1: Build Django Application
FROM tiangolo/uwsgi-nginx:python3.9
# Set environment variables
ENV PYTHONDONTWRITEBYTECODE=1 \
PYTHONUNBUFFERED=1
# Install system dependencies
RUN apt-get update && apt-get install -y --no-install-recommends netcat && rm -rf /var/lib/apt/lists/\*
WORKDIR /app
# Install Python dependencies
COPY backend/requirements.txt /app/
RUN pip install --no-cache-dir -r requirements.txt
# Copy the Django project into the container
COPY backend/ /app/
# Copy the updated Nginx configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf
# Copy the uwsgi.ini configuration
COPY uwsgi.ini /app/uwsgi.ini
# Copy the React build from Stage 0 to Django's static files directory
COPY --from=build-frontend /app/frontend/build /app/static
# Collect static files
RUN python manage.py collectstatic --no-input --clear
EXPOSE 80
Вот мое дерево файлов, если это поможет:
newcontainer/
┣ .devcontainer/
┃ ┣ devcontainer.json
┃ ┣ docker-compose.yml
┃ ┗ Dockerfile
┣ .github/
┃ ┗ dependabot.yml
┣ .vscode/
┃ ┗ launch.json
┣ backend/
┃ ┣ core/
┃ ┣ __pycache__/
┃ ┣ asgi.py
┃ ┣ manage.py
┃ ┣ postgres
┃ ┣ requirements.txt
┃ ┣ settings.py
┃ ┣ urls.py
┃ ┣ views.py
┃ ┣ wsgi.py
┃ ┗ __init__.py
┣ frontend/
┃ ┣ build/
┃ ┣ node_modules/
┃ ┣ public/
┃ ┣ src/
┃ ┣ .gitignore
┃ ┣ package-lock.json
┃ ┣ package.json
┃ ┗ README.md
┣ .env
┣ .gitignore
┣ docker-compose.yml
┣ Dockerfile
┣ nginx.conf
┗ uwsgi.ini
Я проверил, что каталог сборки правильно создается в процессе сборки Docker. Я использую Nginx для обслуживания сборки React, как показано в Dockerfile. Извините, я новичок во всем этом, и я просто с нетерпением ждал возможности разместить свой первый контейнер docker на AWS. Я просто пытаюсь понять, что именно я делаю не так.
Изначально это была контейнерная сборка для разработки, и это отлично работало для меня. Проблема возникла, когда я попытался создать свой собственный Dockerfile для производственной сборки этого проекта.
Фактическое поведение:
Получение сообщения placeholder, указывающего на то, что фронтенд не был собран, несмотря на пересборку контейнера Docker.
Ожидаемое поведение:
Фронтенд React должен корректно обслуживаться при доступе к приложению через указанный порт.