How to host React app with live reload with Nginx in Docker

Question

I'm trying to configure React app for local developing, i want it to work with Nginx, but it only works when i host build folder, so live reload can't fetch any changes outside of it, and i get 500 Response when trying to host another folder in nginx. Ideally i want react with live reload working through nginx. How can i do it?

Is it possible to do it with two different containers for local development?

Dockerfile Frontend

FROM node:14

WORKDIR /var/www/static

ENV PATH /var/www/static/node_modules/.bin:$PATH

COPY ./package.json ./package-lock.json /var/www/static/

RUN npm install

COPY . /var/www/static/

Dockerfile Nginx

FROM nginx:1.11

WORKDIR /var/www/static

ADD ./frontend/build /var/www/static

Nginx.conf

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octet-stream;
    gzip on;
    gzip_types text/css image/png image/jpg application/json application/javascript application/xml application/octet-stream;
    sendfile on;
    tcp_nopush on;
    keepalive_timeout 65;

    server {
        listen 80;
        server_name localhost:7000;
        client_max_body_size 512m;
        root /var/www/static/build;

        location / {
#            try_files $uri $uri/ =404;
            try_files $uri /index.html;
#            $uri/index.html @backend;
        }

        location ~ ^/private-files/(.*)$ {
            internal;
            resolver 127.0.0.11 ipv6=off;
            set $storage http://storage-proxy;
            proxy_pass $storage/$1;
        }

        location /local-private-files/ {
            internal;
            alias /;
        }

        location /api/v4 {
            # rewrite ^/api/v4/(.*)$ /$1 break;
            proxy_pass http://backend_drf;
            proxy_set_header Host $http_host;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_read_timeout 3600;
        }

        location /redirect {
            rewrite ^/(.*)$ http://$arg_go? permanent;
        }
    }

    upstream backend_drf {
        server drf:8081;
    }

}

Docker and Frontend in Docker-compose

  nginx:
    build:
      context: .
      dockerfile: backend/Dockerfile.nginx
    image: hub.eis24.me/nginx:1.11
    env_file:
      - ./backend/.env
    volumes:
      - "./deploy/nginx.conf:/etc/nginx/nginx.conf"
      - "./frontend:/var/www/static:rw"
    ports:
      - "0.0.0.0:7000:80"
    links:
      - drf
    depends_on:
      - drf
      - frontend
  frontend:
    image: hub.eis24.me/frontend:latest
    build: ./frontend
    volumes:
      - "./frontend:/var/www/static:rw"
#    ports:
#      - "7000:3000"
#      - "7001:6006"
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: npm start

Nginx 500 when trying to change root folder

Please post the code as text, not an image. – toyota Supra Sep 01 '22 at 15:35 — toyota Supra, Sep 01 '22 at 15:35

score 0 · Answer 1 · answered Sep 01 '22 at 12:57

You are confusing two very different steps in the lifecycle of your application: development and deployment.

Your deployment target is a static build served by nginx, packaged as a Docker image. You development setup is a (guess from my part) create-react-app app template powered by webpack with live-reload configs. This dev setup can be orchestrated from a Docker image but it will be a different one from the production.

For instance you could have something like (using multi stage build):

FROM nodejs:latest as deps
COPY . . # dev files
RUN npm install

FROM deps as dev
CMD npm run start

FROM deps as build-prod

RUN npm build

FROM nginx:latest as prod

COPY --from build-prod ... # import your build files
CMD ... # start your nginx with correct config

Thank you for the answer, I solved my problem by removing nginx container and just added http-proxy-middleware in my package.json Here is solution: https://stackoverflow.com/questions/52605997/when-specified-proxy-in-package-json-must-be-a-string — Leha_Stone, Sep 03 '22 at 11:23

How to host React app with live reload with Nginx in Docker

1 Answers1