Cloudflare Page を使った Webアプリケーションを構築

Transcript

1. Cloudflare Page を使った Webアプリケーションを構築 #CloudflareUG #CloudflareUG_ngo
2. Introduction Hisayuki Mori Facebook : 森 久由生 Twitter : @hisayuki_mori Blog : https://hisa-tech.site
3. “ 3 今日のお品書き
4. お品書き ◎ Cloudflare Pagesのサービス紹介 4
5. Cloudflare Page を使った Webアプリケーションを構築 （5分で喋るの無理） Cloudflare Page の紹介
6. Webアプリケーションに必要なサービス ◎ Cloudflare Pages (フロントエンド) ◎ Cloudflare Workers (バックエンド) ◎ Cloudflare D1, Cloudflare KV(Database) ◦ データベースは別途用意してもいいかも。 6
8. “ Cloudflare Pagesって どんなサービス？ 8
9. Cloudflare Pagesってなに？ Cloudflare Pagesは、Cloudflareが提供する静的Webサイトホスティングサービスです。静的 Webサイトは、動的な要素を持たない、HTML、CSS、JavaScriptなどの静的なファイルのみで 構成されるWebサイトです。 Cloudflare Pagesを使用すると、開発者はGitHub、GitLab、Bitbucketなどのリポジトリから、ま たは手動でアップロードした静的ファイルを使用して、簡単かつ迅速に静的Webサイトをホス ティングできます。 Cloudflare Pagesは、多数の地域に分散された高速なCDNを使用して、世界中のユーザーに 迅速かつ高速なWebサイトの配信を可能にします。また、Cloudflareのセキュリティ機能も利用 でき、Webサイトを様々な脅威から保護することができます。 さらに、ビルドパイプラインを構築するための多数のツールや、プレビュー環境を提供してお り、開発者は簡単に自動化されたビルド、テスト、デプロイを行うことができます。これにより、 開発者は静的Webサイトを簡単に開発・デプロイできるようになり、Webサイトの速度、安全 性、信頼性を向上させることができます。 9
10. “ 😇By ChatGPT😇 10
11. 要約すると ◎ Cloudflareが提供する静的Webサイトホスティング サービスです。 ◎ GitHubなどのリポジトリから、または手動でビルドし た静的ファイルをアップロードできます。 ◎ 多数の地域に分散された高速なCDNを使用して、世 界中のユーザーに迅速かつ高速なWebサイトの配 信を可能にします。 11
12. “ まぁ、ざっとこんな感じ 12
13. 似たようなサービス ◎ AWS Amplify Console ◎ Firebase Hosting ◎ Netlify ◎ Vercel ◎ GitHub Pages 13
14. “ つまり、よくある 静的ホスティングサービスです。 14
15. Cloudflare Pagesを選ぶ理由 ◎ 他のサービスとさほど大きな違いは無いです。 ◎ 特徴の違いは ◦ CloudflareのCDNネットワークを利用可能 ◦ ビルドシステムは自分で構築する必要 ◦ デプロイ方法が選べる ◎ ドキュメントはわかりやすかった ◦ 英語だけど😇 ◦ 対応フレームワーク沢山！ 15
17. “ 静的ホスティングサービスの 差別化難しいです😇 17
18. “ と、思ったんですが・・・ こんなのも有ります 18
19. “ Function! 19
20. Functionってなに？ 特定のHTTPリクエストに対してJavaScriptの関数を実行し、レスポンスを返すことができます。 Functionsは、JavaScriptのライブラリや外部APIにアクセスすることができ、複雑な処理を実行 することができます。 フォームの処理、APIエンドポイント、サーバーサイドレンダリングの処理をFunctionに書くこと で、静的ページのホスティングに加えて動的な処理も加えることが出来ます！ しかも、Cloudflare Workersと同じようにグローバルなネットワークを使用しているため、高速な レスポンス時間を実現することができます。 加えてFunctionsはCloudflareのセキュリティ機能と統合されているため、Webアプリケーション やAPIのセキュリティを高めることができます。 20
21. “ 🤔 これちょっとしたアプリなら PagesのFunctionで行けるんじゃ？ 21
22. “ ここから先はまだ調べてないので ぜひ皆さんも想像膨らましてください✨ 22
23. “ 23 その他良かった点！
24. その他良かった点！ ◎ CLIが備わっている ◦ デプロイ先プロジェクトの作成、デプロイまでが CLIで可能 ◦ 但し出来るデプロイはダイレクトアップロード ◎ CLIからビルド後のアセットをデプロイできる。 ◎ 無料プランと有料プランがある ◦ 有料プランは従量課金 ◦ 無料の間はクレカ登録不要 24
25. “ 25 追記
26. “ 26 特に設定なくCDNとWAFが 備わっている！！
27. “ 27 まとめ
28. まとめ ◎ クレカ登録しなくてよいところはよい ◦ Freeプランである間は使い方に気を使わなくて良 い ◦ お試しで使うがやりやすい ◎ CLI完備が嬉しい。 ◎ デプロイ方法が複数ある 28
29. “ 29 最後に・・・
30. “ 30 Githubからの自動デプロイの時 Node.js v12がデフォは流石に😇
31. “ 31 追記
32. Thanks! ご清聴ありがとうございました🌟 32