Deployment of containerized React Django app with nginx

Question

I have an app: client in react. server in django.

the app is containerized: backend-container and frontend-container as follows (docker-compose.yaml):

version: '3.8'

services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
      args:
        POSTGRES_USER: ${POSTGRES_USER}
        POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
        POSTGRES_HOST: ${POSTGRES_HOST}
        SECRET_KEY: ${SECRET_KEY}
        DEBUG: ${DEBUG}
        CORS_ALLOWED_ORIGIN: ${CORS_ALLOWED_ORIGIN}
        REACT_APP_ALLOWED_HOST: ${REACT_APP_ALLOWED_HOST}
    image: backend
    container_name: backend-container
    ports:
      - "8000:8000"
    environment:
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_HOST: ${POSTGRES_HOST}
      SECRET_KEY: ${SECRET_KEY}
      DEBUG: ${DEBUG}
      CORS_ALLOWED_ORIGIN: ${CORS_ALLOWED_ORIGIN}
      REACT_APP_ALLOWED_HOST: ${REACT_APP_ALLOWED_HOST}

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
      args:
        REACT_APP_ALLOWED_HOST: ${REACT_APP_ALLOWED_HOST}
    image: frontend
    container_name: frontend-container
    ports:
      - "3000:3000"
    environment:
      NODE_ENV: production
      REACT_APP_ALLOWED_HOST: ${REACT_APP_ALLOWED_HOST}

and the app is hosted on an EC2 instance, deployed using github action: name: My workflow

on: workflow_dispatch

jobs:
  first-job:
    runs-on: self-hosted
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Build the Docker backend image
        env:
          POSTGRES_USER: ${{ secrets.POSTGRES_USER }}
          POSTGRES_PASSWORD: ${{ secrets.POSTGRES_PASSWORD }}
          POSTGRES_HOST: ${{ secrets.POSTGRES_HOST }}
          SECRET_KEY: ${{ secrets.SECRET_KEY }}
          DEBUG: ${{ secrets.DEBUG }}
          CORS_ALLOWED_ORIGIN: ${{ secrets.CORS_ALLOWED_ORIGIN }}
          REACT_APP_ALLOWED_HOST: ${{ secrets.REACT_APP_ALLOWED_HOST }}
        run: |
          sudo docker-compose -p fullstack down
          sudo POSTGRES_USER=$POSTGRES_USER POSTGRES_PASSWORD=$POSTGRES_PASSWORD POSTGRES_HOST=$POSTGRES_HOST SECRET_KEY=$SECRET_KEY DEBUG=$DEBUG CORS_ALLOWED_ORIGIN=$CORS_ALLOWED_ORIGIN REACT_APP_ALLOWED_HOST=$REACT_APP_ALLOWED_HOST docker-compose -p fullstack up --build -d

I can see the containers are running on my EC2 instance.

I configured an nginx on the EC2 instance:

server {
    listen 80;

    server_name _;

    location / {
        proxy_pass http://172.20.0.3:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_read_timeout 90;
        proxy_connect_timeout 90;
        proxy_redirect off;
    }
}

172.20.0.3 is the local network address of my frontend-container.

my react-app currently trying to approach from the code to my backend-container through backend:8000 (backend is the name of the service in my docker-compose) as follows:

const App = () => {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    fetch(http://${process.env.REACT_APP_ALLOWED_HOST}:8000/demoapp/allBooks)
      .then(response => response.json())
      .then(data => setBooks(data.books)) // Access the 'books' property of the response
      .catch(error => console.error('Error fetching data:', error));
  }, []);
...

my api request http://backend:8000/demoapp/allBooks is failing that way. I'm probably miss something with the configuration of nginx, and I don't know what exactly.

Your React app runs in the individual user's web browsers. The front end "server" just serves the raw JavaScript files up to the web browsers. The code running in web browsers, on people's laptops/desktops have no way to resolve the backend address, or connect to your backend server at all. You will need to configure Nginx to proxy both the front-end and the backend. — Mark B
– Mark B, Commented Aug 13, 2024 at 19:35

0xn0b174 · Accepted Answer · 2024-08-14 01:53:19Z

try adding something like this in you nignx config:

server {
    listen 80;
    server_name your.domain.com;

    location / {
        # Forward requests to the frontend
        proxy_pass http://172.20.0.3:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /api/ {
        # Forward API requests to the backend
        proxy_pass http://backend-container:8000;  # Use container name for internal Docker communication
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

make sure to check the hosts for both the container

Collectives™ on Stack Overflow

Deployment of containerized React Django app with nginx

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related