このテキストは、個人的な興味からCloudflare Turnstileの組み込みを試した経験について述べています。Cloudflareエバンジェリスト亀田さんの公開資料が参考になり、TurnstileをHonoで動かすことに挑戦しました。ローカル環境で動かすためにWranglerを使用し、Turnstileのキーを設定します。Honoを使用して認証ページを作成し、Honoでサーバー側の検証処理も行います。Honoの使い方には慣れが必要ですが、ルーティングの部分は書きやすくなりました。HonoとReactを組み合わせるか、Cloudflare PagesのfunctionsとしてHonoをデプロイする方法も考えられます。

microCMSのコンテンツをNext.jsで表示させるアプリをCloudflare Pagesにデプロイした際にエラーが発生しました。cacheの設定はCloudflare Pagesでは利用できないため、環境変数を分岐させることで対応しました。さらに、NODE_ENVを使ってAPIキーの切り替えも可能です。このように、NEXT_RUNTIMEとNODE_ENVを使い分けることでCloudflare Pagesと開発環境での挙動を変えることができます。なお、next-on-cloudflareは便利なツールです。

Next.jsのApp Routerで構築したサイトをCloudflare Pagesにデプロイするために必要な作業をまとめました。package.jsonにビルドコマンドを登録し、ページやAPIのランタイムをedgeに変更する必要があります。また、Font(next/font/google)の読み込みも調整する必要があります。これらの作業を行えば、エラーを回避できるはずです。ただし、CMSやライブラリとの連携やデプロイ設定の変更が必要な場合もあるので、参考リンクもご覧ください。

AWS Samurai 2023を受賞した古里さんからのお声掛けで、StripeとCloudflareを学べるイベントに参加しました。ワークショップでは、Astro / Stripe / Cloudflare Pagesについて学びました。StripeとCloudflareの連携については、決済とメールの連携があると紹介されました。具体的なコード例も提供されました。また、サブスクリプションの申込後にユーザーアカウントを作成する方法や、決済が完了するまでの処理についても説明されました。ワークショップは好評で、AstroやStripe、Cloudflareに興味がある方は是非参加してみてください。

ブログ作者は最近の登壇報告について振り返りをするため、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に参加することをおすすめしています。

最近Astroをよく使っている人に向けて、microCMSのデータを取得する方法を簡単にまとめました。まず、microCMSのAPIキーを取得し、環境変数に設定します。次に、microCMSのJS SDKを使って記事情報を取得するためのライブラリをインストールし、APIクライアントを作成します。作成したクライアントを使用して情報を取得して表示する処理を追加しましょう。また、Astroでのビルド・デプロイには、環境変数の扱いに注意が必要です。

AstroとCloudflare Pagesを使い、サイトをビルドし、デプロイする方法について説明されています。Cloudflare PagesとGitHubのリポジトリを連携させ、接続するGitリポジトリを選んで、ビルド設定を行い、環境変数をAdvancedメニューから設定しましょう。その後、ビルド・デプロイログを追跡し、デプロイが完了するとサイトにアクセスできるようになります。最後に、定期的にビルドするには、GitHub Actions側からWranglerでデプロイする方法が良さそうです。

Cloudflare WorkersはNode.jsそのものではありません。（2023/04時点） そのため、fsなど一部のAPIが利用できず、npmに公開されているライブラリにもWorkersで動かないものがあります。 […]

GitHub Actionsを使用して、Cloudflare Pageにデプロイする方法を解説した記事です。この方法は、静的サイトジェネレーターであるSSGをスケジュールビルドする場合などに最適です。記事では、CloudflareのアカウントIDおよびAPIトークンの取得方法、APIトークンの認証方法、GitHubリポジトリのSecrets and variablesに格納する方法、そして、GitHub ActionsのWorkflowの作成方法について説明されています。また、wrangler-actionを使用することで、wranglerのインストールなどの作業を簡素化できることも紹介されています。参考記事には、Cloudflareの公式ドキュメントやwrangler-actionのGitHubリポジトリも紹介されています。

CloudflareコミュニティでConnpassのイベント情報を通知するbotのサンプルを参考に、Wrangler & TypeScriptでプロジェクトを作成し、Connpassのイベント情報を取得し、KVストアに保存し、Discordに通知するアプリケーションを作成する方法を紹介しています。また、KVストアに保存したデータを確認する方法や、DiscordのWebhook URLを安全にデプロイする方法なども解説しています。