Dockerized Django-React-PostgreSQL App Not Serving Frontend Despite Successful Build and Container Rebuild

I have a Dockerized application setup that includes a React frontend and a Django backend service. Despite successfully building the Docker container and ensuring the backend is running as expected, when I attempt to access the frontend, I'm met with the following message: 'This URL is only accessible after you've built the React frontend.'

I've attempted to rebuild the Docker container from scratch to ensure there are no caching issues, but the problem persists.

Environment: Operating System: Win10 -- Using Ubuntu through WSL for building the container Docker Version: Docker version 25.0.3, build 4debf41 Node Version: 10.5.0

Steps Taken:

  1. Rebuilding the Docker Container: I used the command docker build --no-cache -t mycontainer:latest . to ensure a fresh build without using any cached layers.
  2. Running the Container: After rebuilding, I ran the container using docker run -d -p 8000:80 --name mycontainer mycontainer:latest.
  3. Verifying Backend Functionality: I can confirm the backend services are running as expected, responding to API calls.

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

Here's my file tree if it helps:

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

I have verified that the build directory is correctly generated in the Docker build process. I'm using Nginx to serve the React build, as shown in the Dockerfile. Sorry, I am new to all of this and I was just looking forward towards hosting my first docker container on AWS. I am just trying to work out what exactly I am doing wrong.

It was originally a containerized development build, and that worked great for me. The problem arose whenever I attempted to create my own Dockerfile for the production build of that project.

Actual Behavior:

Receiving a placeholder message indicating that the frontend hasn't been built, despite the Docker container rebuild.

Expected Behavior:

The React frontend should be served correctly when accessing the application through the specified port.

Back to Top