Search code examples
nginxflaskhttpsswaggerflask-restplus

Flask Restplus Swagger Not Loading Behind Nginx

I have a Flask API and a Swagger UI generated with Flask Restplus. The API runs in a Docker container behind an Nginx container which serves it over HTTP.

Here is a health check endpoint which confirms the API is running:https://mobydq.net/mobydq/api/v1/health

{"message":"MobyDQ API running in production mode"}

However, the Swagger which is supposed to load at the following URL does not load at all: https://mobydq.net/mobydq/api/doc

Here is the Nginx configuration:

http {
    upstream api  {
      server api:5434;
    }

    upstream app {
      server app:3000;
    }

    # Server for https
    server {
      listen       443 ssl http2;
      server_name  mobydq.net;

      ssl_certificate      /etc/letsencrypt/live/mobydq.net/fullchain.pem;
      ssl_certificate_key  /etc/letsencrypt/live/mobydq.net/privkey.pem;

      # Location for MobyDQ Flask API
      location /mobydq {
        limit_req zone=default burst=20;
        proxy_pass http://api;
        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-Proto $scheme;
      }

      # Location for MobyDQ Web App
      location / {
        limit_req zone=default burst=20;
        proxy_pass http://app;
        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-Proto $scheme;
      }
    }

    # Default server to redirect http requests to https
    server {
      listen 80 default_server;
      server_name mobydq.net;
      listen [::]:80 default_server;

        location ~ /.well-known {
            root /var/www/letsencrypt;
        }
        location / {
            return 301 https://$host$request_uri;
        }
    }
}

Any idea why the Swagger is not loading? I looked into the http requests sent when loading the page but it did not help much. I can only see the favicon loading:

enter image description here

I also looked at the console and saw an error but I'm not able to tell what it means:

enter image description here

Solution

  • The problem was that Nginx did not properly redirect the http requests when trying to get the resources from Swagger (the JSON configuration file in particular).

    The issue has been fixed by changing the Nginx configuration as follow:

    [...]
  # Location for MobyDQ Flask API
  location ~ ^/(mobydq|swaggerui) {
    limit_req zone=default burst=20;
    proxy_pass http://api;
    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-Proto $scheme;
  }
[...]