初学者が感じたCloudflareの良かった所と詰まった所

Cloudflare Meet-up Osaka #5で発表した内容です

https://cfm-cts.connpass.com/event/332122/

Transcript

1. 初学者が感じた Cloudflareの 良かった所と詰まった所 ~初めてのwebサイト作りを通じて~
2. • 自己紹介 • 作ったサイトについて • Cloudflareの ◦ 良かった点 ◦ 実装で詰まった点 • まとめ
3. • 自己紹介 • 作ったサイトについて • Cloudflareの ◦ 良かった点 ◦ 実装で詰まった点 • まとめ
4. 自己紹介 名前：もじゃなり 仕事：電機メーカーでロボットいじったり、ロボットの操作用 UI作ってます 休日は、 本読んだり、ブログ書いたり、 webサイトを作ったりしてます 今回は休日に作っていたwebサイトをCloudflareを使って開発、公開しているので、 開発の中で感じたCloudflareの良かったこと詰まったことを紹介したいと思います ブログ X アイコン
5. • 自己紹介 • 作ったサイトについて • Cloudflareの ◦ 良かった点 ◦ 実装で詰まった点 • まとめ
6. なぜwebサイトを作った？ Twitchと呼ばれる配信サイトで色々な配信者の動画 (クリップ)を時系列で並べて見たかった →公式ページでは「24時間以内」「7日以内」などの日時の範囲指定だけ →ソート機能すらない(´;ω;｀) →動画を取得出来るAPIはある。。。 →無いなら作るか！ 日時の範囲だけ変えれる
7. 「ストグラクリップ」というページを作った ストグラに参加している配信者の動画 (クリップ)を見れるサイト サイト：https://stgr-clip.jp/hotclips • 日時や視聴回数順のソート • 複数の配信者の動画を同じ画面に表示する • 当日の配信者の中で一番見られた動画をランキングで表示 webサイトのホスティング、動画の情報を集めたデータベースは 全てCloudflare上に構築しています
8. 構成図 Cloudflareが提供している中の PagesとD1、KVを使っています
9. Cloudflareの良かった点
10. 無料枠が大きすぎる 最初は無料枠で動作するかをテスト出来た • Pagesは10万リクエスト • D1のReadは500万/日、Writeは10万/日 個人では使いきれないほどのリソースが無料枠で提供されている ただ、サイトを公開して時に一度バズって Pagesの無料枠を突き抜けたので有料プランに切り替えました 後でアナリティクスを見ると 24hのアクセス数が12k →逆に言えばこれぐらいにならなければ無料枠で運用できる
11. 色んなサービスをまとめて使えて料金が安い 今回のストグラクリップでは、 • Webサイトのホスティング • 動画の情報を保存するデータベース の二つが必要だが、1つの契約でどちらとも使える 契約すると有料枠を超えた分は従量課金になってしまうけど、、、 →今のところ従量課金になるまで使ったことは無い →5.5ドルでサイトの安定運用ができる！
12. Cloudflareの実装で詰まった点
13. Honoを使うかどうか？ TypeScriptはUI作成のときに使用しているため、 Typescriptで書けるHono+Workerをデータ収集の際に使おうとしました ただ、 • wranglerとは？
 • Pythonみたいにその場で実行してデバッグしやすい？
 • Honoをすぐに使いこなせる？
 となったので、Honoは採用せずに、ラズパイ＋Pythonでデータ収集の仕組みを作りました
 PythonでD1やKVを操作する方法についてはブログにまとめました ：リンク

14. Vercelから移行方法が分からなかった 今回作成しているサイトの前に、 ユーザーの反応を見るために Vercel＋Nextjsで一度サイトを作っていた 移行しようと思ったときに、 Cloudflare Pagesにデプロイしようとしたが環境？ があわずデプロイできず。。 →最初から作り直すことで対応 →作り直すと言っても下記の公式ページに従ってプロジェクトを作って UIのコンポーネントをコピペしただ け：リンク
15. まとめ • ストグラクリップというwebサービスをCloudflareで作ってみた • webサービスは、CloudflareのPagesとD1、KVを使って構成 • Cloudflareは個人的には安くて様々な機能が使えてめっちゃ便利！ • 色々詰まったこともあるけど webサービス公開までできるよ！