Cloudflare Workers 生成网站维护页面并返回503状态码

1.原因

因个人原因，本站会在 2022/7/30 和 2022/7/31 日暂时下线维护，CF就会显示5xx Service Unavailable

Cloudflare 默认页面

这会引起很差的观感，让访问者以为这是由于服务器垃圾而产生的问题。另一方面，也会对搜索引擎的抓取产生影响。

所以最好的办法就是在维护之前，使用维护页面 Maintenance Page 代替。最好的白嫖方法就是 Cloudflare Workers，正好我网站也是通过 CF 代理的。有关将域名 dns 转移到 Cloudflare 的教程，请访问我之前写这一篇文章

为了不影响搜索引擎的抓取，最好将维护页面设置为返回503状态码。

503状态码的定义：

2.效果

最后生成的页面效果如图：

维护页面 Maintenance Page

同时通过 curl -4I 命令，返回 HTTP/2 503 Status code。

3.如何设置

3.1 设置维护页面

首先打开 Cloudflare 控制面板

Cloudflare Workers

定位到左边的Workers

如果还没有显示创建服务，就开通一下，选Free 计划

开通完成后，点击创建服务

Cloudflare 创建服务

服务名称可以自己取，比如我的就是 maintenance

启动器选择 HTTP 处理程序

然后点击 创建服务

此刻，你的 Workers 主页就会出现一个项目，点进去

点击 快速编辑

Cloudflare 快速编辑界面

把以下代码覆盖到左边框里去

async function handleRequest(request) {
  const init = {
    headers: {
      'content-type': 'text/html;charset=UTF-8',
      'accept-encoding': 'gzip',
    },
    status: 503,
  }
  const ip = request.headers.get("cf-connecting-ip")
  // trusted IP 1.2.3.4
  if (ip !== '1.2.3.4') {
    return new Response(someHTML, init)
  }
  else // allow trusted IP onto site
  {
    return fetch(request)
  }
}
addEventListener('fetch', event => {
  return event.respondWith(handleRequest(event.request))
})
const someHTML = `

<!doctype html>
<head>
    <meta charset="UTF-8">
    <title>网站维护</title>
    <link rel="stylesheet" type="text/css" href="https://fonts.lug.ustc.edu.cn/css2?family=Noto+Sans">
    <link rel="stylesheet" type="text/css" href="https://fonts.lug.ustc.edu.cn/css2?family=Comfortaa">
</head>

<style>
  body { 
        text-align: center; 
        padding: 100px; 
        background: url('https://assets.ohevan.com/wp-content/uploads/2022/04/wallhaven-72rd8e_2560x1440-1.webp') no-repeat center center fixed; 
        
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
      }

    .content {
        margin:auto;
        background-color: rgba(255, 255, 255, 0.6); 
        backdrop-filter: blur(36px) saturate(150%);
        background-size: 100%;      
        padding: 10px 50px 10px 50px;
        border-radius: 28px;  
        font-family: 'Comfortaa', 'Noto Sans', sans-serif;
        max-width: 520px;  
    }
  body { font: 20px Helvetica, sans-serif; color: #333; }
  article { display: block; text-align: left; width: 75%; margin: 0 auto; }
  a:hover { color: #333; text-decoration: none; }
</style>

<article> 
  <div class="background">
    <div class="content">
      <h2>We&rsquo;ll be right back 即将回归</h2>
        <p>We're very sorry for the inconvenience but we&rsquo;re performing maintenance.<br><strong>非常抱歉，网站因定期维护而无法访问</strong></p>
        <p>Estimated finishing time will be EST 7/31 8:00 AM<br><strong>网站预计于美东时间 EST 7/31 8:00 AM 结束维护</strong></p>
        <p>Please check back soon...<br><strong>请稍等两天</strong></p>
        <p><strong>你可以使用<span style="color: #000000;"> <strong><a style="color: #000000;" href="https://cachedview.com/">https://cachedview.com/</a> </strong></span>来访问本站已缓存页面</strong></p>
        <p>&mdash; <B>EvanLuo</B></p>
    </div>
  </div>
</article>
`;

点击 保存并部署，再点击 预览，就可以看到你的维护页面了

这一串代码中，以下部分是一个 html 页面，可以自定义

<!doctype html>
<head>
    <meta charset="UTF-8">
    <title>网站维护</title>
    <link rel="stylesheet" type="text/css" href="https://fonts.lug.ustc.edu.cn/css2?family=Noto+Sans">
    <link rel="stylesheet" type="text/css" href="https://fonts.lug.ustc.edu.cn/css2?family=Comfortaa">
</head>

<style>
  body { 
        text-align: center; 
        padding: 100px; 
        background: url('https://assets.ohevan.com/wp-content/uploads/2022/04/wallhaven-72rd8e_2560x1440-1.webp') no-repeat center center fixed; 
        
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
      }

   .content {
        margin:auto;
        background-color: rgba(255, 255, 255, 0.6); 
        backdrop-filter: blur(36px) saturate(150%);
        background-size: 100%;      
        padding: 10px 50px 10px 50px;
        border-radius: 28px;  
        font-family: 'Comfortaa', 'Noto Sans', sans-serif;
        max-width: 520px;  
    }
  body { font: 20px Helvetica, sans-serif; color: #333; }
  article { display: block; text-align: left; width: 75%; margin: 0 auto; }
  a:hover { color: #333; text-decoration: none; }
</style>

<article> 
  <div class="background">
    <div class="content">
      <h2>We&rsquo;ll be right back 即将回归</h2>
        <p>We're very sorry for the inconvenience but we&rsquo;re performing maintenance.<br><strong>非常抱歉，网站因定期维护而无法访问</strong></p>
        <p>Estimated finishing time will be EST 7/31 8:00 AM<br><strong>网站预计于美东时间 EST 7/31 8:00 AM 结束维护</strong></p>
        <p>Please check back soon...<br><strong>请稍等两天</strong></p>
        <p><strong>你可以使用<span style="color: #000000;"> <strong><a style="color: #000000;" href="https://cachedview.com/">https://cachedview.com/</a> </strong></span>来访问本站已缓存页面</strong></p>
        <p>&mdash; <B>EvanLuo</B></p>
    </div>
  </div>
</article>

3.2 开启/关闭维护模式

注意

你的域名必须被 Cloudflare 代理，就是说必须要有那个橙色云图标

现在，你的维护页面就弄好了

3.2.1 如何开启维护模式？

定位到 触发器
CLoudflare 触发器页面

点击 添加路由，会出现如下界面

添加路由界面

路由 就是你要生效的网址，在结尾用 /* 通配所有子url

区域 选你的网址

比如我要在 ohevan.com/* 生效这个维护页面，我就会写成

最后点击 添加路由，就开启了

3.2.2 如何关闭？

在路由这个地方点击要移除的网址旁边的三个点，删除路由即可

4.结尾

到此，你的维护页面就做好了。

觉得我写的不错的话欢迎留下评论，谢谢

EvanNotFound's Blog