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.

user4136999
– user4136999

2022-09-01 15:35:46 +00:00
Commented Sep 1, 2022 at 15:35 — user4136999
– user4136999, Commented Sep 1, 2022 at 15:35

adz5A · Accepted Answer · 2022-09-01 12:57:44Z

0

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

answered Sep 1, 2022 at 12:57

adz5A

2,03211 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leha_Stone Over a year ago

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: stackoverflow.com/questions/52605997/…

Nicolay77 Over a year ago

I want to know if live-reload is possible with nginx. It is not for deployment, I develop using nginx in my local Ubuntu machine. So I arrived to this question. And still no answer.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related