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 モジュールの最適化機能を有効にするには、次の手順に従って設定する必要があります。

1. next.config.js ファイルをプロジェクトルートに作成します。

2. next.config.js に以下の設定を追加します。

module.exports = {
  images: {
    loader: 'cloudinary',
    path: 'https://example.com/myaccount/image/upload/',
  },
};

この設定は、 _next/image モジュールで画像を最適化するために、Cloudinaryを使用するように指示します。 path には、Cloudinaryのアカウント名とアップロード先のURLを指定します。

1. 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 モジュールによる画像の最適化機能を有効にすることができます。