使用Nginx的error_page指令自定义404 50x错误页面

当nginx出现404和50x错误时，直接显示默认的nginx出错页面显得非常地不友好，我们可以自定义错误页面为用户显示友好的错误页面。这个用到了nginx的error_page指令。下面介绍在nginx配置自定义的404 50x错误页面。

创建你的自定义错误页面

我们把错误页面放到/usr/share/nginx/html目录，这个目录一般是在ubuntu通过apt安装时默认的nginx网站根目录。我们命名404错误页面为custom_404.html，500级别的错误页面称为custom_50x.html。执行如下命令创建错误页面：

echo "<h1>Error 404: Not found :-(</h1>" | sudo tee /usr/share/nginx/html/custom_404.html
echo "<p>I have no idea where that file is, sorry.  Are you sure you typed in the correct URL?</p>" | sudo tee -a /usr/share/nginx/html/custom_404.html
echo "<h1>Oops! Something went wrong...</h1>" | sudo tee /usr/share/nginx/html/custom_50x.html
echo "<p>We seem to be having some technical difficulties. Hang tight.</p>" | sudo tee -a /usr/share/nginx/html/custom_50x.html

配置nginx使用你的错误页面

我们这里假设默认的nginx server配置在/etc/nginx/sites-enabled/default，打开此文件

vi /etc/nginx/sites-enabled/default

配置404错误页面

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

        . . .

        error_page 404 /custom_404.html;
        location = /custom_404.html {
                root /usr/share/nginx/html;
                internal;
        }
}

配置500级别错误页面

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

        . . .

        error_page 404 /custom_404.html;
        location = /custom_404.html {
                root /usr/share/nginx/html;
                internal;
        }

        error_page 500 502 503 504 /custom_50x.html;
        location = /custom_50x.html {
                root /usr/share/nginx/html;
                internal;
        }

        location /testing {
                fastcgi_pass unix:/does/not/exist;
        }
}