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

# はじめに
GitHubの機能だけでWebサイトの死活監視ができる「[Upptime](https://github.com/upptime/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](https://github.com/upptime/upptime)に移動し、緑の「Use this template」をクリックします。

![](https://s.kuku.lu/image.php/11e5301a8)

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

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

![](https://s.kuku.lu/image.php/3h0fi3gdk)

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

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

![](https://s.kuku.lu/image.php/3f9mi4fh3)

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

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

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

![](https://s.kuku.lu/image.php/6n4de0e74)

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

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

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

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

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

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

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

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

```YAML:.upptimerc.yml
# Change these first
owner: yamagami2211 # Your GitHub username
repo: serverstatus # Your GitHub repository name
```

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

```YAML:.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の名前にします。

```YAML:.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が表示されないみたいですね。

## 設定おまけ編
### コミットするユーザーを変える

```YAML:.upptimerc.yml
commitMessages:
  commitAuthorName: "名前"
  commitAuthorEmail: "メールアドレス"
```

### 日本語化する
[ここ](https://github.com/yamagami2211/site-kanshi/blob/master/i18n.yml)に日本語にするi18nキーを置いておきますので、ご自由にお使いください。

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

のように追加すると日本語にできます。
readme.mdも日本語にできます。
機械翻訳片手に翻訳しているので、必要に応じて再翻訳してください。
[公式ドキュメント](https://upptime.js.org/docs/configuration/#internationalization)

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