Page: 20 / 101

AWS CDK(v2)でS3 Bucket作成時に、`API: s3:PutBucketPolicy Access Denied`が出たらみる記事

S3バケットのデフォルト設定が変更されたため、新しいバケットを作成する際にエラーが発生しました。エラーの原因は、バケットポリシーの設定に関するエラーでした。AWSは、新しいバケットに対してデフォルトでS3パブリックアクセスブロックを有効にし、ACLを無効にする設定を導入しました。CDKを使用してバケットを作成する場合は、blockPublicAccessパラメータを追加して設定する必要があります。これにより、問題が解決しました。

Published at: 2023/08/30

Cloudflare JavaScript Next.js React SaaS / 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は便利なツールです。

Published at: 2023/08/29

Cloudflare JavaScript Next.js React SaaS / FaaS

Next.js App RouterをCloudflare Pagesへ

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

Published at: 2023/08/28

AWS AWS CDK

AWS CDK CLI (v2)のバージョンをアップグレードする方法

触らない期間が不安になるため、バージョンの確認方法とNodeバージョンの警告についてまとめました。CDK CLIのバージョンは`cdk –version`で確認できます。現在のバージョンは`2.34.0`です。Nodeバージョンの警告では、Node 16は2023年9月11日以降新しいリリースでサポートされないため、サポートされているバージョンにアップグレードするよう呼びかけています。AWS CDK(v2)のCLIは`npm i -g aws-cdk@latest`で更新できます。触れなくなったときに困らないよう、技術ブログや自分のサイトでまとめておくと便利です。

Published at: 2023/08/27

AWS AWS CDK Hono / Sonik JavaScript

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

Published at: 2023/08/26

AWS AWS CDK Hono / Sonik JavaScript

SonikをAWS Lambda(+ Functions URL)で動かしてみる

Sonikは、Honoのメンテナであるyusukeさんが開発しているメタフレームワークであり、Next.jsのようなファイルベースのルーティングやHonoを使用したAPIの実装が可能です。AWS CDKを使用してSonikアプリをデプロイする方法を紹介しています。SonikのセットアップやAWS Lambda向けの調整、S3の利用方法なども解説されています。ただし、LambdaからS3の画像を配信する部分には問題があり、今回はS3にリダイレクトさせた形でデプロイされています。

Published at: 2023/08/26

AWS AWS CDK Hono / Sonik

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

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

Published at: 2023/08/25

JavaScript Next.js React

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のキャッシュ設定も考慮する必要があります。

Published at: 2023/08/24

JavaScript Next.js React

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

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

Published at: 2023/08/23

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

Published at: 2023/08/22