Slide 1

Slide 1 text

あの頃数百自治体のコロナワクチン 予約フォームを救ったWaiting Room の運用 たけだ 2023/4/25 Cloudflare Meetup Tokyo Kick Off! # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 2

Slide 2 text

武田可帆里 @taketakekaho 青森県八戸市出身 株式会社トラストバンク所属 趣味:ゴルフ、ワーケーション、スキューバダイビング Cloudflare利用歴4年(まだビギナー) 好きなCloudflare機能:Waiting Room たけだの 自己紹介 # CloudflareUG_cts <経歴> SIer 金融事業本部 銀行システム開発インフラ ↓ チェンジ NewITコンサル事業部 エンジニアっぽい人 ↓ トラストバンク パブリテック事業部 自治体向けSaaS PdM 兼 なんでも屋

Slide 3

Slide 3 text

デジタル化総合プラットフォーム 自治体職員が電子申請や申込予約、アンケートなどのフォームを作成・集計し、 一元管理できる自治体専用のデジタル化総合プラットフォーム # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 4

Slide 4 text

利用ユーザー オリジンサーバ (日本産クラウドサーバ) 悪意のあるボット 不正アクセス・ サイバー攻撃 2020 年リリース当初からhttps 化とセキュリティ対策目的でCloudflare を導入 # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 5

Slide 5 text

コロナワクチン予約 急に決まったワクチン接種運用。 スピード重視のため自治体ごとの運用 に委ねられて日本中の1,788 自治体がワ クチン予約受付運用の検討を余儀なく される LoGo フォーム使えますか?の相談が殺 到。。 予約開始時点のアクセス集中に耐えら れるかが予測しにくい状況。 # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 6

Slide 6 text

お?!!! https://classmethod.jp/news/20210310-digital-wating-room/ # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 7

Slide 7 text

Waiting Room とは? アクセスが集中するWeb サイトについて、既存のサーバー構成を変更することな く、アクセス待機の順番管理を可能にするサービス。 アクセスが集中するWeb サイトに設定以上のアクセスが発生した場合、デジタル待 機室として用意したWeb ページへ自動で案内され、アクセス待機の順番管理を行う 仕組みです。自分の順番になると、ワクチン予約ページに自動で誘導される。 # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 8

Slide 8 text

仕様の注意 # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G キャッシュをユニークユーザとして認識しておりLoGo フォームのアカウン トなどを認識しているわけではない

Slide 9

Slide 9 text

仕様の注意 # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G 予約フォームで何人が操作中なのかは認識せず、Cloudflare 内で設定され た待ち行列アルゴリズムで待ち時間を予測してページに誘導している。 オリジンサーバの負荷状況などを見ているわけではない。

Slide 10

Slide 10 text

トラフィック > Waiting Room # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 11

Slide 11 text

これだけで設定できちゃう

Slide 12

Slide 12 text

デザインカスタマイズも可能 # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 13

Slide 13 text

困ったこと・ 工夫したこと 4 選 # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 14

Slide 14 text

①「〇〇万人が同時にアクセスしてきた場合、 目安として何分待つことになるんですか?」 に答えられない 非公式でこっそり教えてもらった計算方法 待ち行列の計算式らしい W = 1/μ ln λ/μ # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 15

Slide 15 text

凡人の私には 理解できない 計算方法の解説は諦めて、小規模な自 治体から導入実績とって過去の実績か ら目安を回答。 # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 16

Slide 16 text

②設定値の最適値がわからず異常な待ち時間で不満に つながるリスク 設定を緩くしすぎるとサービスへの負荷のリスクとな るため念のため最初は厳しめの設定で予約開始にして 予約開始後の待ち時間と人数を監視しながら少しずつ 設定を緩和していく運用にした。 # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 17

Slide 17 text

③予約の不公平さが発生 予約時間前から予約ページにアクセスしていた場 合には待合室への自動遷移対象にならないので行 列に並ぶことなく予約ができてしまいクレームに つながる ↓ 事前に設置するのではなく予約開始時点で有効に する運用に変更 # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 18

Slide 18 text

④API を経由してSlack で待合室発動と行列に並んだ人 数を通知 予約開始から30 分は定期的に通知するように設定 https://zenn.dev/takayuki_n/articles/3a95582c631403 # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 19

Slide 19 text

亀田さんが1 か月前にZenn で公開してくれてる # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 20

Slide 20 text

まとめ クラメソさん、Cloudflare さんマジでありがとう 実際にはこういうケースを想定した料金プランはないので今 後の運用は課題 全部の機能わからなくてもとりあえずCloudflare 使っとくと 色々恩恵受けられるので是非試してみて! # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G

Slide 21

Slide 21 text

THANK YOU! 2023/4/25 Cloudflare Meetup Tokyo Kick Off!! # C l o u d f l a r e U G _ h n d # C l o u d f l a r e U G