Nginx + Gunicorn: cannot access Flask app without root location - nginx

Question

I am trying to deploy a Flask app through nginx + Gunicorn. I am currently allowing my Flask app to be accessed by http://kramericaindustries.hopto.org:8050/ or http://kramericaindustries.hopto.org/heatmap/. However the later URL, with a URI of /heatmap/ presents a screen which just says "Loading..." indefinitely while the former loads correctly. I believe it has to do with my nginx.conf file, but I am new to nginx and not really sure what I'm doing wrong. I believe it has something to do with proxy directives but don't know. Below is my nginx.conf file, and the areas in question are near the bottom. Let me know if you have any questions or need any more information. Thanks!
user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 768;
# multi_accept on;
}
http {
##
# Basic Settings
##
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
##
# Gzip Settings
##
gzip on;
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
listen 80;
server_name kramericaindustries.hopto.org;
rewrite ^/rstudio$ $scheme://$http_host/rstudio/ permanent;
location /rstudio/ {
rewrite ^/rstudio/(.*)$ /$1 break;
proxy_pass http://localhost:8787;
proxy_redirect http://localhost:8787/ $scheme://$http_host/rstudio/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_read_timeout 20d;
}
location /heatmap/ {
# rewrite ^/heatmap/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:8000;
# proxy_redirect http://127.0.0.1:8000/ $scheme://$http_host/heatmap/;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
server {
listen 8050;
server_name kramericaindustries.hopto.org;
location / {
proxy_pass http://127.0.0.1:8000;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
}

Answer 1

What location is your index page trying to load scripts and other source files from?
For your :8050 listener you're serving directly from the root location, and your index page may be pulling resources expecting that there's no additional /heatmap path.
e.g. the following would fail when served from /heatmap, because the resource URL's are not being prefixed with that path:
<script src="/_dash-component-suites/dash_renderer/polyfill#7.v1_8_3m1605058426.8.7.min.js"></script>
Those are going to 404 as the correct URL for those resources is now /heatmap/_dash-component-suites/…
If you're hardcoding these, you'll have to add the heat map in. If you're rendering the index with Flask / Jinja2 templating, you can prefix your URL's with {{ request.path }}, e.g.:
<script src="{{ request.path }}/_dash-component-suites/dash_renderer/polyfill#7.v1_8_3m1605058426.8.7.min.js"></script>
When served from the root location it will return /, when served from the heat map path it will return /heatmap

Answer 2

OK I finally got this figured out, and it had nothing to do with nginx or Gunicorn. The nginx.conf above is correct. It had to do with the Flask app I am deploying. I am actually using a Dash app (an app made with Flask), and when declaring the instance of Dash, the URL basename has to be specified as it is "/" by default. This is the line I needed
app = dash.Dash(__name__, external_stylesheets=external_stylesheets, url_base_pathname='/heatmap/')