CODEWITHSUNDEEP
ruby-on-railsreactjsdockernginxdocker-compose
jjplack
jjplack

Reputation: 123

Rails api react and nginx on docker

after setup rails API, react and Nginx

seems that everything is fine but when I try to post or other actions did not go the API! just stay on react!

every tutorial related to this config point the main location to frontend react and secondary location to the backend but as I said before after visit localhost:80 open the react and on any action like the post, put or delete the action did not go to backend.

I've tried to invert location or upstream both locations on the main location and still not understand how to make this work. so please can someone help clarify this?

docker-compose

version: "3"
volumes:
  postgres_data: {}

services:
  db:
    image: postgres:12.0-alpine
    volumes:
      - postgres_data:/var/lib/postgresql/data

  nginx:
    build:
      context: .
      dockerfile: ./docker/nginx/Dockerfile
    restart: on-failure
    ports:
      - 80:80
      - 8080:8080
    links:
      - frontend
    depends_on:
      - frontend

  backend:
    build:
      context: .
      dockerfile: ./docker/backend/Dockerfile
    ports:
      - 5000:5000
    depends_on:
      - db
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=secret
      - POSTGRES_DB=banks_development

  frontend:
    build:
      context: .
      dockerfile: ./docker/frontend/Dockerfile
    ports:
      - 3000:3000
    depends_on:
      - backend

nginx conf

events {

  worker_connections 1024;
}

http {


  server {

    listen 80;


    location /api {

      # proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;

      proxy_pass http://backend:5000;
      proxy_redirect off;
      proxy_set_header Host $http_host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-NginX-Proxy true;

    }


    # this is where my react-app is located
    location / {

      proxy_pass http://frontend:3000;
      proxy_redirect off;
      #proxy_http_version 1.1;
     # proxy_set_header Upgrade $http_upgrade;
     # proxy_set_header Connection "upgrade";
      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-NginX-Proxy true;


    }
  }
}

Upvotes: 1

Views: 986

Answers (1)

Al-waleed Shihadeh
Al-waleed Shihadeh

Reputation: 2855

you need to configure the frontend with a proxy,same as shown below 

  "proxy": "http://127.0.0.1/api"

check this for more info

Upvotes: 2

Related Questions