ホーム>プログラミング関連>その他のソースコード
ダウンロード
cf ワーカーステータスページ

Cloudflare ワーカー - ステータスページ

Web サイトを監視し、毎日の履歴を含むステータスを表示し、Web サイトのステータスが変化するたびに Slack 通知を受け取ります。 Cloudflare ワーカー、 CRON トリガー、 KV ストレージの使用。私のステータスページをチェックしてください！

ステータスページ

Slack 通知

前提条件

Cloudflare Workers アカウントが必要です。

  • ワーカーズドメインのセットアップ
  • The Workers バンドル サブスクリプション ($5/月)
    • Workers Free と連携します! Workers Free で実行する方法の詳細を確認してください。
  • 注目すべき Web サイト/API はありますか?

また、以下のシークレットを用意します

  • Edit Cloudflare Workers権限を持つ Cloudflare API トークン
  • Slack 受信 Webhook (オプション)
  • Discord 受信 Webhook (オプション)

はじめる

GitHub Actionsを使用してCloudflare Deploy Buttonでデプロイすることも、独自にデプロイすることもできます。

Cloudflareの「デプロイ」ボタンでデプロイする

  1. ボタンをクリックして指示に従うと、このリポジトリのクローンが作成されるはずです。

  2. 新しいGitHub リポジトリ > [設定] > [シークレット]に移動し、次のシークレットを追加します。 

    - 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 を編集して構成を調整し、監視するすべての Web サイト/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/* (ワーカーは静的ファイルも提供するため、必ず/*を含めてください)

  8. (オプション) wrangler.toml を編集して、ワーカー設定または CRON トリガー スケジュールを調整します (特にワーカー フリー プランを使用している場合)

電報通知

電報通知を有効にするには、いくつかの追加手順を実行する必要があります。

  1. 新しいボットを作成する
  2. ボットの作成時に受け取った API トークンを、github リポジトリのSECRET_TELEGRAM_API_TOKENシークレットのコンテンツとして設定します。
  3. アラートを受信するテレグラム アカウントからボットにメッセージを送信します ( /start以外のもの)
  4. curl https://api.telegram.org/bot/getUpdates | jq '.result[0] .message .chat .id'
  5. 取得したチャット ID をSECRET_TELEGRAM_CHAT_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 * * * *"] ) に変更します。

既知の問題

  • Cloudflare Worker が作成できるサブリクエストの制限 (50) により、 Slack 通知を使用している場合に監視できるモニターは最大 25 です。

    計画では、スケジュールされた実行ごとに Slack 通知を 1 つだけ送信することで、最大 49 をサポートする予定です。

  • KV レプリケーションの遅延- Slack 通知は即座に届く可能性がありますが、Cron トリガーは通常、十分に活用されていない静かな時間帯のマシンで実行されているため、ステータス ページに変更が表示されるまでさらに数秒かかる場合があります。

  • 初期遅延 (データなし) - 初めて CRON トリガーをスケジュールして実行するのに数分かかります。

今後の予定

WIP - デュラブル オブジェクトのサポート - ワーカー プラットフォーム向けの低レイテンシー調整と一貫したストレージを実現する Cloudflare の製品。動作するプロトタイプはありますが、少なくともオープンベータ版を待っています。

このプロジェクトにはマネージド バージョンもあり、現在ベータ版です。 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:8080の代わりにlocalhost:8787を使用してみてください。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて