AWS CloudFrontのビヘイビアって何?
CloudFrontのビヘイビア(Behavior)とは、CloudFrontディストリビューションで設定されたリクエストの処理方法を指定する設定項目のことです。
具体的には、以下のようなビヘイビアを設定することができます。
キャッシュの動作(キャッシュの有効期限、キャッシュしないオブジェクトの指定、等)
セキュリティ設定(署名付きURLの使用、許可されたHTTPメソッドの指定、等)
エラー処理(エラー時の挙動の指定、等)
リクエストのルーティング(オリジンサーバーの選択、パスのリライト、等)
これらのビヘイビアは、CloudFrontディストリビューションを設定する際に、適切な値を設定することで、リクエストの処理を最適化することができます。
amplify で nextjs アプリをデプロイしたいんだけど、ビヘイビアは自動的に設定されるの?
Amplifyには、Next.jsアプリケーションをデプロイするためのビルドおよびデプロイパイプラインがあり、Amplify CLIまたはAmplifyコンソールを使用して設定できます。
Amplifyのデプロイパイプラインは、ビルド、テスト、デプロイなどの各段階で自動的に設定されたデフォルトのビヘイビアを使用します。ただし、特定のビヘイビアを設定する必要がある場合は、Amplifyコンソールで手動で変更することができます。
Amplifyは、これらのビヘイビアを簡単にカスタマイズできるように設計されています。Amplify CLIまたはAmplifyコンソールを使用して、カスタムビヘイビアを作成することができます。
CloudFrontのビヘイビアに _next/image* がありませんでした。 なんで?
CloudFrontのビヘイビアに _next/image* がない場合、これはCloudFrontが _next/image モジュールによって提供される画像の最適化機能を無効にしていることを意味します。
これは、AmplifyがNext.jsアプリケーションをデプロイする際に、 _next/image モジュールを最適化機能を有効にするための自動設定を行わないためです。
ただし、 _next/image モジュールの最適化機能を有効にするには、次の手順に従って設定する必要があります。
next.config.js ファイルをプロジェクトルートに作成します。
next.config.js に以下の設定を追加します。
module.exports = {
images: {
loader: 'cloudinary',
path: 'https://example.com/myaccount/image/upload/',
},
};
この設定は、 _next/image モジュールで画像を最適化するために、Cloudinaryを使用するように指示します。 path には、Cloudinaryのアカウント名とアップロード先のURLを指定します。
amplify.yml ファイルに以下の設定を追加します。
yamlCopy codefrontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run build
- npm run export
artifacts:
baseDirectory: out
files:
- '**/*'
cache:
paths:
- node_modules/**/*
distribution:
# CloudFront cache behavior settings
defaultBehavior:
allowedMethods:
- GET
- HEAD
- OPTIONS
cachedMethods:
- GET
- HEAD
forwardedValues:
queryString: true
cookies:
forward: none
targetOriginId: origin
viewerProtocolPolicy: redirect-to-https
compress: true
lambda@edge:
origin-request:
# Add the following lines
includeBody: true
この設定は、CloudFrontディストリビューションのデフォルトのビヘイビアで、Lambda@Edgeを使用して画像を最適化するように指示します。
これらの設定を追加することで、CloudFrontが _next/image モジュールによる画像の最適化機能を有効にすることができます。
この記事が気に入ったらサポートをしてみませんか?