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

by mori-hisayuki

Slide 1

Slide 1 text

Cloudﬂare Page を使った Webアプリケーションを構築 #CloudflareUG #CloudflareUG_ngo

Slide 2

Slide 2 text

Introduction Hisayuki Mori Facebook : 森久由生 Twitter : @hisayuki_mori Blog : https://hisa-tech.site

Slide 3

Slide 3 text

“ 3 今日のお品書き

Slide 4

Slide 4 text

お品書き ◎ Cloudflare Pagesのサービス紹介 4

Slide 5

Slide 5 text

Cloudﬂare Page を使った Webアプリケーションを構築（5分で喋るの無理） Cloudﬂare Page の紹介

Slide 6

Slide 6 text

Webアプリケーションに必要なサービス ◎ Cloudflare Pages (フロントエンド) ◎ Cloudflare Workers (バックエンド) ◎ Cloudflare D1, Cloudflare KV(Database) ○ データベースは別途用意してもいいかも。 6

Slide 7

Slide 7 text

Slide 8

Slide 8 text

“ Cloudﬂare Pagesってどんなサービス？ 8

Slide 9

Slide 9 text

Cloudﬂare 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

Slide 10

Slide 10 text

“ 😇By ChatGPT😇 10

Slide 11

Slide 11 text

要約すると ◎ Cloudflareが提供する静的Webサイトホスティングサービスです。 ◎ GitHubなどのリポジトリから、または手動でビルドした静的ファイルをアップロードできます。 ◎ 多数の地域に分散された高速なCDNを使用して、世界中のユーザーに迅速かつ高速なWebサイトの配信を可能にします。 11

Slide 12

Slide 12 text

“ まぁ、ざっとこんな感じ 12

Slide 13

Slide 13 text

似たようなサービス ◎ AWS Amplify Console ◎ Firebase Hosting ◎ Netlify ◎ Vercel ◎ GitHub Pages 13

Slide 14

Slide 14 text

“ つまり、よくある静的ホスティングサービスです。 14

Slide 15

Slide 15 text

Cloudﬂare Pagesを選ぶ理由 ◎ 他のサービスとさほど大きな違いは無いです。 ◎ 特徴の違いは ○ CloudflareのCDNネットワークを利用可能 ○ ビルドシステムは自分で構築する必要 ○ デプロイ方法が選べる ◎ ドキュメントはわかりやすかった ○ 英語だけど😇 ○ 対応フレームワーク沢山！ 15

Slide 16

Slide 16 text

Slide 17

Slide 17 text

“ 静的ホスティングサービスの差別化難しいです😇 17

Slide 18

Slide 18 text

“ と、思ったんですが・・・こんなのも有ります 18

Slide 19

Slide 19 text

“ Function! 19

Slide 20

Slide 20 text

Functionってなに？特定のHTTPリクエストに対してJavaScriptの関数を実行し、レスポンスを返すことができます。 Functionsは、JavaScriptのライブラリや外部APIにアクセスすることができ、複雑な処理を実行することができます。フォームの処理、APIエンドポイント、サーバーサイドレンダリングの処理をFunctionに書くことで、静的ページのホスティングに加えて動的な処理も加えることが出来ます！しかも、Cloudflare Workersと同じようにグローバルなネットワークを使用しているため、高速なレスポンス時間を実現することができます。加えてFunctionsはCloudflareのセキュリティ機能と統合されているため、WebアプリケーションやAPIのセキュリティを高めることができます。 20

Slide 21

Slide 21 text

“ 🤔 これちょっとしたアプリなら PagesのFunctionで行けるんじゃ？ 21

Slide 22

Slide 22 text

“ ここから先はまだ調べてないのでぜひ皆さんも想像膨らましてください✨ 22

Slide 23

Slide 23 text

“ 23 その他良かった点！

Slide 24

Slide 24 text

その他良かった点！ ◎ CLIが備わっている ○ デプロイ先プロジェクトの作成、デプロイまでが CLIで可能 ○ 但し出来るデプロイはダイレクトアップロード ◎ CLIからビルド後のアセットをデプロイできる。 ◎ 無料プランと有料プランがある ○ 有料プランは従量課金 ○ 無料の間はクレカ登録不要 24

Slide 25

Slide 25 text

“ 25 追記

Slide 26

Slide 26 text

“ 26 特に設定なくCDNとWAFが備わっている！！

Slide 27

Slide 27 text

“ 27 まとめ

Slide 28

Slide 28 text

まとめ ◎ クレカ登録しなくてよいところはよい ○ Freeプランである間は使い方に気を使わなくて良い ○ お試しで使うがやりやすい ◎ CLI完備が嬉しい。 ◎ デプロイ方法が複数ある 28

Slide 29

Slide 29 text

“ 29 最後に・・・

Slide 30

Slide 30 text

“ 30 Githubからの自動デプロイの時 Node.js v12がデフォは流石に😇