月下博客

自定义Nginx错误页

Nginx 是一个功能强大、性能强劲的web中间件、反向代理软件。本站目前便是使用 Nginx 作为前端web软件,动态请求转发到后端 PHP 处理。

网站运行过程中难免出现各种问题,比如 本站近期发生的几起安全事件 中Nginx配置错误导致访客进来都是404,服务器简易防CC攻击设置 中使用的请求速率限制返回503。无论哪种错误,访客看到冰冷的错误提示页面总会感觉不好:

Nginx 404错误

本文介绍使用 error_page 指令自定义Nginx错误页,当出现404、502等错误时能以友好的页面提示访客。

自定义Nginx错误页

根据HTTP协议,4xx表示客户端请求错误,5xx表示服务器处理错误。其中常见的HTTP错误代码有:

error_page 指令是Nginx核心模块http中的指令,用来设置出现错误时Nginx显示的页面。其语法为:

error_page 错误代码 [=响应代码] uri;

error_page 可以用在 http、server、location 和 if 块中,一般情况下都用在 server 块中针对具体站点设置。

例如自定义 Nginx 404错误页面:

error_page 404 /404.html;

错误代码可以一次性写多个,也可以分别设置。例如:

# 50x错误使用同一个页面
error_page 500 501 502 503 504 /50x.html;
# 403 错误单独设置
error_page 403 /403.html;

响应代码默认是错误代码,一般不需要设置,如有必要可重置响应代码:

# 重置响应代码404为200
error_page 404 =200 /404.html;

uri不必是本地的,也可以是外部uri:

error_page 404 https://example.com/404.html;

一般情况下我们不希望错误页被访问,可以用 internal 指令告诉Nginx:

error_page 404 /404.html;
# 禁止 /404.html 被直接访问
location = /404.html {
    internal;
}

本站Nginx错误页配置

本站近期因安全攻击、错误配置、脚本错误等造成短期内服务不可用,给访客带来了不便。除了使用监控及时预警外,设置一个友好的错误页面也是必要的。目前本站自定义错误页配置为:

server {
    listen 443 ssl http2;
    server_name tlanyan.me www.tlanyan.me;
    ... 一些其他配置

    error_page 403 /403.html;
    error_page 404 /404.html;
    error_page 500 501 502 503 504 /50x.html;

    location = 403.html {
        internal;
    }
    location = /404.html {
        internal;
    }
    location = /50x.html {
        internal;
    }
    ...一些其他设置

403页面的效果可 点击这里 查看:

Nginx 403自定义错误页

404页面的效果可 点击这里 查看。与原始的错误页面相比,目前的错误提示更为友好,有精力的话可以制作更精致美观的页面。

因为internal指令的存在,这些错误页面只能被触发显示,不能直接访问

参考

1.  http://nginx.org/en/docs/http/ngx_http_core_module.html#error_page

2.  Nginx自定义404页面3种方法