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

介绍

Nginx 是一个高性能的 Web 服务器，能够以灵活和强大的方式提供内容。在设计网页时，通常有必要定制用户将看到的每一部分内容，包括当他们请求不可用内容时的错误页面。在本指南中，我们将演示如何在 Ubuntu 14.04 上配置 Nginx 使用自定义错误页面。

先决条件

要开始使用本指南，您需要一个具有 sudo 权限的非根用户。您可以通过按照我们的 Ubuntu 14.04 初始设置指南来设置此类型的用户。

您还需要在系统上安装 Nginx。学习如何设置可以按照本指南进行操作。

完成上述步骤后，继续进行本指南。

创建自定义错误页面

我们将为演示目的创建一些自定义错误页面，但您的自定义页面显然会有所不同。

我们将把我们的自定义错误页面放在 /usr/share/nginx/html 目录中，这是 Ubuntu 的 Nginx 设置其默认文档根目录的位置。我们将创建一个名为 custom_404.html 的 404 错误页面和一个名为 custom_50x.html 的通用 500 级错误页面。如果您只是在测试，可以使用以下行。否则，请在这些位置放入您自己的内容：

echo "<h1 style='color:red'>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，在发生正确的错误条件时应该使用这些页面。打开 /etc/nginx/sites-enabled 目录中的服务器块文件，您希望配置的文件。我们将使用名为 default 的默认服务器块文件，但如果您使用非默认文件，则应调整自己的服务器块：

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

现在，我们可以将 Nginx 指向我们的自定义错误页面。

将 404 错误直接定向到自定义 404 页面

使用 error_page 指令，以便当发生 404 错误（请求的文件未找到时）时，提供您创建的自定义页面。我们将为文件创建一个位置块，在该位置块中，我们可以确保根与我们的文件系统位置匹配，并且该文件只能通过内部 Nginx 重定向访问（不能直接由客户端请求）：

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;
        }
}

通常情况下，我们不必在新的位置块中设置 root，因为它与服务器块中的根匹配。但是，我们在这里明确说明，以便我们的错误页面即使在将常规网页内容和相关文档根移动到不同位置时也能提供服务。

将 500 级错误直接定向到自定义 50x 页面

接下来，我们可以添加指令，以确保当 Nginx 遇到 500 级错误（与服务器相关的问题）时，它将提供我们制作的另一个自定义页面。这将遵循上一节中使用的完全相同的公式。这次，我们设置多个 500 级错误都使用 custom_50x.html 页面：

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;
        }
}

最后，我们还添加了一个虚拟的 FastCGI 传递，以便我们可以测试我们的 500 级错误页面。由于后端不存在，这将无法正常工作。在这里请求页面将允许我们测试 500 级错误是否提供我们的自定义页面。

完成后保存并关闭文件。

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

通过以下命令测试你的配置文件语法：

sudo nginx -t

如果报告了任何错误，请在继续之前进行修复。当没有语法错误返回时，通过以下命令重新启动 Nginx：

sudo service nginx restart

现在，当你访问服务器的域名或 IP 地址并请求一个不存在的文件时，你应该会看到我们设置的 404 页面：

http://server_domain_or_IP/thiswillerror

!nginx custom 404

当你访问我们设置的 FastCGI pass 位置时，你将收到一个带有我们自定义的 500 级页面的 502 Bad Gateway 错误：

http://server_domain_or_IP/testing

!nginx custom 50x

现在，你可以返回并从 Nginx 配置中删除虚假的 FastCGI pass 位置。

结论

你现在应该为你的站点提供了自定义错误页面。这是个个性化用户体验的简单方法，即使他们遇到问题。对于这些页面的一个建议是包含指向可以获取帮助或更多信息的位置的链接。如果这样做，请确保即使发生相关错误，链接目的地也是可访问的。