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

阿部 拓海
 普段
 　・株式会社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

初めてのCloudflare… どこから始めよう...

とりあえずWebページ作ってみよう👀 Cloudflare Pagesあるじゃん 触ったことないけど

なんとなくの認識 AWSに置き換えると↓の感じかな👀 Cloudflare Pages→AWS Amplify Frontend Cloudflare Workers→AWS Lambda?

Cloudflare Pages ● https://www.cloudflare.com/ja-jp/products/pages/ ● フロントエンド開発者のためのフルスタックプラットフォーム ○ とりあえずめっちゃもりもりしてる ■ ブランチごとのプレビュー ■ 他サービス（Workersなど）との接続 ■ Web Analyticsにファンクション(Pagesの中で立てたWorkers)のモニタリング etc.

今回したハンズオン ● はじめての 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

● GitHub連携がかなりシンプルでわかりやすい ○ Amplifyと比べると2工程くらい省略されてる 👀 ■ Build設定をプロジェクト作成時に詳細設定するかやロールの設定がないこと ● KVなどとの連携もシンプル！ ○ Workersにもいえることだけど， name spaceも選択肢で出てくるからわかりやすい ● Webアナリティクスが充実してる ○ Google Analyticsまではいかないけど，自分のちょっとしたブログとかならちょうどいい ● メトリクス ○ 繋がってるWorkersへのリクエストも確認できる ● アクセスポリシー ○ プレビュー環境のアクセス管理の条件が Emailだけでなく，国ごとなどの制限も出来る Cloudflare Pagesいいなーと思ったこと

No content

● KVのバインディングや互換性フラグが更新されない（解消済み ○ KV namespaceのバインディングをしたけど，表示がうまくいかないことやフラグつけてるけ どエラーすることがあった ○ →デプロイのリトライをすると解決したので，何かしらのタイミング問題？ ● カスタムドメイン設定 ○ 自分が持ってるドメイン表示してくれると嬉しい 👀 ● _headersと_redirectsの記法 ○ よくかんがえれば確かにこの形式になるのはわかる ○ →txt形式だから膨大になると読むのが単純に辛そう（ _redirectsは特に） ○ →といいつつ，最小の記法で済むのはうれしい 要望/ハンズオンでつまったこと

まとめ ● クラウドなんてやったことない！って人は初めて触るのにもってこい ○ 価格帯もあるけど，GUIがバラバラしてない感じがすき ○ オプションのON/OFFをPagesの画面からできるのよき ○ 連携できる機能が多いから自分好みの調整がしやすい ○ →小規模なWebサービスなら全然問題ないかも ● バックエンドも一緒に作りたいって人 ○ フロントエンドもバックエンドも同一リポジトリで開発できる ● フックのデプロイがまだあんまり理解できてない👀 ○ →CMSコンテンツの更新の場合，それを動的ではなく静的に表示でいけるって こと？

もっと詳しく知りたい人向け ● 木原さんの資料 ○ https://speakerdeck.com/tacck/number-cloudflareug-cts-number-awsamplifyjp ● 鈴木さんの資料 ○ https://speakerdeck.com/kentosuzuki/cloudflare-pagesshi-tutemita-tuideniaws-amplifymowakaru

手軽にWebページを公開したい人にもってこい とりあえず，アカウント作成から始めてみよう！