Question

我试图为503添加自定义错误页面。我所做的是。在nginx.conf文件中将以下行添加到服务器conf。

error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root  /home/username/sites/myProject/current/errorPages;
    internal;

}

当uwsgi关闭时显示自定义页面，但这并不是任何图像。我试图做很多我能想到的配置，但没有运气。有谁知道如何显示图像文件并为自定义错误页面启用css？

我将自定义错误页面放入/ home / username / sites / myProject / current / errorPages 和文件结构是..

errorPages/50x.html
errorPages/50x_files/50x.css
errorPages/50x_files/50x.js
errorPages/50x_files/image.png

Answer 1

我遇到了同样的问题，并且设置nginx conf的工作方式是：

error_page 500 502 503 504 /50x.html;
location = /50x.html {
  root  /home/username/sites/myProject/current/errorPages;
}
location = /image.png {
  root /home/username/sites/myProject/current/errorPages/50x_files;
}

然后简单地将图像引用为src =＆＃34; image.png＆＃34;。这同样适用于你的css和js！

编辑：我找到了一种让它适用于一堆文件的方法：

error_page 500 502 503 504 /errorPages/50x.html;
location /errorPages/ {
  root  /home/username/sites/myProject/current/;
}

这样，errorPages文件夹中的所有文件都可用（例如src =＆＃34; /errorPages/image.png"），因为nginx将尝试匹配所有＆＃34; / errorPages / .. ＆＃34 ;.有必要删除＆＃34; =＆＃34;在＆＃34;位置＆＃34; （因为它不再完全匹配）和＆＃34;内部;＆＃34;在其中（因为其他资源将从html调用，而不是在内部由nginx调用）。

Answer 2

您的图片/ css未显示/加载的原因是因为您正在使用collected指令。 items.take(10)指令指定给定位置只能用于内部请求，并且不可从外部访问或访问（即http://mysite/errorPages/500.html）。因此，为这些文件提供了404错误。

一些解决方法是：

删除内部指令

catch(:done) do
    items.inject({items: [], budget: 100}) do |ledger, item|
        remainder = ledger[:budget] - item.price
        if remainder < 0
            throw(:done, ledger)
        else
            ledger.tap do |this|
                this[:items] << item
                this[:budget] = remainder
            end # tap just returns what is being tapped into, in this case, ledger
        end
    end
end

使用internal作为错误页面。但是，这对您的图片或链接到您网页的其他文件不起作用。
将css和图像文件放在errorPages文件夹之外，并在html代码中引用它们，并从网站的根目录开始，使用相对路径。

Answer 3

这对我有用：

error_page 500 502 503 504 = @errorz;
location @errorz{
        root /home/username/sites/myProject/current/errorPages;
        try_files $uri /50x.html = 502 503;
}

Answer 4

我认为最好的方法是做以下事情：

使用inline CSS
将图片转换为Base64

执行此操作后，您可以将生成的Base64字符串嵌入到background-image CSS规则中，如下所示：

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==)

您也可以将字符串与<img>标记一起使用，只需将其传递给src属性，如下所示：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==" />

这样您就可以保留internal nginx规则。

带有CSS和图像文件的nginx自定义错误页面502

4 个答案: