介绍

Nginx 是一个高性能的 Web 服务器,能够提供灵活和强大的内容。在设计您的 Web 页面时,通常有助于定制您的用户将看到的每个内容。这包括当他们请求内容时的错误页面。

前提条件

要开始使用这个指南,你将需要:

您可以通过遵循此类用户的初始服务器安装指南 Ubuntu 22.04来设置一个非根用户。 * Nginx 已安装在您的系统上,遵循此指南的 ** 步骤 1 和 2 在如何在 Ubuntu 22.04 上安装 Nginx。

完成上述步骤后,继续使用此指南。

创建你的自定义错误页面

本教程中的自定义错误页面用于演示目的,但您自定义错误页面的精确内容可能不同于您的喜好。

将您的自定义错误页放在/usr/share/nginx/html目录中,在那里 Nginx 设置了默认文件根。您将创建一个名为custom_404.html的 404 错误页面和一个名为custom_50x.html的 500 级一般错误页面。如果您只是在测试,您可以使用以下行。否则,在这些地方放置自己的自定义错误内容。

首先,使用nano或您偏好的文本编辑器创建您自定义的 404 页面的 HTML 文件:

1sudo nano /usr/share/nginx/html/custom_404.html

将您的自定义错误插入您创建的文件:

1<h1 style='color:red'>Error 404: Not found :-(</h1>
2<p>I have no idea where that file is, sorry. Are you sure you typed in the correct URL?</p>

如果您正在使用nano,请按CTRL+O来保存,然后按CTRL+X来退出。

接下来,为您的自定义一般500级错误页创建HTML文件:

1sudo nano /usr/share/nginx/html/custom_50x.html

将您的自定义错误插入您创建的文件:

1<h1>Oops! Something went wrong...</h1>
2<p>We seem to be having some technical difficulties. Hang tight.</p>

保存和退出文件,一旦您插入了自定义错误内容。

现在你有两个自定义错误页面,当客户端请求导致不同的错误时,你可以服务。

配置 Nginx 以使用您的错误页面

现在,你需要告诉 Nginx 每当出现相应的错误条件时,它应该使用这些页面。在您想要配置的 /etc/nginx/sites-enabled 目录中打开服务器封锁文件。

1sudo nano /etc/nginx/sites-enabled/default

接下来,您可以将 Nginx 指向您的自定义错误页面。

将 404 错误导向自定义 404 页面

使用「error_page」指令,以便在出现404错误时(当未找到所请求的文件时),为您创建的自定义页面提供服务。为该文件创建一个位置块,在那里您可以确保根匹配您的文件系统位置,并且该文件只能通过内部的Nginx重定向访问(客户端无法直接请求):

 1[label /etc/nginx/sites-enabled/default]
 2server {
 3    listen 80 default_server;
 4
 5    . . .
 6
 7    error_page 404 /custom_404.html;
 8    location = /custom_404.html {
 9        root /usr/share/nginx/html;
10        internal;
11    }
12}

通常,您不必在新位置块中设置根,因为它匹配服务器块中的根,但是,您在这里是明确的,以便您的错误页面被服务,即使您将正常的网页内容和相关的文档根移动到不同的位置。

将 500 级错误导向自定义 50x 页面

接下来,添加指南,以确保当 Nginx 遇到 500 级错误(服务器相关问题)时,它将为您创建的其他自定义页面提供服务。

在底部,您还会添加一个愚蠢的FastCGI通道,以便您可以测试您的500级错误页面。这是一个愚蠢的,因为它预计会引发错误,因为后端实际上不存在。

编辑你的文件如下:

 1[label /etc/nginx/sites-enabled/default]
 2server {
 3    listen 80 default_server;
 4
 5    . . .
 6
 7    error_page 404 /custom_404.html;
 8    location = /custom_404.html {
 9        root /usr/share/nginx/html;
10        internal;
11    }
12
13    error_page 500 502 503 504 /custom_50x.html;
14    location = /custom_50x.html {
15        root /usr/share/nginx/html;
16        internal;
17    }
18
19    location /testing {
20        fastcgi_pass unix:/does/not/exist;
21    }
22}

保存并关闭文件,当你完成。

重新启动 Nginx 并测试您的页面

通过键入测试您的配置文件的语法:

1sudo nginx -t

如果报告了任何错误,请在继续之前修复它们。当没有返回语法错误时,请通过键入重新启动 Nginx:

1sudo systemctl restart nginx

现在,当您访问服务器的域或IP地址并请求一个不存在的文件时,您应该看到您设置的404页面:

1http://server_domain_or_IP/thiswillerror

nginx custom 404

当您访问您为 FastCGI 通道设置的位置时,您将收到与自定义 500 级页面的 502 Bad Gateway 错误:

1http://server_domain_or_IP/testing

nginx custom 50x

您现在可以回去并从您的 Nginx 配置中删除假的 FastCGI 通道位置。

结论

您现在应该为您的网站提供自定义错误页面,这是一个简单的方式来个性化用户的体验,即使他们遇到问题。这些页面的一个建议是包括链接到他们可以寻求帮助或更多信息的地方。

如何在 Ubuntu 22.04 上配置 Nginx 以使用自定义错误页面

介绍