Nginx + Puma + Sidekiq 网页界面不显示 css 样式

Question

我有一个在 Nginx 服务器中运行的 angularJS Web 应用程序，该应用程序将请求发送到在 Puma 服务器中运行的 Rails API。我已经集成了 Sidekiq 5.2.8，除了 Sidekiq Web 界面之外，一切都运行良好。

在我的 Nginx 配置文件中，我有一条将请求传递给 API 的规则。请找到整个 nginx.conf 文档：

events {
    worker_connections  1024;
}


http {

    upstream api.development {
    # Path to Puma SOCK file, as defined previously
        server unix:/tmp/puma.sock fail_timeout=0;
    }

    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on; 
    
    keepalive_timeout  65;

    # set client body size to 10M #
    client_max_body_size 10M;

    gzip  on;


    server {
        listen       80 default_server;
        listen [::]:80 default_server ipv6only=on;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        root   /Users/Rober/Projects/domain/dev/domain/app;
        index  index.html index.htm;

        try_files $uri $uri/ /index.html =404;
    

        # Proxy requests to the backoffice Rails API
        location /api {
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $host;
            #proxy_set_header X-Forwarded-Proto https;
            proxy_redirect off;
            rewrite ^/api(.*) /$1 break;
            proxy_pass http://api.development;
        }

        # Rule to proxy the sidekiq web UI
        location /sidekiq {                  
             proxy_pass http://api.development;             
        }


        # Expire rules for static content
        # RCM: WPO
        # Images                                                   
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
            root    /Users/Rober/Projects/domain/dev/domain/app;
            expires 1w;
            add_header Cache-Control "public";
        }  


        # This rule is the root cause of the problems with the sidekiq css
        # I have commented it for testing purposes
        # CSS and Javascript
        #location ~* \.(?:css|js)$ {
        #        root  /Users/Rober/Projects/domain/dev/domain/app;
        #        expires 1w;
        #        add_header Cache-Control "public";
        #}      
        
        # I have replaced the previous location above for this as suggested by @Beena Shetty. 
        location ~* \.(?:css|js)$ {
            add_header X-debug-message "Into the location css" always;
            if ($uri !~* "^/sidekiq/\w*(.*)+$") {
                add_header X-debug-message "Into the location css if" always;
                root  /Users/Rober/Projects/domain/dev/domain/app;
                expires 1w;
                add_header Cache-Control "public";
            }
        }        


        # cache.appcache, your document html and data
        location ~* \.(?:manifest|appcache|html?|xml|json)$ {
            root   /Users/Rober/Projects/domain/dev/domain/app;
                expires -1;
        }
    }
    
    include servers/*;
}

在 Rails 中： 路线：

    require 'sidekiq/web'
  mount Sidekiq::Web => '/sidekiq'

我已在 Nginx 配置文件中包含下一条规则，现在当我请求 http://localhost/sidekiq 时，我可以看到 Web 界面并进行导航，但仍然看不到样式。

location /sidekiq {                     
                proxy_pass http://api.development;
        }

见截图。

开发工具显示，当我加载 sideqik 时，正在尝试在 http://localhost/sidekiq/stylesheets/bootstrap.css 中获取 bootstrap.css 和其他一些 css 和 javascript

我错过了什么？

更新： 我已经在我的 nginx.conf 中找到了问题的根本原因。我有下一条规则，出于性能目的设置缓存过期时间。如果我评论这段代码，一切都会正常。但我怎样才能让两者共存呢？

CSS 和 JavaScript

    location ~* \.(?:css|js)$ {
            root  /Users/Rober/Projects/domain/dev/domain/app;
            expires 1w;
            add_header Cache-Control "public";
    }

更新2：以防万一问题来自另一个点，我已经包含了我的整个nginxconf。 现在，使用提供的配置，我的 Web 应用程序中的过期规则仍然有效，但 sidekiq Web 应用程序中的 css 不起作用。 我已包含两个标头作为调试。第一个是当服务器访问位置规则时，第二个是当服务器访问 if 条件内部时。当我使用

localhost

请求我的主页并检查我自己的 css（例如 app.css）的请求时，我可以看到标题

X-debug-message: Into the location css if

，这是正确的。 如果我使用 localhost/sidekiq 请求 sidekiq，我仍然会收到 css 404 错误，假设 http://localhost/sidekiq/stylesheets/bootstrap.css 我可以看到标题

X-debug-message: Into the location css

。

目前的结论：

1. 一旦我包含 location ~* .(?:css|js)$ 规则，sidekiq css 就会停止工作。即使规则为空，例如：

        location ~* \.(?:css|js)$ {     
        }
   

2. 一旦我删除或评论整个规则，sidekiq css 就可以完美工作，但不幸的是，这与出于性能目的而需要包含的过期规则不兼容。

Answer 1

试试这个：

location ~* \.(?:css|js)$ {
     if ($uri !~* "^/sidekiq/\w*(.*)+$"){
            root  /Users/Rober/Projects/domain/dev/yanpy/app;
            expires 1w;
            add_header Cache-Control "public";
       }
}

Answer 2

我无法找到解决此问题的方法，因此我使用以下方法对其进行了破解：我将

sidekiq

的资产复制到

public

文件夹中，它开始工作（因为它们被 UI 引用） .

|- images
|-- favicon.io
|-- logo.png
|-- status.png

|- javascripts
|-- application.js
|-- dashboard.js

|- stylesheets
|-- application.css
|-- application-rtl.css
|-- application-dark.css
|-- application-rtl.min.css
|-- bootstrap.css

主要是这些文件：https://github.com/mperham/sidekiq/tree/master/web/assets

Answer 3

我们的解决方案是：添加到

config/环境/生产.rb

config.middleware.use Rack::Deflater, if: lambda { |*, body| body.try(:path)&.include?("gems/sidekiq") && body.path&.include?("/assets/") }

通过这样做，我们可以防止重定向到 NGINX。

供您参考： rack/lib/rack/deflater.rb