CODEWITHSUNDEEP
node.jsreactjsdockernginxreverse-proxy
Ali Bhagat
Ali Bhagat

Reputation: 535

On local - React App on Nginx container with proxy to Node Express Containers

This should have been very straightforward but looks like I am missing something very rudimentary and any help will be appreciated.

I am running a POC on my local MacBook. The basic idea is to have a React App built using the create-react-app build scripts and have it deployed into a local nginx-alpine container. I am able to get that going. I am able to access the index.html and see what I should see when the client container is running.

I have a node-express backend running on the same local machine which is stood up using a node docker image. I am able to set this up and I am able to hit the endpoints that these images are serving up from my browser.

The problem is when the api within my react call these express endpoints. I have set up proxy_pass in my nginx.conf and have tried numerous ways to set it up. None of it work. I have tried using localhost, tired using 127.0.0.1, tried using IP address of the docker container, tried using the docker service name, tried setting it up as upstream in my nginx.conf, tried using the backend URL directly in the proxy_pass. Nothing works.

Here is the code...

http://localhost/ --> Load UI

http://localhost:3001/features --> returns a JSON payload I need to use on UI

http://localhost/admin --> is a component on my UI that uses the fetch API to load the path /features.

nginx.conf

  upstream app_servers {

    server localhost:3001;

}

# Configuration for the server
server {

    # Running port
    listen 80;
    root /usr/share/nginx/html;

    location / {
      try_files $uri /index.html;
    }
    # Proxying the connections connections
    location /features {

        proxy_pass         http://app_servers;
        proxy_redirect     off;
        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-Host $server_name;

    }
}

Is there anything obviously wrong in my config file?

The backend API is started up using this docker-compose which I don't believe is a problem because I am able to use the endpoints just fine from my browser. But here it is neverthless.

version: '2'

services:
  thing1:
    image: toggler-backend
    container_name: thing1
    volumes:
      - ./backend:/src/backend
    ports:
      - "3001:3000"

The UI's Dockerfile is this...

FROM nginx:alpine
COPY nginx.conf /etc/nginx

COPY build /usr/share/nginx/html

And I start the UI with the docker run command for now.

docker run -it -p 80:80 toggler-client

Upvotes: 2

Views: 2591

Answers (1)

Tarun Lalwani
Tarun Lalwani

Reputation: 146630

The problem is that your proxy_pass is running inside the nginx container. There localhost and 127.0.0.1 both point to the nginx container itself. What you are trying to do is to reach the host machine. So you have below possible option

Using host IP in proxy_pass

You can use the IP of your host in proxy_pass

Running the nginx container on host network

In your docker run command you can add --network host while running the nginx container. This will make sure localhost points to the host

Running nginx on your app's container network

You can add nginx service also to your docker-compose and use the name of your app service to proxy_pass.

Or you can do a docker network ls and you find a network specific to your compose file. You can use that too

My suggestion is make it a part of the compose file.

Upvotes: 2

Related Questions