React + Django + Postgres

Docker Hub
1

I have a React + Django app I need to Dockerize. I’m having trouble with having it run consistently both locally and in production.

The Django app has a view which renders the index.html generated by the React build.

React and Django are siblings in the root of my project.

Here’s my current docker-compose.yml (in the root) and my react_app/Dockerfile and django_app/Dockerfile:

docker-compose.yml

version: '3'

services:
  db:
    image: postgres
    container_name: portfolio_db
    volumes:
      - ./data/db:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
      - POSTGRES_HOST=db
      - POSTGRES_PORT=5432
    networks:
      - net

  frontend:
    container_name: portfolio_frontend
    build:
      context: ./react_frontend
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    volumes:
      - react_build:/usr/share/nginx/html
    networks:
      - net

  backend:
    container_name: portfolio_backend
    build:
      context: ./django_backend
    ports:
      - 8000:8000
    volumes:
      - react_build:/code/react_frontend/build
    depends_on:
      - db
    command: bash -c "sleep 10 && python manage.py makemigrations && python manage.py migrate && python manage.py runserver 0.0.0.0:8000"
    networks:
      - net

networks:
  net:
    driver: bridge

volumes:
  react_build:

react_frontend/Dockerfile

FROM node:14 

WORKDIR /code 

COPY . . 

RUN npm cache clean --force
RUN npm install 
RUN npm install react-scripts --global

RUN npm run build 

FROM nginx:latest 
COPY --from=0 /code/build/ /usr/share/nginx/html 

EXPOSE 80

django_backend/Dockerfile


# Use the official Python image as the base image 
FROM python:3.9 

# Set environment variables 
ENV PYTHONDONTWRITEBYTECODE 1 
ENV PYTHONUNBUFFERED 1 

# Set the working directory in the container 
WORKDIR /code 

# Copy the Django project code 
COPY . .

# Install dependencies 
RUN pip install --no-cache-dir -r requirements.txt 

# Start the Django app with Gunicorn 
CMD gunicorn django_backend.wsgi:application --bind 0.0.0.0:8000

For a better idea of what my Docker configuration should do please see https://brandonlecky.medium.com/react-django-integration-in-a-few-simple-steps-390d02dff67d

2

Did you find the solution?