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

介绍

Apache 是世界上最受欢迎的 Web 服务器,它支持良好,功能丰富,灵活。当设计您的 Web 页面时,通常有助于自定义您的用户看到的每个内容。

前提条件

要开始使用本指南,您需要一个具有sudo特权的非根用户。您可以通过遵循我们的 Ubuntu 14.04 初始设置指南来设置此类用户。

创建你的自定义错误页面

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

我们将将我们的自定义错误页放在/var/www/html目录中,在那里Ubuntu的Apache安装设置了其默认文档根。我们将创建一个名为custom_404.html的404错误页面和一个名为custom_50x.html的一般500级错误页面。如果您只是在测试,您可以使用以下行:

1echo "<h1 style='color:red'>Error 404: Not found :-(</h1>" | sudo tee /var/www/html/custom_404.html
2echo "<p>I have no idea where that file is, sorry. Are you sure you typed in the correct URL?</p>" | sudo tee -a /var/www/html/custom_404.html
3echo "<h1>Oops! Something went wrong...</h1>" | sudo tee /var/www/html/custom_50x.html
4echo "<p>We seem to be having some technical difficulties. Hang tight.</p>" | sudo tee -a /var/www/html/custom_50x.html

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

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

现在,我们只需要告诉Apache,当出现正确的错误条件时,它应该使用这些页面。在您想要配置的/etc/apache2/sites-enabled目录中打开虚拟主机文件。我们将使用名为000-default.conf的默认服务器封锁文件,但如果您正在使用非默认文件,您应该调整自己的服务器封锁:

1sudo nano /etc/apache2/sites-enabled/000-default.conf

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

直接错误到正确的自定义页面

我们可以使用ErrorDocument指令将每个类型的错误与相关的错误页面相关联。这可以在当前定义的虚拟主机中设置。基本上,我们只需要将每个错误的HTTP状态代码与我们想要服务的页面进行地图。

对于我们的例子,错误地图将看起来像这样:

 1[label /etc/apache2/sites-enabled/000-default.conf]
 2<VirtualHost *:80>
 3    ServerAdmin webmaster@localhost
 4    DocumentRoot /var/www/html
 5
 6    ErrorLog ${APACHE_LOG_DIR}/error.log
 7    CustomLog ${APACHE_LOG_DIR}/access.log combined
 8
 9    ErrorDocument 404 /custom_404.html
10    ErrorDocument 500 /custom_50x.html
11    ErrorDocument 502 /custom_50x.html
12    ErrorDocument 503 /custom_50x.html
13    ErrorDocument 504 /custom_50x.html
14</VirtualHost>

仅此更改就足以在出现指定的错误时为自定义错误页面提供服务。

然而,我们将添加一组额外的配置,以便我们的错误页面不能直接由客户端请求,这可以防止一些奇怪的情况,其中页面的文本引用错误,但HTTP状态是200(表示成功的请求)。

响应404 当错误页面被直接请求时

要实现这种行为,我们需要为每个自定义页面添加一个文件块。内部,我们可以测试是否设置了REDIRECT_STATUS环境变量。

 1[label /etc/apache2/sites-enabled/000-default.conf]
 2<VirtualHost *:80>
 3
 4    . . .
 5
 6    ErrorDocument 404 /custom_404.html
 7    ErrorDocument 500 /custom_50x.html
 8    ErrorDocument 502 /custom_50x.html
 9    ErrorDocument 503 /custom_50x.html
10    ErrorDocument 504 /custom_50x.html
11
12    <Files "custom_404.html">
13        <If "-z %{ENV:REDIRECT_STATUS}">
14            RedirectMatch 404 ^/custom_404.html$
15        </If>
16    </Files>
17
18    <Files "custom_50x.html">
19        <If "-z %{ENV:REDIRECT_STATUS}">
20            RedirectMatch 404 ^/custom_50x.html$
21        </If>
22    </Files>
23</VirtualHost>

当错误页面被客户端直接请求时,会出现404错误,因为没有设置正确的环境变量。

设置测试500级错误

我们可以轻松地生成404错误来测试我们的配置,通过请求不存在的内容。

在虚拟主机底部添加一个ProxyPass指令. 发送对/proxytest的请求到本地机器的端口 9000(没有服务):

 1[label /etc/apache2/sites-enabled/000-default.conf]
 2<VirtualHost *:80>
 3
 4    . . .
 5
 6    ErrorDocument 404 /custom_404.html
 7    ErrorDocument 500 /custom_50x.html
 8    ErrorDocument 502 /custom_50x.html
 9    ErrorDocument 503 /custom_50x.html
10    ErrorDocument 504 /custom_50x.html
11
12    <Files "custom_404.html">
13        <If "-z %{ENV:REDIRECT_STATUS}">
14            RedirectMatch 404 ^/custom_404.html$
15        </If>
16    </Files>
17
18    <Files "custom_50x.html">
19        <If "-z %{ENV:REDIRECT_STATUS}">
20            RedirectMatch 404 ^/custom_50x.html$
21        </If>
22    </Files>
23
24    ProxyPass /proxytest "http://localhost:9000"
25</VirtualHost>

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

现在,通过键入,启用mod_proxymod_proxy_http模块:

1sudo a2enmod proxy
2sudo a2enmod proxy_http

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

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

1sudo apache2ctl configtest

当您的文件不包含语法错误时,请通过键入重新启动 Apache:

1sudo service apache2 restart

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

1http://server_domain_or_IP/thiswillerror

apache custom 404

当您到我们为虚假代理传输设置的位置时,我们会在我们的自定义500级页面中收到503服务不可用错误:

1http://server_domain_or_IP/proxytest

apache custom 50x

您现在可以返回并从您的 Apache 配置中删除假的 proxy pass 行. 如果您不需要在其他地方使用,您可以禁用 proxy 模块:

1sudo a2dismod proxy
2sudo a2dismod proxy_http

重新启动服务器以执行这些更改:

1sudo service apache2 restart

结论

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

Published At
Categories with 技术
Tagged with
comments powered by Disqus