Page: 27 / 103
CloudflareHono / SonikJavaScriptSaaS / FaaS
HonoでCloudflare Turnstileのクライアント・サーバー側の処理を実装する
このテキストは、個人的な興味からCloudflare Turnstileの組み込みを試した経験について述べています。Cloudflareエバンジェリスト亀田さんの公開資料が参考になり、TurnstileをHonoで動かすことに挑戦しました。ローカル環境で動かすためにWranglerを使用し、Turnstileのキーを設定します。Honoを使用して認証ページを作成し、Honoでサーバー側の検証処理も行います。Honoの使い方には慣れが必要ですが、ルーティングの部分は書きやすくなりました。HonoとReactを組み合わせるか、Cloudflare PagesのfunctionsとしてHonoをデプロイする方法も考えられます。
JavaScriptmicroCMSNext.jsReactSaaS / FaaS
Next.js App RouterでmicroCMSの画面プレビューに対応する
microCMSのテンプレート作成に挑戦する中で、画面プレビューの実装を行いました。Next.js App Routerを使用してmicroCMSのプレビュー機能を実装する方法を紹介します。ngrokを使用してローカルのNext.jsアプリに中継するためのセットアップ方法も紹介されています。microCMSのAPI設定画面でngrokのURLを設定し、Next.js側では公開済みのコンテンツを表示するページを用意する必要があります。また、プレビューコンテンツの取得にはdraft_keyを利用します。
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やライブラリとの連携やデプロイ設定の変更が必要な場合もあるので、参考リンクもご覧ください。
AWSAWS CDKHono / SonikJavaScript
AWS Lambda(with AWS CDK)とHonoでサーバーレスなWebページを作ってみた
HonoがAWS Lambdaで動くことがわかったので、HTMLを配信するための設定を試しました。CDKとLambdaを使用してHonoアプリをセットアップし、HTMLを返すRouteを追加しました。サーバー側でHTMLを組み立てて表示させるため、metaタグなども作成可能です。AWS CDKでデプロイして、/testなどのパスにアクセスするとHTMLが表示されます。また、APIを呼び出して結果を表示する動的な処理を追加することもできます。HonoはUIとAPIをまとめて作成できる軽量なツールです。ただし、実務で使用する場合はTwigやJSXなどでHTMLを構築する仕組みを用意する必要があります。参考記事もあります。
AWSAWS CDKHono / SonikJavaScript
SonikをAWS Lambda(+ Functions URL)で動かしてみる
Sonikは、Honoのメンテナであるyusukeさんが開発しているメタフレームワークであり、Next.jsのようなファイルベースのルーティングやHonoを使用したAPIの実装が可能です。AWS CDKを使用してSonikアプリをデプロイする方法を紹介しています。SonikのセットアップやAWS Lambda向けの調整、S3の利用方法なども解説されています。ただし、LambdaからS3の画像を配信する部分には問題があり、今回はS3にリダイレクトさせた形でデプロイされています。