Nginx error_page自定义错误页面设置过程

Nginx是一款高性能的Web服务器和反向代理服务器。在我们的网站中，有时候会出现一些错误，比如404页面未找到，500出现内部错误等。这些错误如果没有处理好, 会影响到用户的体验，所以我们需要将这些错误页面进行美化处理，使得用户能够更好地使用我们的网站。Nginx提供了error_page指令来自定义错误页面，下面是详细的步骤说明及示例。

步骤一：定位Nginx配置文件

在Linux系统中，Nginx配置文件通常都在/etc/nginx目录下，打开nginx.conf文件。

sudo vi /etc/nginx/nginx.conf

步骤二：配置自定义错误页面

在nginx.conf文件中添加error_page指令来配置自定义错误页面。

http {
    ...
    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
    location = /404.html {
        root /usr/share/nginx/html;
        internal; 
    }
    location = /50x.html {
        root /usr/share/nginx/html;
        internal; 
    }
}

上述代码中，我们定义了两个错误页面：404页面和50x页面，其中404页面需要进行 root 设置，而50x 页面需要设置多个错误状态码。其中 internal 表示仅允许 Nginx 内部访问，不允许外部直接访问。

步骤三：配置自定义页面的样式（可选）

将自己设计的样式文件以及相关的图片、字体等资源上传到服务器上的指定目录下，比如：/usr/share/nginx/html，以404页面为例，修改样式文件并在/usr/share/nginx/html目录下新增404.html文件。

步骤四：测试

重启Nginx服务，测试自定义页面是否生效。

sudo service nginx restart

示例一：自定义404页面

在/usr/share/nginx/html目录下创建404.html文件，同时也可以在该目录下放置我们设计的样式文件、字体、图片等。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404 Error - Page Not Found</title>
    <style>
        body {
            background: #969696;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        h1 {
            color: #fff;
            font-size: 6rem;
            font-weight: bold;
            margin: 0;
            line-height: 1;
        }

        p {
            color: #fff;
            font-size: 2rem;
            margin: 0;
            padding-bottom: 3rem;
        }

        button {
            background: #fff;
            color: #969696;
            font-size: 2rem;
            border: none;
            border-radius: 5px;
            padding: 1rem 3rem;
            cursor: pointer;
            transition: all .3s ease;
        }

        button:hover {
            background: #000;
            color: #fff;
            transition: all .3s ease;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Oops!</h1>
        <p>404 Error - Page Not Found</p>
        <button onclick="window.history.back()">返回上一页</button>
    </div>
</body>
</html>

修改nginx.conf文件并重启Nginx服务。

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

访问不存在的页面，即可看到自定义的404页面。

示例二：自定义50x页面

在/usr/share/nginx/html目录下新增50x.html文件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>500 Error - Internal Server Error</title>
    <style>
        body {
            background: #d9534f;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        h1 {
            color: #fff;
            font-size: 6rem;
            font-weight: bold;
            margin: 0;
            line-height: 1;
        }

        p {
            color: #fff;
            font-size: 2rem;
            margin: 0;
            padding-bottom: 3rem;
        }

        button {
            background: #fff;
            color: #d9534f;
            font-size: 2rem;
            border: none;
            border-radius: 5px;
            padding: 1rem 3rem;
            cursor: pointer;
            transition: all .3s ease;
        }

        button:hover {
            background: #000;
            color: #fff;
            transition: all .3s ease;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Oops!</h1>
        <p>500 Error - Internal Server Error</p>
        <button onclick="window.location.href='http://localhost'">返回首页</button>
    </div>
</body>
</html>

修改nginx.conf文件并重启Nginx服务。

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

访问不存在的页面，Nginx会返回500错误，将会显示自定义的50x页面。

总之，使用error_page指令可以方便地定义自己的错误页面，提升用户体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Nginx error_page自定义错误页面设置过程 - Python技术站