4/15(土)に長野で開催された「Cloudflare Meetup Nagano Kick Off!」の参加レポートです！

当日の様子

togetter

弊社でのCloudflare活用事例

トラストバンクの香西さん(@Tocyuki)
普段は「ふるさとチョイス」などを運営しているTRUSR BANKにてSREをしている。

TRUSR BANKさんはCloudflareは結構前からEnterprise Planを利用。

  • Cloudflare基本のキ
    • Cloudflare CDN/WAF/DNSといった機能がある
    • CDNに関してはFreeプランで使えてしまう！
  • 移行案件
    • Cloudflare Load Balancerのお話
      • とあるクラウドからAWSへ移行する際にCloudflare Load Balancerを使って「とあるクラウド90%、AWS10%といった感じでカナリアリリースを実施した結果、リスクを抑えて移行ができた
      • なお、このカナリアリリースは全てTerraformでIaC化している
  • JAMスタックホスティングの決定版！！Cloudflare Pages
    • Webサイトをリリースする際に「制作会社 → GitHub → Pages」というフローを組むことができた
    • 料金：どれだけアクセスが来てもフリープラン
  • もうお前がいればええんちゃう？Cloudflare Rules
    • 以下の処理を今まではNginxをいちいち書き換えて対応していたが、Cloudflare Rulesを使うことで簡単に対応できるようになった
      • リダイレクト
      • レスポンスヘッダーの書き換え
      • 特定URLへのレート制限
      • IP制限も可能
    • なお、これらは全てCloudflare RulesをTerraformで書いて対応している
    • プランによってはRulesの使用に制限がかかるため注意

感想

Cloudflareをめちゃくちゃ使っていて、「こんな使い方があるのか」とか、それぞれのサービスのイメージが深まりました。

Cloudflareハンズオン

Cloudflareエバンジェリストの亀田さん(@kameoncloud)

まずは簡単な解説

Cloudflareのエッジは285都市以上に展開されている。
日本だと東京、大阪、福岡、沖縄に拠点があり、これらは海底ケーブルがある都市となっている。

IP Anycastという仕組みを使っており、Cloudflareのエッジを経由するとクライアントへは特定のIPアドレスが返されるようになる。

Zone Apexと呼ばれる先頭にサブドメインを含まないドメイン名であれば無償で使えるが、サブドメインを使おうとすると有償となる。

ハンズオン資料

  1. アカウント作成
    【超入門】Cloudflareアカウントを新規登録する
  2. 開発環境のセットアップ
    Windows 環境でCloudflare 開発ツール Wranglerを設定する方法とHello World!の実行まで
  3. Cloudflare Workersのkey-value型永続ストレージであるKVのハンズオン
    Cloudflare Workers と KV でTodoListアプリを作る
  4. エッジで動作するSQL LiteデータベースであるD1のハンズオン
    Cloudflare Workers から D1 を操作する
  5. AWS S3互換ストレージであるR2のハンズオン（クレジットカード登録が必要）
    Cloudflare Workers からR2を操作する

Cloudflare Workersについて

  • Cloudflareの中でChromeが動いているようなイメージ（Chromiumを使用したv8エンジンを使っている）
  • Node.jsをデフォルトでサポートしていない
  • 最大5MBまでしか実行できない
  • WorkersのログをS3やNewrelicなどにプッシュするLog push機能は有償
  • コールドスタートなしで実行される
    • コンテナが立ちっぱなしであるため

感想

何回か参加してようやく参加レポートを書けるくらいに理解が深まりました。
最初はハンズオンのWranglerというCloudflare Workersを操作するCLIの初期設定すら上手くいかなくて苦戦していたので…

LT① あの頃数百自治体のコロナワクチン予約フォームを救ったWaiting Roomの運用

トラストバンクの武田さん(@taketakekaho)

資料

自治体の手続きを簡単にするプラットフォームである「Logoフォーム」のお話。

ワクチン接種の予約は自治体に任されていた。
コロナワクチン予約のフォームとして「Logoフォーム」は使えないかと様々な問い合わせがあった。
ただし、予約開始とともに一斉に同時アクセスが来ることから、当時LoGoフォームを使うのは辛かったそう。

そこで利用されたのがCloudflare Waiting Room。
このCloudflare Waiting Roomはアクセスが集中するWebサイトについて、既存のサーバ構成を変更することなく、アクセスの順番管理を可能にするサービス。
設定項目が少なく、簡単に設定ができる。
デザインのカスタマイズも可能。

コロナワクチン予約フォームを作る上で、困ったこと

  • 「〇〇万人が同時にアクセスしてきた場合目明日として何分待つのか」という質問
    • 小規模な自治体の結果から試算することで回答
  • 設定値の最適値が分からず、異常な待ち時間で不満につながるリスク
    • 「待機時間は13995分です」とか出てきたとのことww
    • 最初は人力で待ち時間と人数を監視して設定を緩和
  • 予約の不公平さが発生
    • 予約時間前から予約ページにアクセスしていた場合他待合室を介すことなく入れてしまう問題が発生
    • 開始時間と同時にフォームをリリースすることで対処
    • APIを経由してSlackで待合室発動と行列に並んだ人数を通知

待合室については亀田さんがセットアップする手順(Cloudflare Waiting Room (待合室）を設定する方法)を公開してくれています（有償プラン）。

参考

感想

香西さんと同じトラストバンクさんでも全然違った発表、Cloudflareの使い方をしていて、大変勉強になりました。
Cloudflare Waiting Roomは高負荷が予測される際にサービスがスケーリングできないようなケースで利用するといった話を懇親会で聞けました。

LT② Amazon CloudfrontからCloudflareに移行してみた

岡崎さん

  • Freeプランを選択
  • 無料で試すにはDNSをCloudflareに移すしかないことが判明
    • サブドメインで頑張ろうとしたが、結局諦めてDNSを移した
  • 10分弱で完了
  • DNSSECは手動で有効化が必要
  • IPアドレスは綺麗なのか？
    • 汚れたIPアドレスはSEOの順位が落ちたりするので…
  • マルチCDN
    • 可能
    • Cloudfrontのドメインを
    • Cloudflareの良いところ
      • マネコンにキャプチャがない
      • SSL証明書が自動生成される
      • DNS Zone ApexでCNAMEが書ける
      • DNSSECが無料で使える

感想

AWSでDNSSECを使おうとするとKMSの料金が発生するので、無料を突き詰めるのであれば、Cloudflareを使うという選択肢もあるんだなと思いました。

LT③ Cloudflare Pages使ってみた – ついでにAWS Amplifyもワカル –

私の発表です。
以下のようなことをしゃべりました。

・Cloudflare Pagesを初めて触ってみた。
・Cloudflare PagesのおかげでAWS Amplifyのホスティングがなんとなく分かった話。
・Astro, Hono, Remixとは。

資料

おまけ

さわの庵
・歯応えがあって美味しいお蕎麦でした。
・ランチタイムに行ってしまったので結構待ちました。
・お昼の勉強会前に行ったので飲めませんでしたが、日本酒が結構豊富だったので日本酒好きにはオススメです。

欅屋 びくら
・長野で2番目に高い（らしい）ビルで懇親会。長野の山々が見えて景色が良かったです。
・料理はもちろん美味しいです。
・レタス焼酎や長芋焼酎とか面白いのがありました（飲みやすい）。

信州蕎麦の草笛
・くるみそばが美味しかったです。
・+700円で中盛りを頼むと800gになります。
・個人的には普通盛りを頼んで、その後に街のお蕎麦屋さんに入る方が賢いと思います。（「賢いこと = 良いこと」なのかは各々の判断に委ねます！）

懇親会の様子

長野県の豆知識
・長野県民は山の標高が答えられる