Githubの機能だけでWebサイトの死活監視ができる「Upptime」

はじめに

GitHubの機能だけでWebサイトの死活監視ができる「Upptime」というものを紹介ついでに使い方を説明します。

Upptimeとは？

オープンソースで開発されている、稼働時間モニターとステータスページです。
GitHubのAction、Issues、Pagesを使うだけなので、無料で使うことが出来ます。

GitHubのActionは稼働時間モニターとして使用しています。

• 5分ごとにworkflowがWebサイトにアクセスして、Webサイトが稼働しているか確認します。
• 応答時間は6時間ごとに記録され、gitにコミットされます。
• 応答時間のグラフは毎日生成されます。

GitHubのissuesはインシデントレポートに使用されます。

• エンドポイントがダウンしている場合、issuesが立ち上がります。
• チームのメンバーがissuesに割り当てられます。
• インシデントレポートはissuesのコメントとして投稿されます。
• issuesはロックされているため、メンバー以外はコメントできません。
• サイトが復旧すると、問題は自動でクローズされます。
• 更新時はSlackに通知が送信されます。

GitHubPagesはステータスWebサイトに使用されます。

• シンプルで美しく、アクセスしやすいPWAが生成されます。
• SvelteとSapperで構築
• GitHubAPIを使用してこのリポジトリからデータを取得します

(機械翻訳片手に書いています。)

すべてがGitHubだけで完結しているので、別でサーバが必要だったりお金がかかったりはない(はず)です。

Upptimeを使う

準備編

GitHubのアカウントが必要ですので、アカウントを作成しメールアドレスの認証を完了させてください。

UpptimeのRepositoryに移動し、緑の「Use this template」をクリックします。

「Create a new repository form upptime」というページが出るので、「Repository name」を適当に入力し、下の「Include all branches」にチェックを入れて緑のボタンの「Create repository form template」をクリックします。

今回はPrivateにしますが、Publicにすることをおすすめします。

リポジトリが出来たら、GitHubのアカウント設定に移動します。
アカウント設定(Settings)->開発者設定(Developer settings)->パーソナルアクセストークン(Personal access tokens)を開きます。

右上の「Generate new token」をクリックします。

「Note」は適当に入力し、Select scopesは全てにチェックを入れます。
本来は repoとworkflowだけのはずですが、なぜがエラーが出てビルド出来ないので、特権を与えます。
もしかしたら設定とかが悪いのかもしれませんが、これで動くので今回はこれで行きます。

Noteに適当に入力して全てにチェックを入れたら、「Generate token」をクリックします。

トークンが発行されるのでコピーします。

(画像の場合「9a995d0～～」です。)

先程作ったリポジトリの設定を開きます。
一番下のSecretsを開きます。

Action secretsが出るので、「New repository secret」をクリックします。

Nameに 「GH_PAT」、Valueに先程コピーしたトークンを貼り付けます。

ブランチをgh-pagesに切り替えて、CNAMEを削除します。

これで準備編は完了です。

設定編

.upptimerc.ymlを設定していきます。

ownerを自分のgithubユーザー名にし、repoをこのrepositoryの名前にします。

.upptimerc.yml

# Change these first
owner: yamagami2211 # Your GitHub username
repo: serverstatus # Your GitHub repository name

サイトを追加します。
すでにあるGoogleやWikipediaを参考に編集すると楽です。
$SECRET_SITEは準備編で追加したトークンと同じ感じだと思います。
そこら辺は公式のドキュメントを確認してください。

.upptimerc.yml

# Add your sites here
sites:
  - name: Google
    url: https://www.google.com
  - name: Wikipedia
    url: https://en.wikipedia.org
  - name: Hacker News
    url: https://news.ycombinator.com
  - name: Broken Site
    url: https://thissitedoesnotexist.com
  - name: Test for HEAD
    method: HEAD
    url: https://www.google.com
  - name: Secret Site
    url: $SECRET_SITE

GitHubのpagesの設定をします。
status-websiteの部分のcnameをコメントアウトします。
独自ドメインで使う場合は、そのドメインに設定してGithubで使えるようにレコードを設定してください。
baseUrlをこのrepositoryの名前にします。

.upptimerc.yml

status-website:
  # Add your custom domain below, or remove the next line if you don't have a domain
  #cname: demo.upptime.js.org
  # Uncomment the following line if you don't have a custom domain and add your repo name
  baseUrl: /serverstatus
  logoUrl: https://raw.githubusercontent.com/upptime/upptime.js.org/master/static/img/icon.svg
  name: Upptime
  introTitle: "**Upptime** is the open-source uptime monitor and status page, powered entirely by GitHub."
  introMessage: This is a sample status page which uses **real-time** data from our [GitHub repository](https://github.com/upptime/upptime). No server required — just GitHub Actions, Issues, and Pages. [**Get your own for free**](https://github.com/upptime/upptime)
  navbar:
    - title: Status
      href: /
    - title: GitHub
      href: https://github.com/$OWNER/$REPO

.upptimerc.ymlをコミットすると、Actionでビルドが行われます。

これで設定は完了です。

ビルドが走る

設定が正しく出来ていると、Actionsでビルドが走ります。
このビルドでは、masterブランチのreadme.mdやgh-pagesのページ、死活監視やグラフなどが行われます。

PrivateリポジトリではPageが表示されないみたいですね。

設定おまけ編

コミットするユーザーを変える

.upptimerc.yml

commitMessages:
  commitAuthorName: "名前"
  commitAuthorEmail: "メールアドレス"

日本語化する

ここに日本語にするi18nキーを置いておきますので、ご自由にお使いください。

.upptimerc.yml

i18n:
  activeIncidents: "有効なインシデント"
  incidentReport: "インシデントレポート #$NUMBER→"
  activeIncidentSummary: "$DATE にオープン 投稿数 $POSTS"
#...

のように追加すると日本語にできます。
readme.mdも日本語にできます。
機械翻訳片手に翻訳しているので、必要に応じて再翻訳してください。
公式ドキュメント

試しに作ったのがこちらです

https://github.com/yamagami2211/site-kanshi
https://status.yama2211.jp/
解説用で作ったものではありませんが、作ったものを置いてきます。