如何自定义404页面?云服务器+Nginx中加3行配置搞定,小白也能跟着流畅操作

大家好,这里是程序员晚枫。

前面3期文章,我们一起搭建了一个个人网站:https://www.python-office.com

到这里我们的网站就可以访问了。但是为了追求完美,我们一起考虑一种情况:

用户在使用的过程中,会不会输错网址里的某几个字母呢?这时候用户第一反应不会是自己输入错误,而是:是不是网站崩溃了?

所以这种情况下,就需要我们来自己设计一个404网页,来给用户一个适当的报错页面,而不是直接报一个打不开的错误。

需要的设备和技术

详细步骤

效果展示

先展示一下效果

image.png

nginx配置

全部的nginx配置如下,重点时line64-line70这几行。

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    gzip  on;
    
     upstream vuepress{
        server 115.159.63.27:8080;
    }    

    server {
        listen       80;
        server_name  python4office.cn;

        location / {
            # root   /python4office.cn/public;
            # index  index.html index.htm;
            proxy_pass http://127.0.0.1:18001;
        }
        error_page  500 502 503 504 404          /404.html;
        # 承接上面的location
        location = /404.html {
            # 放错误页面的目录路径。
            root   /static-url/error-html;
        }
         
    }

    server {
		listen 443 ssl;
		server_name  python-office.com;
        #证书文件名称
        ssl_certificate python-office.com_bundle.crt; 
        #私钥文件名称
        ssl_certificate_key python-office.com.key; 
        ssl_session_timeout 5m;
        #请按照以下协议配置
        ssl_protocols TLSv1.2 TLSv1.3; 
        #请按照以下套件配置,配置加密套件,写法遵循 openssl 标准。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
        ssl_prefer_server_ciphers on;

		location / {
				# proxy_pass http://127.0.0.1:18001;
                root /python-office.com/dist;
                index index.html index.htm;
		}

        location /api/img-cdn {
        proxy_pass http://127.0.0.1:18005/api/img-cdn;
        # root /img-cdn/public;
        # index index.html index.htm;
        }

        # 开启error_page
        error_page  500 502 503 504 404          /404.html;
        # 承接上面的location
        location = /404.html {
            # 放错误页面的目录路径。
            root   /static-url/error-html;
        }
         }

}

我的404页面

我的404页面代码,也开放给大家:GitHub

写在后面

如果本期内容有疑问,欢迎大家在评论区和我交流哟~

下一期,我们写一写如何运用自己的域名+服务器+nginx搭建一个个人图床

本站文章资源均来源自网络,除非特别声明,否则均不代表站方观点,并仅供查阅,不作为任何参考依据!
如有侵权请及时跟我们联系,本站将及时删除!
如遇版权问题,请查看 本站版权声明
THE END
分享
二维码
海报
如何自定义404页面?云服务器+Nginx中加3行配置搞定,小白也能跟着流畅操作
前面3期文章,我们一起搭建了一个个人网站:https://www.python-office.com
<<上一篇
下一篇>>