「Hono」という軽量フレームワークを使用して、AWS Lambdaでアプリを動かす方法を紹介しました。まずはディレクトリを作成し、AWS CDKをセットアップしました。次にHonoをプロジェクトに追加し、REST APIを実装しました。また、CDKを使用してAWS Lambdaと関連する設定を行い、デプロイしました。最後に、APIを呼び出してリクエストを送信し、Honoのレスポンスを受け取りました。

Next.jsのApp Routerでは、ページファイル内でheadタグ要素を定義することができます。このサンプルでは、titleとmeta descriptionがheadタグ内に出力されます。また、WordPressやmicroCMSなどでコンテンツ情報を管理している場合、metadataの情報も非同期処理が必要になります。generateMetadata()関数を使用することで、非同期にメタデータを設定することができます。ただし、同一レベルでmetadataとgenerateMetadata()を同時に利用することはできません。metadata情報の管理を表示と切り離すことは便利ですが、同じAPIを呼び出す場合の対策については調査が必要です。Vercelを使用する場合は、fetchのキャッシュ設定も考慮する必要があります。

データの取得はサーバー側で１度だけ行いたいが、取得した値はクライアントで参照したい場合のケースについてのメモがあります。APIの呼び出しもクライアント側で行う場合と、サーバー側でキャッシュする場合の2つのコード例が紹介されています。サーバー側でAPI取得をする方法については、propsを使ってコンポーネントに渡すことができることが示されています。また、開発コンソールのネットワークタブでもリクエストは出ていないことが確認できました。

AWS CDKのデプロイ時にエラーが発生し、「SSM parameter /cdk-bootstrap/hnb659fds/version not found. Has the environment been bootstrapped? Please run ‘cdk bootstrap’」と表示されました。このエラーは、CDKのブートストラップが行われていないために発生しています。エラーメッセージに従ってcdk bootstrap aws:///を実行し、CloudFormationのデプロイが完了するまで待った後、再度cdk deployを実行することでエラーが解消されます。このエラーはAWSアカウントの切り替えやPCの変更などでよく発生するため、注意が必要です。

Nodeのバージョン18がインストールできなかった問題の対応記録です。nodenvを使用していたら、anyenvを経由してnodenvをアップグレードする必要がある。その後、新しいバージョンのnodenvをインストールすることができ、Nodeのバージョン18もインストール可能になった。

Next.jsのApp Routerでのアプリ構築中に、Page Routerとfetchの挙動・仕様の違いに遭遇しました。以前のNext.jsとは異なり、相対パスでのAPIリクエストがエラーになります。next/headersを使用して現在のサイトのドメインを取得し、fetchのURLに渡すことで解決できます。App Routerでは、next/headersのheaders()からプロトコルやホストを取得できるため、app/api/route.tsなどで作成したAPIをapp/page.tsなどからfetchすることができます。参考になる記事やGithubの情報もあります。

Kansai WordPress Meetupでは、OpenAIを利用してサイト運用の効率化を試しているセッションが行われました。OpenAI APIを使用しているコードサンプルも公開されています。また、ChatWPというサービスを利用することで、WordPressの開発者ドキュメントを学習することもできます。このサービスでは、WordPressの組み込み方法に関する質問に詳しい回答が得られます。

Next.jsのApp Routerを調べてみて、REST APIを追加する場合の命名規則などをメモしました。以前はpages/apiディレクトリにAPIパスごとにファイルを配置していましたが、App Routerではapp/[APIパス]/route.tsに配置するようになりました。また、ファイル内ではexport default functionではなく、メソッドごとに関数をexportする方法に変わりました。レスポンスはNextResponseやNodeのResponseオブジェクトを利用できます。ファイルの命名規則は少し混乱するかもしれませんが、便利な機能もあります。Server Componentについてはまだ見ていません。参考: https://nextjs.org/docs/app/building-your-application/routing/router-handlers

GitHubのPrivate Repositoryにユーザーを招待するためのコードの実装方法についての覚え書きです。Google App Scriptを利用する場合、SDKを使用しない方法もあります。APIを呼び出すためにfetchを使用する方法や、User-Agentヘッダーの設定が必要なことなどが説明されています。エラーメッセージに関連して、User-Agentヘッダーが必要であることや、エラーレスポンスがJSONでない場合の処理についても説明があります。GitHubドキュメントの参考リンクも提供されています。

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