DigitalOcean上Dagster UI无法加载的排查求助（Nginx环境）

我在DigitalOcean Droplet上部署开源Dagster，同一Droplet上的MLFlow和phpMyAdmin访问数据库都正常。但访问www.dev.ourdomainname.co.uk/dagsterapp时，页面只显示"Dagit"标题，浏览器控制台报错：

Loading failed for the <script> with source “https://www.dev.ourdomainname.co.uk/static/js/main.751d2cd1.js

同时出现多个"Content-Security-Policy警告"。奇怪的是，访问www.dev.ourdomainname.co.uk/dagsterapp/dagit_info能正常显示预期的版本号。

当前的nginx.conf配置如下：

events
{
    worker_connections 1024;
}
http
{
    fastcgi_read_timeout 900;
    proxy_read_timeout 900;
    server
    {
        listen 80 default_server;
        listen [::]:80 default_server;
        server_name dev.ourdomainname.co.uk www.dev.ourdomainname.co.uk;
        if ($host = dev.ourdomainname.co.uk)
        {
            return 301 https://$host$request_uri;
        }
        if ($host = www.dev.ourdomainname.co.uk)
        {
            return 301 https://$host$request_uri;
        }
    return 404;
    }
    server
    {
        listen 443 ssl;
        listen [::]:443 ssl;
        ssl_certificate /etc/letsencrypt/live/dev.ourdomainname.co.uk/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/dev.ourdomainname.co.uk/privkey.pem;
        server_name dev.ourdomainname.co.uk www.dev.ourdomainname.co.uk;
        root /;
        location /dagsterapp/ {
            resolver 127.0.0.11 valid=5s;
            set $upstream_endpoint http://dagsterapp:3000;
            rewrite ^/dagsterapp(/.*)$ $1 break;
            proxy_pass $upstream_endpoint;
            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;
            proxy_pass_header Content-Type;
        }
        location /mlflow/ {
            resolver 127.0.0.11 valid=5s;
            set $upstream_endpoint http://mlflow:5000;
            rewrite ^/mlflow(/.*)$ $1 break;
            proxy_pass $upstream_endpoint;
            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 /phpmyadmin/ {
            client_max_body_size 50M;
            resolver 127.0.0.11 valid=5s;
            set $upstream_endpoint http://phpmyadmin:80;
            rewrite ^/phpmyadmin(/.*)$ $1 break;
            proxy_pass $upstream_endpoint;
            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;
        }
    }
}

原因分析与修复方案 #

核心问题 #

前端无法加载的根本原因是静态资源路径不匹配：Dagster的React前端默认生成根路径（/static/...）的资源链接，但你的Dagster部署在子路径/dagsterapp/下，nginx没有将/static/的请求转发到Dagster服务，导致浏览器找不到资源；同时路径错误引发了Content-Security-Policy（CSP）警告。

具体检查与修复步骤 #

• 配置Dagster的base路径
  启动Dagit时必须指定--base-path /dagsterapp参数，让Dagster知道自己运行在子路径下，这样前端生成的所有资源链接都会自动带上/dagsterapp前缀。
  示例启动命令：

  dagit -h 0.0.0.0 -p 3000 --base-path /dagsterapp
  

  如果是Docker部署，需要在容器启动命令中添加该参数。

• 验证静态资源访问
  修改启动参数后，尝试直接访问https://www.dev.ourdomainname.co.uk/dagsterapp/static/js/main.751d2cd1.js，如果能正常下载该JS文件，说明路径问题已解决，刷新Dagster页面即可正常加载前端。

• （可选）调整nginx配置兜底
  如果不想修改Dagster启动参数，或者修改后仍有问题，可以在nginx的443 server块中添加以下location规则，强制将/static/请求转发到Dagster服务：

  location /static/ {
      resolver 127.0.0.11 valid=5s;
      set $upstream_endpoint http://dagsterapp:3000;
      proxy_pass $upstream_endpoint;
      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;
  }
  

  不过更推荐优先配置Dagster的base-path，这样所有路径逻辑会更统一。

• 解决CSP警告
  路径问题修复后，CSP警告通常会自动消失。如果仍存在，检查是否有自定义CSP头冲突：
  可以在nginx的/dagsterapp/ location中添加适配的CSP头（生产环境建议收紧规则，以下为调试用）：

  add_header Content-Security-Policy "default-src 'self' https://www.dev.ourdomainname.co.uk; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.dev.ourdomainname.co.uk; style-src 'self' 'unsafe-inline' https://www.dev.ourdomainname.co.uk; img-src 'self' data: https://www.dev.ourdomainname.co.uk; font-src 'self' https://www.dev.ourdomainname.co.uk; connect-src 'self' https://www.dev.ourdomainname.co.uk;";
  

内容的提问来源于stack exchange，提问作者James Bradbury