20230722 Webエンジニアの Cloudflare Pagesハンズオン 挑戦記

2023/07/22 (土) Cloudflare Meetup Oita Kick off!!にて発表したLTの登壇資料。
https://cfm-cts.connpass.com/event/285212/

Transcript

1. Webエンジニアの Cloudflare Pagesハンズオン 挑戦記 Takumi Abe
2. 阿部 拓海
 普段
 　・株式会社CAMPFIRE 
 　・Webバックエンドエンジニア
 　・昼飲みとハンドドリップコーヒー 
 運営
 　・JAWS-UG 大分
 　・JAWS DAYS 2021, 2022
 　・JAWS PANKRATION 2021
 　・JAWS FESTA 2023 in Kyushu ←New! 
 　・P&D（学生団体→離散）
 最近あったこと
 　・タロット占いって性格当たるんだな... 
 好きなサービス
 　・AWS Lamdba, Amplify，Step Functions 
 　・Cloudflare Pages, Zero Trust(Access policies) 
 east_takumi east.takumi
3. 初めてのCloudflare… どこから始めよう...
4. とりあえずWebページ作ってみよう👀 Cloudflare Pagesあるじゃん 触ったことないけど
5. なんとなくの認識 AWSに置き換えると↓の感じかな👀 Cloudflare Pages→AWS Amplify Frontend Cloudflare Workers→AWS Lambda?
6. Cloudflare Pages • https://www.cloudflare.com/ja-jp/products/pages/ • フロントエンド開発者のためのフルスタックプラットフォーム ◦ とりあえずめっちゃもりもりしてる ▪ ブランチごとのプレビュー ▪ 他サービス（Workersなど）との接続 ▪ Web Analyticsにファンクション(Pagesの中で立てたWorkers)のモニタリング etc.
7. 今回したハンズオン • はじめての Pages: Cloudflare Pages で チュートリアルの Static な HTML ホスティングをやってみ る ◦ https://zenn.dev/kameoncloud/articles/38459d60d56284 • はじめてのPages(2): Cloudflare Workers でKVの操作とNext.jsによる簡単なスクリプト実行を試 す ◦ https://zenn.dev/kameoncloud/articles/ac26bebe89b9ba • はじめてのPages(3) Web Analyticsとの連携 ◦ https://zenn.dev/kameoncloud/articles/fcd91fa424f576 • はじめてのPages(4) _headres と _redirects を使ってみる ◦ https://zenn.dev/kameoncloud/articles/444172f285b53b
8. • GitHub連携がかなりシンプルでわかりやすい ◦ Amplifyと比べると2工程くらい省略されてる 👀 ▪ Build設定をプロジェクト作成時に詳細設定するかやロールの設定がないこと • KVなどとの連携もシンプル！ ◦ Workersにもいえることだけど， name spaceも選択肢で出てくるからわかりやすい • Webアナリティクスが充実してる ◦ Google Analyticsまではいかないけど，自分のちょっとしたブログとかならちょうどいい • メトリクス ◦ 繋がってるWorkersへのリクエストも確認できる • アクセスポリシー ◦ プレビュー環境のアクセス管理の条件が Emailだけでなく，国ごとなどの制限も出来る Cloudflare Pagesいいなーと思ったこと
10. • KVのバインディングや互換性フラグが更新されない（解消済み ◦ KV namespaceのバインディングをしたけど，表示がうまくいかないことやフラグつけてるけ どエラーすることがあった ◦ →デプロイのリトライをすると解決したので，何かしらのタイミング問題？ • カスタムドメイン設定 ◦ 自分が持ってるドメイン表示してくれると嬉しい 👀 • _headersと_redirectsの記法 ◦ よくかんがえれば確かにこの形式になるのはわかる ◦ →txt形式だから膨大になると読むのが単純に辛そう（ _redirectsは特に） ◦ →といいつつ，最小の記法で済むのはうれしい 要望/ハンズオンでつまったこと
11. まとめ • クラウドなんてやったことない！って人は初めて触るのにもってこい ◦ 価格帯もあるけど，GUIがバラバラしてない感じがすき ◦ オプションのON/OFFをPagesの画面からできるのよき ◦ 連携できる機能が多いから自分好みの調整がしやすい ◦ →小規模なWebサービスなら全然問題ないかも • バックエンドも一緒に作りたいって人 ◦ フロントエンドもバックエンドも同一リポジトリで開発できる • フックのデプロイがまだあんまり理解できてない👀 ◦ →CMSコンテンツの更新の場合，それを動的ではなく静的に表示でいけるって こと？
12. もっと詳しく知りたい人向け • 木原さんの資料 ◦ https://speakerdeck.com/tacck/number-cloudflareug-cts-number-awsamplifyjp • 鈴木さんの資料 ◦ https://speakerdeck.com/kentosuzuki/cloudflare-pagesshi-tutemita-tuideniaws-amplifymowakaru
13. 手軽にWebページを公開したい人にもってこい とりあえず，アカウント作成から始めてみよう！