Nginx error page configuration, beautify website failure prompts-Nginx-php.cn

Nginx error page configuration, beautify website failure prompts

PHPz

Release： 2023-07-04 13:33:11

Original

2930 people have browsed it

Nginx error page configuration, beautify website fault prompts

During the operation of the website, it is inevitable to encounter server errors or other failures. These problems will cause users to be unable to access the website normally. In order to improve user experience and website image, we can configure Nginx error pages to beautify website failure prompts. This article will introduce how to customize the error page through Nginx's error page configuration function, and provide code examples as a reference.

1. Modify the Nginx configuration file

First, we need to open the Nginx configuration file, which is usually located at /etc/nginx/nginx.conf or /etc/nginx/conf.d/default. conf. Find the server block and add the following configuration:

server {
    ...
    error_page 403 /error/403.html;
    error_page 404 /error/404.html;
    error_page 500 502 503 504 /error/50x.html;
    ...
}

Copy after login

In the above configuration, the error_page directive is used to set the path of the error page, which can be a local file path or a URI. 403 indicates access denied error, 404 indicates that there is no error on the page, and 500, 502, 503, and 504 indicate server errors.

2. Create an error page

We need to create the corresponding error page file and save it in the specified path. Next, we take the 403 error page as an example, create a file named 403.html, and save it in the error directory under the nginx configuration directory.

$ sudo mkdir /usr/share/nginx/error
$ sudo touch /usr/share/nginx/error/403.html
$ sudo nano /usr/share/nginx/error/403.html

Copy after login

In 403.html, we can customize the error message and add some text, icons, links, etc. to remind users that a 403 error has occurred.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>403 Forbidden</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f6f6f6;
            margin: 0;
            padding: 50px;
            text-align: center;
        }
        h1 {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
        }
        p {
            font-size: 18px;
            color: #666;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>403 Forbidden</h1>
    <p>抱歉，您没有权限访问该页面。</p>
</body>
</html>

Copy after login

3. Restart Nginx

After completing the above configuration, we need to restart Nginx to make it take effect.

$ sudo systemctl restart nginx

Copy after login

4. Verify configuration

Enter a non-existent URL in the browser, such as http://example.com/123456, and you will see the customized 404 error page. In the same principle, when a user does not have permission to access a URL, our customized 403 error page will also be displayed.

Through Nginx error page configuration, we can beautify website fault prompts and improve user experience and website image. In addition to 403 and 404 error pages, we can also customize other types of error pages, such as 500, 502, 503, etc. Just follow the above steps, add the corresponding error_page directive in the Nginx configuration file, and create the corresponding error page file.

Summary:

Nginx provides flexible error page configuration functions, allowing us to customize the website failure prompt page. Through elegant error page design and prompt information, we can improve user experience and at the same time present a friendly and professional image to users. The above is an introduction and sample code for Nginx error page configuration. I hope it will be helpful to you in beautifying website fault prompts.

The above is the detailed content of Nginx error page configuration, beautify website failure prompts. For more information, please follow other related articles on the PHP Chinese website!