为nginx配置好看的错误提示页面

已于 2024-05-27 17:31:00 修改
阅读量4.3k 收藏 10
点赞数 9
分类专栏： nginx 文章标签： nginx 运维 服务器
于 2023-02-01 22:00:00 首次发布
wang hai xin
本文链接：https://blog.csdn.net/qq_44850489/article/details/128729324
版权

前言

nginx默认错误页面确实有些丑哈，leeader让我换一个样式 ，我就来喽！

为nginx配置好看的错误提示页面

1 找异常页

原始页

在这里插入图片描述
在这里插入图片描述
nginx默认错误页面确实有些丑哈，leeader让我换一个样式 ，我就来喽！

我演示的html源文件放在文章末尾

ant.design 网站有几个设计的例子。也挺好可以借鉴。

https://ant.design/docs/spec/research-exception-cn

我在gitee上找的可以直接拿来用的好几套模板
https://gitee.com/heibaike1/error-page

请添加图片描述

2 win上替换

找到nginx安装路径
如果是默认 就在html目录下替换原来的错误页面，
名字要和替换的页面保持一致哦。
在这里插入图片描述

如果想要自定义html文件路径，就在配置文件nginx.conf文件中修改。

在这里插入图片描述

3 再linux服务器上替换

其实再linux上替换基本和windows上替换差不多
我之所以单独拉出来，是因为我再配置的时候遇到了很多问题。

通过find命令查找到nginx.conf配置文件的位置

find -name nginx.conf
在这里插入图片描述
到文件所在目录 vim 编辑

vim nginx.conf

在配置文件的service大括号内，配置如下信息

              error_page  404 500 502 503 504 /50x.html;
              location =/50x.html {
              root   /etc/nginx/html;
}

在这里插入图片描述

error_page :是当返回指定的状态码之后，返回到页面。我这里配置了404，主要是为了便于测试配置是否成功。
root ： 是配置要显示的页面的位置，这里配置上绝对路径，我配置了一下相对路径没有生效。

保存退出 检查是否有语法问题

nginx -t

没有问题 则重启nginx

nginx -s reload

4 不生效解决办法

如果遇到配置之后没有生效，可能是nginx配置文件中没有开启

同样是在nginx.conf 文件中配置

proxy_intercept_errors on;

在这里插入图片描述

保存退出 检查是否有语法问题

nginx -t

没有问题 则重启nginx

nginx -s reload

配置这个的原因是，nginx认为你的项目会对错误页面返回相应的错误提示页，因此这里不会返回特定的错误页面，上面命令就是开启nginx的错误配置页面。

一般来所，项目里返回特定的错误提示页是比较好的，因为一般情况下 nginx可能转发多个不同的项目，可能会有差异。如果区别不大，或者没有要求，可以使用这个方式利用nginx统一返回。

样式显示不正确

我的html页面和css，js页面是分离的。在本地是可以正常访问的，但是配置到服务器之后，可能是因为html中是相对路径引入css和js的问题，导致找不到css和js。所以下面的源码中，我干脆把css和js都放到了html中。

我到这里就配置完成了，如果你遇到了别的问题可以评论留言哦。

6 错误页源码

效果图
请添加图片描述

html源文件

<!DOCTYPE html>
<html>

<head>
  <title data-react-helmet="true">HTTP 404 - SegmentFault</title>
  <meta charset="utf-8">
  <!-- <meta http-equiv="refresh" content="20;url='https://github.com/cloudResource/error-page'"> -->
  <link rel="stylesheet" href="./main.css">
  <style>

body,
html {
    padding: 0;
    margin: 0;
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    overflow: hidden;
}

.writing {
    width: 320px;
    height: 200px;
    background-color: #3f3f3f;
    border: 1px solid #bbbbbb;
    border-radius: 6px 6px 4px 4px;
    position: relative;
}

.writing .topbar{
    position: absolute;
    width: 100%;
    height: 12px;
    background-color: #f1f1f1;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.writing .topbar div{
    height: 6px;
    width: 6px;
    border-radius: 50%;
    margin: 3px;
    float: left;
}

.writing .topbar div.green{
    background-color: #60d060;
}
.writing .topbar div.red{
    background-color: red;
}
.writing .topbar div.yellow{
    background-color: #e6c015;
}

.writing .code {
    padding: 15px;
}

.writing .code ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.writing .code ul li {
    background-color: #9e9e9e;
    width: 0;
    height: 7px;
    border-radius: 6px;
    margin: 10px 0;
}

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100vh;
    width: 100%;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
}

.stack-container {
    position: relative;
    width: 420px;
    height: 210px;
    -webkit-transition: width 1s, height 1s;
    transition: width 1s, height 1s;
}

.pokeup {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.pokeup:hover {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    -webkit-transition: .3s ease;
    transition: .3s ease;
}


.error {
    width: 400px;
    padding: 40px;
    text-align: center;
}

.error h1 {
    font-size: 125px;
    padding: 0;
    margin: 0;
    font-weight: 700;
}

.error h2 {
    margin: -30px 0 0 0;
    padding: 0px;
    font-size: 47px;
    letter-spacing: 12px;
}

.perspec {
    -webkit-perspective: 1000px;
            perspective: 1000px;
}

.writeLine{
    -webkit-animation: writeLine .4s linear forwards;
            animation: writeLine .4s linear forwards;
}

.explode{
    -webkit-animation: explode .5s ease-in-out forwards;
            animation: explode .5s ease-in-out forwards;
}

.card {
    -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
            animation: tiltcard .5s ease-in-out 1s forwards;
    position: absolute;
}

@-webkit-keyframes tiltcard {
    0% {
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateY(-30deg);
                transform: rotateY(-30deg);
    }
}

@keyframes tiltcard {
    0% {
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateY(-30deg);
                transform: rotateY(-30deg);
    }
}

@-webkit-keyframes explode {
    0% {
        -webkit-transform: translate(0, 0) scale(1);
                transform: translate(0, 0) scale(1);
    }

    100% {
        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
    }
}

@keyframes explode {
    0% {
        -webkit-transform: translate(0, 0) scale(1);
                transform: translate(0, 0) scale(1);
    }

    100% {
        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
    }
}

@-webkit-keyframes writeLine {
    0% {
        width:0;
    }

    100% {
        width: var(--linelength);
    }
}

@keyframes writeLine {
    0% {
        width:0;
    }

    100% {
        width: var(--linelength);
    }
}

@media screen and (max-width: 1000px) {
    .container {
      -webkit-transform: scale(.85);
              transform: scale(.85);
    }
  }

  @media screen and (max-width: 850px) {
    .container {
      -webkit-transform: scale(.75);
              transform: scale(.75);
    }
  }

  @media screen and (max-width: 775px) {
    .container {
      -ms-flex-wrap: wrap-reverse;
          flex-wrap: wrap-reverse;
      -webkit-box-align: inherit;
          -ms-flex-align: inherit;
              align-items: inherit;
    }
  }

  @media screen and (max-width: 370px) {
    .container {
        -webkit-transform: scale(.6);
                transform: scale(.6);
      }
  }
  </style>
</head>

<body>
    <div class="container">
        <div class="error">
            <h2>服务器开小差了，请稍后再试</h2>
            <p>Ruh-roh, something just isn't right... Time to paw through your logs and get down and dirty in your
                stack-trace;)</p>
        </div>
        <div class="stack-container">
            <div class="card-container">
                <div class="perspec" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
                    <div class="card">
                        <div class="writing">
                            <div class="topbar">
                                <div class="red"></div>
                                <div class="yellow"></div>
                                <div class="green"></div>
                            </div>
                            <div class="code">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-container">
                <div class="perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
                    <div class="card">
                        <div class="writing">
                            <div class="topbar">
                                <div class="red"></div>
                                <div class="yellow"></div>
                                <div class="green"></div>
                            </div>
                            <div class="code">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-container">
                <div class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
                    <div class="card">
                        <div class="writing">
                            <div class="topbar">
                                <div class="red"></div>
                                <div class="yellow"></div>
                                <div class="green"></div>
                            </div>
                            <div class="code">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-container">
                <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
                    <div class="card">
                        <div class="writing">
                            <div class="topbar">
                                <div class="red"></div>
                                <div class="yellow"></div>
                                <div class="green"></div>
                            </div>
                            <div class="code">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-container">
                <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
                    <div class="card">
                        <div class="writing">
                            <div class="topbar">
                                <div class="red"></div>
                                <div class="yellow"></div>
                                <div class="green"></div>
                            </div>
                            <div class="code">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-container">
                <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
                    <div class="card">
                        <div class="writing">
                            <div class="topbar">
                                <div class="red"></div>
                                <div class="yellow"></div>
                                <div class="green"></div>
                            </div>
                            <div class="code">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<script >

const stackContainer = document.querySelector('.stack-container');
const cardNodes = document.querySelectorAll('.card-container');
const perspecNodes = document.querySelectorAll('.perspec');
const perspec = document.querySelector('.perspec');
const card = document.querySelector('.card');

let counter = stackContainer.children.length;

//function to generate random number
function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

//after tilt animation, fire the explode animation
card.addEventListener('animationend', function () {
    perspecNodes.forEach(function (elem, index) {
        elem.classList.add('explode');
    });
});

//after explode animation do a bunch of stuff
perspec.addEventListener('animationend', function (e) {
    if (e.animationName === 'explode') {
        cardNodes.forEach(function (elem, index) {

            //add hover animation class
            elem.classList.add('pokeup');

            //add event listner to throw card on click
            elem.addEventListener('click', function () {
                let updown = [800, -800]
                let randomY = updown[Math.floor(Math.random() * updown.length)];
                let randomX = Math.floor(Math.random() * 1000) - 1000;
                elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
                elem.style.transition = "transform 1s ease, opacity 2s";
                elem.style.opacity = "0";
                counter--;
                if (counter === 0) {
                    stackContainer.style.width = "0";
                    stackContainer.style.height = "0";
                }
            });

            //generate random number of lines of code between 4 and 10 and add to each card
            let numLines = randomIntFromInterval(5, 10);

            //loop through the lines and add them to the DOM
            for (let index = 0; index < numLines; index++) {
                let lineLength = randomIntFromInterval(25, 97);
                var node = document.createElement("li");
                node.classList.add('node-' + index);
                elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');

                //draw lines of code 1 by 1
                if (index == 0) {
                    elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
                } else {
                    elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
                        elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
                    });
                }
            }
        });
    }
});


</script>
</html>
黑白极客
关注
专栏目录
nginx缓存及错误页面配置
09-30
主要介绍了nginx缓存及错误页面配置的相关资料,需要的朋友可以参考下
Nginx设置404错误页面跳转
masteryee的博客
11-03 3万+
文章目录一、Nginx在Linux上设置404错误页面1.1 第一种配置情况（跳转网络地址）1.2 第二种配置情况（跳转本地地址）1.3 第三种情况（tomcat未启动时）1.4 第四种情况（proxy_intercept_errors的配置地址可多样）1.5 proxy_intercept_errors和fastcgi_intercept_errors的理解 一、Nginx在Linux上设置40...
60+ HTML 404错误页面模板大全
最新发布
weixin_32306683的博客
09-11 1056
本文还有配套的精品资源，点击获取 简介：HTML模板是构建用户友好型404错误页面的关键。本集合提供60多个设计各异的404界面模板，帮助设计师和开发者快速创建既美观又符合品牌形象的错误页面。精心设计的404页面不仅可以减少用户困惑，提供有效的导航和搜索功能，还能增强品牌传播和用户体验。模板包括从简洁文本到动态图形等多种样式。虽然部分模板需要自己编写代码实现，但大多数提供了...
NGINX下配置404错误页面的方法分享
09-30
NGINX下配置自定义的404页面是可行的，而且很简单，只需如下几步，需要的朋友可以参考下
nginx配置错误页
liwu_xa的博客
09-26 1990
1、写好准备用作错误页的HTML页面 2、将错误页面放到nginx的html路径：即nginx路径/html 3、nginx路径下的conf文件夹下的nginx.conf配置文件的http模块增加一行配置，用于表示打开当遇到错误时，允许打开错误页 proxy_intercept_errors on; 4、nginx.conf文件中指定域名所对应的server_name中增加错误页面配置 ...
nginx自定义错误页
兮动人
11-01 3542
文章目录自定义错误页1.为每种类型的错误设置单独的处理方式2.利用在线资源进行处理错误3.更改晌应状态码4.设置错误页面案例 自定义错误页 在网站访问过程中，经常会遇见各种各样的错误，如找不到访问的页面则会提示 404 Not Found 错误，没有访问权限会提示 403 Forbidden 等，对于普通人而言，这样的提示界面 并不友好。在 Nginx 的主配置文件中，给出了以下的处理方式。 error_page 500 502 503 504 /Sox.html; 在上述配置中， error_p
二、nginx错误页面[error_page]
黑日里不灭的light
11-19 4888
解释：其原理是响应到错误代码后，导向，然后再由处理，如下当错误代码是404时，相当于访问，正好被内部传送给让其来进行处理（需要注意必须有50x.html这个页面）
运维系列.Nginx：自定义错误页面
jclee95的个人博客
07-07 1328
本文介绍Nginx中如何自定义错误页面。
好看的通用自定义错误返回页面
04-27
4. 配置服务器：在服务器端设置错误处理机制，将默认的错误页面替换为自定义的错误页面。例如，在Apache或Nginx服务器中，可以通过修改配置文件实现这一功能。 5. 测试：确保在各种错误情况下，自定义错误页面都能...
PHP 网站修改默认访问文件的nginx配置
10-19
除了设置默认文件外，配置文件中还应该包含错误页面的指定，以便在资源不存在时给出友好的提示。例如，404错误页和50x系列错误页应该分别配置如下： ``` error_page 404 /404.html; location = /404.html { root /...
Nginx自定义错误页面配置
Lzcsfg的博客
06-20 1305
但是在一些情况下，因为我们传入了一个404图片，但是有可能客户端因为网络等问题加载不出来，那么我们可以将图片嵌入到 HTML 中，通常被称为使用 "base64 编码" 或 "数据 URI 方案" 将图像嵌入。50x.html上如果引用其他文件的png或css就会有问题，显示不出来，因为其他文件的访问也要做配置；将html页面代码中src="/123.png" 中的双引号里替换成使用base64生成的超长字符串即可。/usr/local/nginx/html/ 路径下必须有50x.html这个文件！
nginx error_page 使用
热门推荐
zzhongcy的专栏
01-09 3万+
Nginx
【Nginx07】Nginx学习：HTTP核心模块（四）错误页面与跳转
硬核项目经理
07-10 1433
Nginx学习：HTTP核心模块（四）错误页面与跳转最最核心的部分学习完了，但其实还有更多的内容要等待着我们探索。今天我们先来看到的就是关于错误页面的设置以及 301、302 跳转相关的内容。这两块内容都有一个特点，那就是页面或明显地，或不明显地产生了跳转变化，显示的都不是本来我们应该要得到的那个链接的页面。error_page这个指令应该是比较常见了吧，为指定错误定义显示的URI。error_p...
Nginx——自定义错误页面
吴声子夜歌的博客
06-11 3854
配置文件的结构 main events{...} http{ server{ location{...} } } 从上面的结构可以看出,Nginx的默认主配置文件主要由main、events、http、server和location5个块组成，关于各个块的作用，详见表4-1所示。并且对于嵌套块(如http、server、location)中的指令,执行的顺序为从外到内依次执行,内层块中的大部分指令会自动获取外层块指令的值作为默认值,只有某些特殊指令除外。 Nginx默认配置文件除去注释如下：
Nginx - 使用error_page实现带有图片的自定义错误页面
小工匠
01-02 4986
在Nginx中，您可以使用error_page指令来指定当请求遇到特定错误时应当显示的自定义错误页面。创建错误页面首先，需要创建一个HTML文件作为错误页面。在这个文件中，可以定义需要的图片、样式和任何其他内容。例如，如果您想要在404错误页面显示一张图片，可以创建一个名为404.html的文件，并在其中使用标签来引用图片。配置Nginx在Nginx配置文件中（通常是nginx.conf或一个包含特定站点配置的文件），您需要添加一个server块来定义错误处理。例如：server {
Nginx之error_page模块解读
一个菜鸡的博客
09-24 2489
其原理是响应到错误代码后，导向指定的路由，然后再由指定的路由处理，如下当错误代码是404时，相当于访问http://localhost:80/50x.html，正好被内部传送给 location = /50x.html让其来进行处理（需要注意必须有50x.html这个页面）当nginx发生内部错误时，比如说404、403、500等错误，默认会跳转到nginx自带的错误页面。其原理是响应到错误代码后，302（临时重定向到目标网址），如下当错误代码为404时，导向。，默认为 200，不加。
3招解决Nginx实现404页面的实现！
Free雅轩的博客
10-16 1万+
Nginx访问一个静态的html 页面，当这个页面没有的时候，Nginx抛出404，那么如何返回给客户端404呢？# 关键参数：这个变量开启后，我们才能自定义错误页面，当后端返回404，nginx拦截错误定义错误页面。看下面的配置，这种情况下不需要修改任何参数，就能实现这个功能。# 定义错误页面码，如果出现相应的错误页面码，转发到那里。如果后端是php解析的，需要加一个变量。# 承接上面的location。# 放错误页面的目录路径。在http段中加一个变量。
nginx 系统错误统一重定向到错误页面
伟哥
05-09 1875
server{ #监听8081端口 listen 8081; #对应的域名，把baofeidyz.com改成你们自己的域名就可以了 server_name localhost; 　　　　　　 proxy_intercept_errors on; error_page 404 /404.html; location = /404.html { # 404.html 所在.
零基础自学Nginx 进阶篇 2 Nginx静态资源部署 2.2 Nginx静态资源的配置指令 2.2.6 error_page指令
谢谢你们的关注
02-24 128
零基础自学Nginx 进阶篇 2 Nginx静态资源部署 2.2 Nginx静态资源的配置指令 2.2.6 error_page指令
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑白极客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值