CODEWITHSUNDEEP
ruby-on-railsreactjsnginxheroku
Jayesh Kulkarni
Jayesh Kulkarni

Reputation: 51

Heroku - Seperate frontend and backend with Nginx on same domain

I have an application with two github repos one for react and one for rails app. Requirement is all the routes should go to Rails server except routes starting with /catalog should go to to React app. Rails app server will communicate with React Server internally. SSL is configured on Nginx level.

I have created 3 different apps in heroku :

My nginx server config looks like :

upstream rails {
  server $HEROKU_APP_rails_URL;
}

upstream react {
  server $HEROKU_APP_react_URL;
}


server {
  listen $PORT;
  server_name *.xyz.com;
  # large_client_header_buffers 4 32k;

  location / {
    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_pass          http://rails;
  }

  location /catalog {
    
    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_pass          http://react;
  }
}

with above config I am getting HTTP 400 error on Nginx and it is not able to redirect the request. Please let me know what am i doing wrong.

Upvotes: 1

Views: 476

Answers (1)

Jayesh Kulkarni
Jayesh Kulkarni

Reputation: 51

Finally managed to solve this issue.. My nginx config looks like

  upstream upstream_app_a {
        server app_a.herokuapp.com:443;
    }

    upstream upstream_app_b {
        server app_b.herokuapp.com:443;
    }

    server {
    
        listen $PORT;

        location / {
            set $upstream upstream_app_a;
            proxy_pass https://$upstream;
            proxy_ssl_name app_a.herokuapp.com;
            proxy_set_header x-forwarded-host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host app_a.herokuapp.com;
            
        } 
        location /static {
            set $upstream upstream_app_b;
            proxy_pass https://$upstream/static;
            proxy_set_header        Host app_b.herokuapp.com;
            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 /product_catalog {
            set $upstream upstream_app_b;
            proxy_pass https://$upstream;
            proxy_ssl_name app_b.herokuapp.com;
            proxy_set_header x-forwarded-host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host app_b.herokuapp.com;
        }
    }

Please make sure you set correct value for header

proxy_set_header Host app_a.herokuapp.com

We managed to solve this issue by referring to article

Upvotes: 1

Related Questions