Nginx + Gunicorn：没有根位置无法访问 Flask 应用程序

Question

我正在尝试通过 nginx + Gunicorn 部署 Flask 应用程序。我目前允许 http://kramericaindustries.hopto.org:8050/ or http://kramericaindustries.hopto.org/heatmap/ 访问我的 Flask 应用程序。然而，后来的 URL，其 URI 为 /heatmap/ 显示的屏幕只是无限期地显示“正在加载...”，而前者正确加载。我相信它与我的 nginx.conf 文件有关，但我是 nginx 的新手，不太确定我做错了什么。我相信它与代理指令有关但不知道。下面是我的 nginx.conf 文件，有问题的区域靠近底部。如果您有任何问题或需要更多信息，请告诉我。谢谢！

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/(.*)$ / 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/(.*)$ / 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

您的索引页试图从哪个位置加载脚本和其他源文件？

对于您的 :8050 侦听器，您直接从根位置提供服务，并且您的索引页面可能正在提取资源，期望没有额外的 /heatmap 路径。

例如以下内容在从 /heatmap 提供时会失败，因为资源 URL 没有以该路径为前缀：

<script src="/_dash-component-suites/dash_renderer/polyfill@7.v1_8_3m1605058426.8.7.min.js"></script>

这些资源将转到 404，因为这些资源的正确 URL 现在是 /heatmap/_dash-component-suites/…

如果您对这些进行硬编码，则必须添加热图。如果您使用 Flask / Jinja2 模板渲染索引，则可以在 URL 前加上 {{ request.path }}，例如：

<script src="{{ request.path }}/_dash-component-suites/dash_renderer/polyfill@7.v1_8_3m1605058426.8.7.min.js"></script>

从根位置提供服务时，它将 return /，从热图路径提供服务时，它将 return /heatmap

Answer 2

好的，我终于弄明白了，它与 nginx 或 Gunicorn 无关。上面的 nginx.conf 是正确的。它与我正在部署的 Flask 应用程序有关。我实际上正在使用一个 Dash 应用程序（一个用 Flask 制作的应用程序），并且在声明 Dash 的实例时，必须指定 URL 基本名称，因为它默认为“/”。这是我需要的行

app = dash.Dash(__name__, external_stylesheets=external_stylesheets, url_base_pathname='/heatmap/')

Nginx + Gunicorn：没有根位置无法访问 Flask 应用程序

Nginx + Gunicorn: cannot access Flask app without root location

nginx

flask

gunicorn

plotly-dash