cf 工人狀態頁面

Cloudflare Worker - 狀態頁面

監控您的網站，展示狀態（包括每日歷史記錄），並在網站狀態變更時收到 Slack 通知。使用Cloudflare Workers 、 CRON 觸發器和KV 儲存。檢查我的狀態頁面！

先決條件

您需要一個 Cloudflare Workers 帳戶

• 設定了工人域
• The Workers 套裝訂閱（5 美元/月）
  • 它與 Workers Free 一起使用！查看有關如何在 Workers Free 上運行的更多資訊。
• 一些值得關注的網站/API？

另外，準備以下秘密

• 具有Edit Cloudflare Workers權限的 Cloudflare API 令牌
• Slack 傳入 Webhook（選用）
• Discord 傳入 Webhook（可選）

入門

您可以使用 GitHub Actions 透過Cloudflare Deploy Button進行部署，也可以自行部署。

使用 Cloudflare 部署按鈕進行部署

1. 單擊按鈕並按照說明進行操作，您最終應該得到此存儲庫的克隆

2. 導覽至新的GitHub 儲存庫 > 設定 > Secrets並新增以下機密：

   - Name : CF_API_TOKEN (should be added automatically)
   
   - Name : CF_ACCOUNT_ID (should be added automatically)
   
   - Name : SECRET_SLACK_WEBHOOK_URL (optional)
   - Value : your-slack-webhook-url
   
   - Name : SECRET_DISCORD_WEBHOOK_URL (optional)
   - Value : your-discord-webhook-url

3. 導航到儲存庫中的操作設定並啟用它們

4. 編輯 config.yaml 以調整配置並列出您想要監控的所有網站/API

    settings :
     title : ' Status Page '
     url : ' https://status-page.eidam.dev ' # used for Slack & Discord messages
     logo : logo-192x192.png # image in ./public/ folder
     daysInHistogram : 90 # number of days you want to display in histogram
     collectResponseTimes : false # experimental feature, enable only for <5 monitors or on paid plans
   
     # configurable texts across the status page
     allmonitorsOperational : ' All Systems Operational '
     notAllmonitorsOperational : ' Not All Systems Operational '
     monitorLabelOperational : ' Operational '
     monitorLabelNotOperational : ' Not Operational '
     monitorLabelNoData : ' No data '
     dayInHistogramNoData : ' No data '
     dayInHistogramOperational : ' All good '
     dayInHistogramNotOperational : ' Some checks failed '
   
   # list of monitors
   monitors :
     - id : workers-cloudflare-com # unique identifier
       name : workers.cloudflare.com
       description : ' You write code. They handle the rest. ' # default=empty
       url : ' https://workers.cloudflare.com/ ' # URL to fetch
       method : GET # default=GET
       expectStatus : 200 # operational status, default=200
       followRedirect : false # should fetch follow redirects, default=false
       linkable : false # should the titles be links to the service, default=true

5. 推送到main分支以觸發部署

6. ？

7. （可選）前往 Cloudflare Workers 設定並指派自訂網域/路由

   • 例如status-page.eidam.dev/* （確保包含/*因為 Worker 也提供靜態檔案）

8. （可選）編輯 wrangler.toml 以調整 Worker 設定或 CRON 觸發器計劃，特別是如果您使用 Workers Free 計劃

電報通知

要啟用電報通知，您需要執行一些額外的步驟。

1. 創建一個新機器人
2. 將建立機器人時收到的 api 令牌設定為 github 儲存庫中SECRET_TELEGRAM_API_TOKEN金鑰的內容。
3. 從應該接收警報的電報帳戶向機器人發送一條訊息（比/start更多的內容）
4. 使用curl https://api.telegram.org/bot/getUpdates | jq '.result[0] .message .chat .id'取得聊天ID curl https://api.telegram.org/bot/getUpdates | jq '.result[0] .message .chat .id'
5. 在SECRET_TELEGRAM_CHAT_ID秘密變數中設定檢索到的聊天 ID
6. 使用 github 操作重新部署狀態頁面

自行部署

您可以自行克隆儲存庫並使用 Wrangler CLI 來開發/部署，您需要處理的額外事項清單：

• 建立 KV 命名空間並將KV_STATUS_PAGE綁定加入 wrangler.toml
• 建立工人秘密（可選）
  • SECRET_SLACK_WEBHOOK_URL
  • SECRET_DISCORD_WEBHOOK_URL

工人 KV 免費層級

Workers Free 方案包含有限的 KV 使用，但配額僅足以進行 2 分鐘檢查

• 在 wrangler.toml 中將 CRON 觸發器變更為 2 分鐘間隔 ( crons = ["*/2 * * * *"] )

已知問題

• 如果您使用 Slack 通知，則最多可觀看 25 個監視器，因為 Cloudflare Worker 可以發出的子請求有限制 (50)。

  該計劃是透過每次計劃運行僅發送一個 Slack 通知來支援最多 49 個。

• KV 複製延遲- 您可能會立即收到 Slack 通知，但可能需要幾秒鐘才能在狀態頁面上看到更改，因為 Cron 觸發器通常在未充分利用的安靜時間計算機上運行。

• 初始延遲（無數據） - 第一次安排和運行 CRON 觸發器需要幾分鐘

未來計劃

WIP - 支援持久性物件 - Cloudflare 的產品，用於為 Workers 平台提供低延遲協調和一致儲存。有一個工作原型，但是，我們至少正在等待公開測試版。

該專案還有一​​個託管版本，目前處於測試階段。請隨時查看 https://statusflare.com (https://twitter.com/statusflare_com)。

本地運行項目

要求

• Linux 或 WSL
• 紗線 ( npm i -g yarn )
• 節點 14+

啟動並運行伺服器的步驟

安裝牧馬人

 npm i -g wrangler

使用 Wrangler 登入 Cloudflare

 wrangler login

在 cloudflare 中建立您的 KV 命名空間

 On the workers page navigate to KV, and create a namespace

更新你的 wrangler.toml 為

 kv-namespaces = [{binding="KV_STATUS_PAGE", id="", preview_id=""}]

注意：您可能需要將kv-namespaces變更為kv_namespaces

安裝包

 yarn install

創建CSS

 yarn run css

跑步

 yarn run dev

注意：如果樣式未通過，請嘗試使用localhost:8787而不是localhost:8080