無料でウェブページの変化を自動検知できる「changedetection.io」をDockerでセットアップして実際に監視してみた

無料でセルフホストできるウェブページ変更検知ツール「changedetection.io」をDockerで起動し、実際に監視対象を登録して変更前後の差分を表示してみました。

Website change detection, monitoring, alerts, notifications, restock alerts | changedetection.io
https://changedetection.io/

changedetection.ioは登録したウェブページを定期的に取得して以前の内容と比較し、変更が見つかった場合に差分を記録するツール。詳しくは前回の記事で解説しています。

無料でウェブサイトの変化を自動チェックし通知で教えてくれるセルフホスト可能な監視ツール「changedetection.io」はどんなツールなのかレビュー - GIGAZINE

changedetection.ioはDockerを使うと簡単にセルフホストできます。今回はWindowsにDocker DesktopとGit for WindowsのGit Bashを用意した環境で構築していきます。

Git Bashを開き、以下のコマンドを実行します。「-d」はコンテナをバックグラウンドで動かすための指定で、「--restart always」はコンテナが終了した場合やDockerの再起動後に自動でchangedetection.ioを起動する設定です。「-v datastore-volume:/datastore」はコンテナを削除して作り直してもデータを維持できるようDockerボリュームへ保存する指定です。

docker run -d --restart always -p "127.0.0.1:5000:5000" -v datastore-volume:/datastore --name changedetection.io dgtlmoon/changedetection.io

必要なDockerイメージが自動でダウンロードされ、changedetection.ioが起動します。

コンテナの起動後にブラウザで「http://localhost:5000」へアクセスすると、changedetection.ioの管理画面が表示されました。

まずは基本的な動作を確認するため、内容を書き換えられる動作確認用ページを用意し、ローカルウェブサーバーを立ち上げてchangedetection.ioからアクセスできるようにしました。商品販売ページをイメージして「販売状況：在庫なし」という文章を掲載してあります。

changedetection.ioの画面に戻り、入力欄に今回用意した動作確認用ページのアドレスである「http://host.docker.internal:8000/」を入力して「ウォッチ」をクリック。「host.docker.internal」はDockerコンテナからWindows側で動作するサービスへアクセスするための特別なDNS名です。

ところが、エラーが表示されてアクセスできませんでした。ウェブサーバーに指定したURLへアクセスさせて本来は外部から閲覧できない内部ネットワークの情報を取得するSSRF攻撃などの悪用を防ぐため、ローカル環境にアクセスできない仕組みになっている模様。

今回はテストで動かすだけなので、Dockerコンテナを一度終了して「docker rm -f changedetection.io」で削除し、「-e ALLOW_IANA_RESTRICTED_ADDRESSES=true」オプションを追加した以下のコマンドで再び起動します。

docker run -d --restart always -p "127.0.0.1:5000:5000" -v datastore-volume:/datastore -e ALLOW_IANA_RESTRICTED_ADDRESSES=true --name changedetection.io dgtlmoon/changedetection.io

再起動後、改めて「http://host.docker.internal:8000/」をウォッチしてみると今度はエラーが出ずに初回チェックが始まりました。

初回チェックが完了すると、以降はchangedetection.ioが一定間隔でページを自動チェックし、変更の有無を確認してくれます。「再チェック」ボタンを押せば手動で更新を確認させることも可能です。

何回か「再チェック」をクリックしてみました。再チェックするたびに前回チェックの時間が更新されますが、特にページを変更していないため「前回更新」は「未実施」のままです。

ここで、動作確認用ページの「販売状況：在庫なし」を「販売状況：在庫あり」に書き換えました。

再び「再チェック」をクリックすると、監視対象名が太字に変わり、「前回更新」が「just now(ちょうど今)」という表示になりました。「履歴」をクリックします。

履歴ページでは変更前と変更後の文章が比較表示されます。「販売状況：在庫なし」は削除された文章として赤系の色で示され、「販売状況：在庫あり」は追加された文章として緑系の色で表示されました。単に「ページが更新された」と記録するだけでなく、削除された文章と追加された文章を分けて確認できるのが便利です。

差分画面では比較単位を「単語」と「行」から選択できますが、空白で区切っているのか、今回の場合はどちらの設定でも表示に変化はありませんでした。また、「同じ/変更なし」「削除済み」「追加済み」「置換済み」のチェックを切り替えることで削除された内容や追加された内容だけに絞って表示することも可能です。

今回の設定ではページ全体の変更を検知しますが、更新日時やおすすめ記事、広告、フッターの表示など、追跡したい情報とは関係のない変化まで検知する場合があります。changedetection.ioではCSSセレクターやXPath、JSONPath、jqなどを使用して必要な部分だけを監視する設定も可能とのこと。次回は範囲を絞って監視する設定を試してみます。