Category: Cloudflare
CloudflareHono / SonikJavaScriptSaaS / FaaS
HonoでCloudflare Turnstileのクライアント・サーバー側の処理を実装する
このテキストは、個人的な興味からCloudflare Turnstileの組み込みを試した経験について述べています。Cloudflareエバンジェリスト亀田さんの公開資料が参考になり、TurnstileをHonoで動かすことに挑戦しました。ローカル環境で動かすためにWranglerを使用し、Turnstileのキーを設定します。Honoを使用して認証ページを作成し、Honoでサーバー側の検証処理も行います。Honoの使い方には慣れが必要ですが、ルーティングの部分は書きやすくなりました。HonoとReactを組み合わせるか、Cloudflare PagesのfunctionsとしてHonoをデプロイする方法も考えられます。
CloudflareJavaScriptNext.jsReactSaaS / FaaS
Next.js App Router + microCMSなサイトをCloudflare Pagesへ
microCMSのコンテンツをNext.jsで表示させるアプリをCloudflare Pagesにデプロイした際にエラーが発生しました。cacheの設定はCloudflare Pagesでは利用できないため、環境変数を分岐させることで対応しました。さらに、NODE_ENVを使ってAPIキーの切り替えも可能です。このように、NEXT_RUNTIMEとNODE_ENVを使い分けることでCloudflare Pagesと開発環境での挙動を変えることができます。なお、next-on-cloudflareは便利なツールです。
CloudflareJavaScriptNext.jsReactSaaS / FaaS
Next.js App RouterをCloudflare Pagesへ
Next.jsのApp Routerで構築したサイトをCloudflare Pagesにデプロイするために必要な作業をまとめました。package.jsonにビルドコマンドを登録し、ページやAPIのランタイムをedgeに変更する必要があります。また、Font(next/font/google)の読み込みも調整する必要があります。これらの作業を行えば、エラーを回避できるはずです。ただし、CMSやライブラリとの連携やデプロイ設定の変更が必要な場合もあるので、参考リンクもご覧ください。
AstroCloudflareEventJavaScriptSaaS / FaaSStripe
JP_Stripes & Cloudflare Meet-up 岡山でAstro / Stripe / Cloudflare Pagesのワークショップを開催しました
AWS Samurai 2023を受賞した古里さんからのお声掛けで、StripeとCloudflareを学べるイベントに参加しました。ワークショップでは、Astro / Stripe / Cloudflare Pagesについて学びました。StripeとCloudflareの連携については、決済とメールの連携があると紹介されました。具体的なコード例も提供されました。また、サブスクリプションの申込後にユーザーアカウントを作成する方法や、決済が完了するまでの処理についても説明されました。ワークショップは好評で、AstroやStripe、Cloudflareに興味がある方は是非参加してみてください。

AstroCloudflareEventJavaScriptSaaS / FaaS
Cloudflare Meet-up OnlineでAstroサイトをPagesで公開している話をしてきました
ブログ作者は最近の登壇報告について振り返りをするため、2023年7月26日に開催された「Cloudflare Meet-up Online!! ~日本全国ユーザー大集合LT~」でのLT登壇について述べました。資料はDocswellで公開されていることや、AstroとCloudflare Pagesを使用してサイトを運用する話題が取り上げられています。SSRとSSGの併用方法やAstroの「Hybrid Rendering」の魅力も言及され、またCloudflareに関心がある方はDiscordやMeet-upに参加することができると案内されています。関西在住の方は地元のCloudflare Meet-upに参加することをおすすめしています。
AstroCloudflareJavaScriptSaaS / FaaS
AstroでmicroCMSのコンテンツを利用したサイトを静的ビルド + Cloudflare Pagesにデプロイした話
最近Astroをよく使っている人に向けて、microCMSのデータを取得する方法を簡単にまとめました。まず、microCMSのAPIキーを取得し、環境変数に設定します。次に、microCMSのJS SDKを使って記事情報を取得するためのライブラリをインストールし、APIクライアントを作成します。作成したクライアントを使用して情報を取得して表示する処理を追加しましょう。また、Astroでのビルド・デプロイには、環境変数の扱いに注意が必要です。
AstroCloudflareJavaScriptSaaS / FaaS
Astroでビルドした静的WebサイトをGitHub経由でCloudflare Pagesに自動デプロイする方法
AstroとCloudflare Pagesを使い、サイトをビルドし、デプロイする方法について説明されています。Cloudflare PagesとGitHubのリポジトリを連携させ、接続するGitリポジトリを選んで、ビルド設定を行い、環境変数をAdvancedメニューから設定しましょう。その後、ビルド・デプロイログを追跡し、デプロイが完了するとサイトにアクセスできるようになります。最後に、定期的にビルドするには、GitHub Actions側からWranglerでデプロイする方法が良さそうです。
CloudflareJavaScriptSaaS / FaaSTypeScript
Cloudflare WorkersとKV + Wranglerを利用して、Connpassのイベント情報をDiscordに通知するスケジュールbotを作成する
CloudflareコミュニティでConnpassのイベント情報を通知するbotのサンプルを参考に、Wrangler & TypeScriptでプロジェクトを作成し、Connpassのイベント情報を取得し、KVストアに保存し、Discordに通知するアプリケーションを作成する方法を紹介しています。また、KVストアに保存したデータを確認する方法や、DiscordのWebhook URLを安全にデプロイする方法なども解説しています。