nginx + FastAPI + Reactjs

maximedebarbatPRO

a year ago

Have a small webapp I wish to run. So far so good I managed to run nginx + reactjs together but impossible to have my backend properly connected.
I have checked already documentation, others posts, troubleshooting I guess I'm just silly and missed something.

The three components are dockerized in a github monorepo.

nginx conf :

upstream client {
  server client:3000;
}

upstream back-end {
  server back-end:3001;
}

server {
  listen 80;
  client_max_body_size 40M;

  location / {
      proxy_pass http://client;
      proxy_request_buffering off;
  }

  location /sockjs-node {
      proxy_pass http://client;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
  }

  location /api {
      rewrite /api/(.*) /$1 break;
      proxy_pass http://back-end;
      proxy_request_buffering off;
  }
}

Client (front-end) :
docker + entrypoint serve -c build

Back-end :
docker + entrypoint :
CMD ["uvicorn", "app.__webserver__:app", "--host", "0.0.0.0", "--port", "3001","--forwarded-allow-ips", "*", "--reload"]

Note :

I can access my front-end, nginx and back-end alone as I opened public addresses for all of them. Through nginx I can access my front-end but when I go to
www.super_address.com/api which is supposedly leading me to my back-end, well well well, it doesn't, 504 :)

4 Replies

maximedebarbatPRO

a year ago

Also, I renamed my services accordingly within railway ! :)


a year ago

There is a ready-made solution for this near-exact use case, it will get you 98% of the way there! https://railway.app/template/7uDSyj

Make sure you deploy it into your existing project that has the frontend and backend services.

I would also strongly recommend against using the --reload flag as that is only meant for use during development.

Another thing to note is that you are using uvicorn and have set it to listen on all IPv4 addresses, however, the private network is IPv6 only.
To allow your backend to be accessed over the private network you would have to listen on the host :: (all IPv6 addresses).
This has the caveat of closing off access to the backend publically since uvicorn does not support dual-stack binding to an IPv4 and an IPv6 address (you would only be able to access it publically from the proxy), if that's something you're fine with then you can stop here.

If you would like to be able to access your backend via the proxy and from its public domain, then I would recommend hypercorn, it should be a drop-in replacement, your start command with hypercorn would be

hypercorn app.__webserver__:app --bind [::]:3001


maximedebarbatPRO

a year ago

Thanks a lot Brody for this template I completely missed and your kind explanations ! Cheers !


a year ago

Cheers!


nginx + FastAPI + Reactjs - Railway Help Station