Serving React frontend and Flask backend with Nginx reverse proxy

Question

I’ve been trying to set up a React frontend and a Flask backend using Nginx as a reverse proxy to differentiate the two. I have the flask backend running a Gunicorn server on localhost:5000, but I can’t seem to get the Nginx location block to register it. My config file looks like this:

server {
  listen 80;
  root /var/www/[react-app-domain-name]/html;
  index index.html index.htm;

  access_log /var/log/nginx/reverse-access.log;
  error_log /var/log/nginx/reverse-error.log;

  location / {
    try_files $uri $uri/ = 404;
  }

  location /api {
    include proxy_params;
    proxy_pass http://localhost:5000;
  }
}

My understanding is that this should route all traffic through my react app at root, except for requests that have “/api”, which should then be routed through my backend Flask api. However, when I try to access a /api route, all I get back is a 404 response. This also happens if I true to access it through curl on the command line.

Here’s the 404 error log that I have:

2020/09/09 21:03:05 [crit] 36926#36926: *114 connect() to unix:/home/[name]/backend/backend.sock failed (2: No such file or directory) while connecting to upstream, client: 127.0.0.1, server: , request: "GET /api/ HTTP/1.0", upstream: "http://unix:/home/[name]/backend/backend.sock:/api/", host: "[hostname]"

Any help would be very much appreciated. I’m tearing my hair out here. Thanks.

baraboom · Answer

Hi,

Jumping right in, does this file exist on the file system?

/home/[name]/backend/backend.sock

If that file doesn’t exist, then you need to figure out what should be running to create it.

If it does exist, then the nginx user might not have permission to access the parent directory.

Hope this helps… if you have more details or run into new errors please let us know - good luck!

KFSys · Answer

Based on your description and Nginx configuration, there are a few things to look at to resolve the issue with your Flask API not being accessible via Nginx.

1. Check Flask/Gunicorn Configuration

First, ensure your Flask application is running correctly with Gunicorn and is accessible directly (bypassing Nginx) at http://localhost:5000. You can check this with:

curl http://localhost:5000/api/some-route

If this doesn’t work, the issue might be with your Flask/Gunicorn setup, not Nginx.

2. Review Nginx Configuration

Your Nginx configuration for the reverse proxy seems mostly correct, but let’s verify a few things:

Remove include proxy_params; or ensure that the proxy_params file exists and contains correct directives for proxying. Usually, this file sets headers that are important for the proxied application to know about the original request.
The error log indicates an attempt to connect to a Unix socket (backend.sock), but your proxy_pass is set to http://localhost:5000. Ensure there’s no conflicting configuration in proxy_params or elsewhere that might cause this.

3. Correct Location Block

Modify your location /api block to make sure it correctly proxies to your Flask application:

location /api/ {
  proxy_pass http://localhost:5000;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
  proxy_redirect off;
}

Note the trailing slash in location /api/ and proxy_pass http://localhost:5000;. This setup assumes your Flask app routes start with /api/.

4. Check Error and Access Logs

Since you’re seeing 404 errors, the access logs (/var/log/nginx/reverse-access.log) and error logs (/var/log/nginx/reverse-error.log) should contain information about these failed requests. Check these logs for any additional information.

5. Test and Reload Nginx

After making changes to the Nginx configuration:

Test the configuration: sudo nginx -t
Reload Nginx to apply the changes: sudo systemctl reload nginx

6. Curl Command Adjustment

If you test with curl from the command line, ensure the URL is correct. For example:

curl http://localhost/api/some-route

or replace localhost with your domain name if you’re testing externally.

7. File Permissions

Ensure that Nginx has the necessary permissions to access the React app’s files and Flask’s Unix socket file (if you’re using one).

Conclusion

By carefully checking each of these areas, you should be able to identify why your /api requests are not being correctly proxied to your Flask app. If the problem persists after these checks, consider providing more details or the output of some commands for further analysis.