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

简介: 如何在 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 位置。

结论

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


目录
相关文章
|
9天前
|
应用服务中间件 Linux nginx
Jetson 环境安装(四):jetson nano配置ffmpeg和nginx(亲测)之编译错误汇总
这篇文章是关于在Jetson Nano上配置FFmpeg和Nginx时遇到的编译错误及其解决方案的汇总。
46 4
|
5天前
|
缓存 负载均衡 安全
Nginx常用基本配置总结:从入门到实战的全方位指南
Nginx常用基本配置总结:从入门到实战的全方位指南
108 0
|
9天前
|
网络协议 Ubuntu 网络安全
|
10天前
|
编解码 Ubuntu 应用服务中间件
Jetson 环境安装(三):jetson nano配置ffmpeg和nginx(亲测)
本文介绍了在NVIDIA Jetson Nano上配置FFmpeg和Nginx的步骤,包括安装、配置和自启动设置。
69 1
Jetson 环境安装(三):jetson nano配置ffmpeg和nginx(亲测)
|
3天前
|
前端开发 JavaScript 应用服务中间件
终极 Nginx 配置指南
本文介绍了Nginx的基本配置及其优化方法。首先,通过删除注释简化了Nginx的默认配置文件,使其更易于理解。接着,文章将Nginx配置文件分为全局块、events块和http块三部分进行详细解释。此外,还提供了如何快速上线网站、解决前端history模式404问题、配置反向代理、开启gzip压缩、设置维护页面、在同一IP上部署多个网站以及实现动静分离的具体配置示例。最后,附上了Nginx的基础命令,包括安装、启动、重启和关闭等操作。
|
8天前
|
负载均衡 应用服务中间件 nginx
Nginx的6大负载均衡策略及权重轮询手写配置
【10月更文挑战第9天】 Nginx是一款高性能的HTTP服务器和反向代理服务器,它在处理大量并发请求时表现出色。Nginx的负载均衡功能可以将请求分发到多个服务器,提高网站的吞吐量和可靠性。以下是Nginx支持的6大负载均衡策略:
30 7
|
10天前
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
46 7
|
6天前
|
缓存 前端开发 JavaScript
一、nginx配置
一、nginx配置
51 1
|
9天前
|
Ubuntu Linux 编译器
Linux/Ubuntu下使用VS Code配置C/C++项目环境调用OpenCV
通过以上步骤,您已经成功在Ubuntu系统下的VS Code中配置了C/C++项目环境,并能够调用OpenCV库进行开发。请确保每一步都按照您的系统实际情况进行适当调整。
111 3
|
5天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
35 0