Nginx配置带静态资源的50x维护页面

Posted 2022-03-01 pfzd17live

前几天开发找我要求给应用系统配置一个自定义的停机维护页面，开发原先按nginx示例中的error_page方式配置：

​       error_page  500 502 503 504  /maintenance.html;​

​       location =/maintenance.html ​

​           root   html;​

​       ​

虽然能运行，但无法显示图片和样式，体验不好。

页面（maintenance.html）和资源(maintenance_files目录)放在nginx的html目录下：

很显然，如果只有单独一个html页面这种配置方式是管用的，但html引用了css和gif资源，这些资源的请求会匹配到其他规则上。 这种情况网上的做法通常是增加.css，.gif这些后缀名的拦截规则，重定向到本地访问。

我这里考虑到文件少，修改内容方便，将html移到maintenance_files目录下（移动后注意修改html代码中css和图片的引用相对路径），将所有文件整合到一个目录里：

通过路径前缀匹配，可以一条规则就搞定：

​       error_page  500 502 503 504  /maintenance_files;​

​       location ^~ /maintenance_files ​

​           root   html;​

​           index  maintenance.html;​

​        ​

测试结果显示出完整页面内容！