Slide 1

Slide 1 text

Cloudflare 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

Cloudflare Page を使った Webアプリケーションを構築 (5分で喋るの無理) Cloudflare Page の紹介

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7

Slide 8

Slide 8 text

“ Cloudflare Pagesって どんなサービス? 8

Slide 9

Slide 9 text

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

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

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

Slide 16

Slide 16 text

16

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がデフォは流石に😇

Slide 31

Slide 31 text

“ 31 追記

Slide 32

Slide 32 text

Thanks! ご清聴ありがとうございました🌟 32