Cloudflare Job Openings History を使って Cloudflare 求人情報の履歴を確認する

# 目的
こちらのレポジトリコードを使って、以下のような Cloudflare 求人情報の履歴を確認するサイトを作ります。

- [zmxv/cf-workers-joh: Cloudflare Workers sample project that keeps track of Cloudflare's job opening changes](https://github.com/zmxv/cf-workers-joh)

この方のデモサイトは、アクセスできない状態になっていましたので、こちらに公開しました

- https://cloudflare-job-opening-history.khayama.workers.dev/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/ab5ce3e2-b7f5-f74b-4573-f311d73d99a4.png)

# セットアップ

## クローン
コードを GitHub からクローンします。

```shell:
git clone https://github.com/zmxv/cf-workers-joh.git && cd $(basename $_ .git)
```

## Workers KV 作成
本番用とプレビュー用の Workers KV を準備します。

```shell:
wrangler kv:namespace create job_opening_history_kv
wrangler kv:namespace create job_opening_history_kv --preview
```

作成後に確認できる `id` を次の設定に使います。

```shell:
🌀 Creating namespace with title "cloudflare-job-opening-history-job_opening_history_kv"
✨ Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "job_opening_history_kv", id = "YOUR_WORKERS_KV_ID" }
...
🌀 Creating namespace with title "cloudflare-job-opening-history-job_opening_history_kv_preview"
✨ Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "job_opening_history_kv", preview_id = "YOUR_WORKERS_KV_PREVIEW_ID" }
```

## `wrangler.toml` 作成
必要な情報を `wrangler.toml` に設定します。

`crons = ["59 * * * *"]` は、毎時59分に実行されるスクレイピングジョブの実行間隔のため、任意に調整します。


```shell:
export ACCOUNT_ID='YOUR_ACCOUNT_ID'
export KV_ID='YOUR_WORKERS_KV_ID'
export KV_PREVIEW_ID='YOUR_WORKERS_KV_PREVIEW_ID'

cat << EOS > wrangler.toml
name = "cloudflare-job-opening-history"
compatibility_date = "2021-08-22"

account_id = "$ACCOUNT_ID"

kv_namespaces = [
	 { binding = "job_opening_history_kv", id = "$KV_ID", preview_id = "$KV_PREVIEW_ID" }
]

[triggers]
crons = ["59 * * * *"]
EOS
```

## スクリプト内文字列置換
Workers KV の処理にあたる部分の名前を今回作成した Workers KV の名前に合わせて一部修正します。

- [Macのコマンドラインで文字列を一気に置換する](https://zenn.dev/konboi/articles/4bdb208bfaed09)

```shell:
find ./*.js -type f | xargs sed -i '' 's/KV\./job_opening_history_kv\./g'
```

## 初期差分を無視しない設定に変更
初期差分を無視せずにわかりやすい表示を得るため、

`scraper.js` の 30 行目 `ignore first diff` の行を以下のように修正します。

```javascript:scraper.js
- state.history = state.history ? state.history.concat(diff) : [] // ignore first diff
---
+ state.history = state.history ? state.history.concat(diff) : JSON.parse(JSON.stringify(diffJobBoards(before, after, now)))
```

# テスト実行
以下のコマンドでテスト実行できます。

```shell:
wrangler dev index.js --test-scheduled
```

また、 Workers KV の状態を以下のコマンドで確認できます。

```shell:
wrangler kv:key list -c wrangler.toml  --namespace-id $KV_PREVIEW_ID
```

```shell:Workers KV 初期状態
[]
```

`cron` をテスト実行し、スクレイピングジョブを実行させます。

```shell:
curl "http://localhost:8787/__scheduled?cron=*+*+*+*+*"   
```

```shell:Workers KV cron 実行後状態
[
  {
    "name": "cloudflare:2023-06-19T02:09:48.876Z"
  },
  {
    "name": "cloudflare:~"
  }
]
```

すると、想定通り以下のようなページが確認できます。

```shell:
open http://localhost:8787/
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/043326f5-b468-5334-87eb-696f06e77c2c.png)

プレビュー用の Workers KV を初期状態に戻したい場合は、以下のようなコマンドで中身を削除できます。

```shell:
wrangler kv:key delete "cloudflare:~" --namespace-id $KV_PREVIEW_ID 
```

# Workers デプロイ

```shell:
wrangler publish index.js
```

# デプロイ後

```shell:
open https://cloudflare-job-opening-history.YOUR_SUBDOMAIN.workers.dev
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/ab5ce3e2-b7f5-f74b-4573-f311d73d99a4.png)

`crons = ["* * * * *"]` で毎分実行にしておくと、以下のように Past Cron Events から直近のスクレイピングジョブ実行を確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/5cd3bf7d-f08f-2a64-85b0-ce817b030d8d.png)


# まとめ
Cloudflare の求人に興味がある人は、Cloudflare Job Openings History を使って、自身で Cloudflare 求人情報の履歴を確認することができます。

求人が追加・削除される様子が確認できるので、便利です。

Cron Trigger や Workes KV の使い方についても、参考になりました。

# 参考

- [Cloudflare Workers から Slack にメッセージする - Qiita](https://qiita.com/khayama/items/45b50c3c458f36118c6c)