jack blog
作者一覧
サイト移転のお知らせ
jack-webは下記のアドレスに移動しました
2023-12-15

M5StackとCloudflare Workersで親フラを防止する

nac-39nac-39

こんにちは!アドベントカレンダー15回目担当のなーこです!

突然ですが、実家に住んでいる皆さん、オンラインで喋っているときに部屋に親がふらっと入って来たことはありませんか?もしくは、部屋の外で親が大声で呼んでくるとか…私はこれでサークルの人たちに弟の名前がばれていきました…

ということで、親フラを防止するためのデバイスを作っていこうと思います!!

1. 準備

今回は、そのへんに落ちていたM5Stackを使います。常時ディスプレイを付けておくことを考えると内蔵バッテリーが30分ぐらいしか持たないのがネックなのですが、今回はそこには目をつぶります。

M5Stack

M5StackはESP32というマイコンが入っているデバイスで、最初からLCDディスプレイ、ボタンなどがついていてサクッと何かを作るときにはうってつけです。

また、エンドポイントとして最近流行りの?Cloudflare Workers、データの管理にCloudflare Workers KVを使います。

Cloudflare Workersは、Firebase FunctionやAWS Lambdaに似た、サーバーレスのアプリケーションをデプロイできるサービスです。自分でサーバーなどのインフラを整備する必要がなく、コードを書いてデプロイするだけでアプリケーションが使えるようになるので、今回のようにさっと簡単なサーバーを書いてデプロイしたいときにはうってつけのサービスです。

→Cloudflare Workers 公式サイト

Cloudflare KVは、Cloudflare Workersから使うことができる、キーバリューストアです。javascriptで言うところの連想配列、Pythonで言うところの辞書のようなキーバリュー形式のデータを保存しておくことが出来ます。

→Cloudflare Workers KV

2. Cloudflare Workers

まずは、Cloudflare Workersの環境を整備していきます。

環境構築はこちらの記事を参考にして行いました:

https://zenn.dev/moutend/articles/97c98a277f4bae

驚くほど簡単に環境が整います。既にNode.jsの環境が整っている人であれば、この記事を読み始めてから10分もすれば、最初のHello Worldを返すWorkerがデプロイできていることでしょう。

APIを使う環境が整ったところで、今回使うCloudflare Workers KVのセットアップも行っていきます。

https://numb86-tech.hatenablog.com/entry/2021/06/22/233701

こちらの記事を参考に、Cloudflare Workers KVのセットアップを行いました。秒でKVストアがデプロイできました。

これで、APIにCloudflare Workers KVを組み込む準備ができました。

それではコードを書いていきます。

今回は2つのエンドポイントを準備します

こちらの記事を参考にして、リクエストメソッド、エンドポイントごとに処理を分けます。

https://qiita.com/mobilebiz/items/8f8aa166bd42d9b0cff1

これでコードがかけました!

Cloudflareにデプロイしたコードはこちらになります!

https://github.com/nac-39/onair-kanban/blob/main/src/index.ts

3. M5Stack

続いて、M5Stackで先程作ったエンドポイントに定期的にリクエストを送るコードを書いていきます。

https://www.1ft-seabass.jp/memo/2022/05/14/m5stack-airtable-api-connect-using-httpclient/

こちらの記事を参考にして、HTTPClientを使ってCloudflare Workersのエンドポイントにアクセスしてみました。

/statusにアクセスして`in_mute`が返ってきた場合は青地にMUTE、`in_meeting`が返ってきた場合は赤地にON AIRが表示されるようにします!

M5Stackに書き込んだコードはこちらになります!!

https://github.com/nac-39/onair-kanban/blob/main/esp32/m5stack.ino

Cloudflare Workersの無料枠ではリクエストが100,000件 / 日、KVの読み書きも100,000件 / 日までなので、一秒に一回アクセスしても十分に無料枠で収まります。

4. いざ使ってみよう

部屋のドアに貼っつけます!M5Stackの裏面には磁石がついているのですが、磁力が貧弱すぎて支えられないのでガムテで貼っつけました!!

画面が真っ青・真っ赤になるので遠くからでもわかりやすいですね!

PCからPOST /update?status=in_meetingを叩くと…

ON AIRが表示された…!と思いきや、一、二回MUTE状態に戻ってしまいます🤔…KVストアのデータは既に書き換わっているはずなのにどうして結果が反映されたりされなかったりするのでしょうか…????

結論から言うと、これはCloudflare Workers KVは結果整合性のあるKey-Valueストアであるからだと考えられます。

Cloudflare Workers KVはCDNのエッジサーバー上に分散デプロイされます。つまり、全世界のクライアントに近い、たくさんのサーバーに分散してデプロイされるということです。

また、このページにはCloudflare Workers KVは「分散性が高く、結果整合性のあるKey-Valueストアです」と紹介されています。

結果整合性とは、「あるデータの変更が完了していない間も、他の人は古いデータを参照することができるが、最終的には一番最後に更新したデータになる」ということを指します。つまり、いつでも誰でもデータの読み取りができる利便性(=可用性)を上げるかわりに、必ず最新のデータが返ってくる(=強整合性)ことを保証しないというトレードオフで、可用性を高める方を取っているということです。

結果整合性の対義語は「強整合性」というようです。強整合性をもつデータベースは、誰かが書き込みを行っている間や、新しいデータを他の分散サーバーに反映させている間、データベースをロックして読み取りを禁止することになります。これではデータベースを読み取るときに確実に最新のデータを返すことは出来ますが、書き込みを行っている間の可用性を犠牲にしてしまいます。Cloudflare Workers KVはエッジサーバーにデプロイすることで爆速レスポンスを実現したいサービスなので、データの一貫性を保つ強整合性よりも、データの可用性を高める結果整合性のある仕組みを採用しているのでしょう。

ということで、Cloudflare Workers KVでは、データが更新されてからも爆速でレスポンスを返し続ける可用性を高めるかわりに、データの一貫性が一時的に犠牲になっているということがわかりました!

5. おわりに

Cloudflare Workersを使うことで、M5Stackから叩ける簡単なエンドポイントを爆速で立てることが出来ました!Cloudflare Workersは手元のパソコンにNodeの環境がなくてもウェブページ上でコードを書くこともできるので、今回のような用途にぴったりだと思います!

ぜひ皆さんも素敵なファンクションを立ててみてください!

おすすめ記事