Page: 27 / 107

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を構築する仕組みを用意する必要があります。参考記事もあります。

Okamoto Hidetaka

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にリダイレクトさせた形でデプロイされています。

Okamoto Hidetaka

AWSAWS CDKHono / Sonik

AWS Lambda(with AWS CDK)とHonoでサーバーレスなREST APIを構築する

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

Okamoto Hidetaka

JavaScriptNext.jsReact

Next.jsのApp Routerで、headタグ内の情報（metadata）を管理する

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

Okamoto Hidetaka

JavaScriptNext.jsReact

Next.js App Routerにて、サーバー側でfetchした値をReactのContextに渡す方法の覚書

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

Okamoto Hidetaka

AWSAWS CDK

AWS CDK(v2)で、`SSM parameter /cdk-bootstrap/xxx/version not found. `が出た時に読む記事

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の変更などでよく発生するため、注意が必要です。

Okamoto Hidetaka

JavaScriptNode.js

anyenv経由でnodenvをアップグレードする（Node v18が出ない問題への対応）

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

Okamoto Hidetaka

未分類

Next.js (App Router) で、同一ドメインのAPIにfetchする際の覚書

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の情報もあります。

Okamoto Hidetaka
de708a432e61e22817c38bed403b4ff0-20230730223447

EventOpenAISaaS / FaaSWordPressWordPress

Kansai WordPress Meetupで、OpenAIの活用方法やChatWPについて紹介してきました。 #WMKansai 2023/07

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

Okamoto Hidetaka

JavaScriptNext.jsReact

[Next.js App Router入門中] JSONを返すREST APIを作る方法

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

Okamoto Hidetaka
Home
Search
Bookmark