AWS S3 画像キャッシュ設定

AWS S3 を使用して画像キャッシュを設定する方法について説明します。画像キャッシュを設定すると、ウェブアプリケーションの画像のロードとパフォーマンスを最適化することができます。

S3 バケットの作成と画像のアップロード

AWS S3 コンソールで新しいバケットを作成し、画像をアップロードします。

AWS S3 バケット作成に関する記事は別途作成します。

IAM ポリシーを使用した方法

  1. AWS Management Console から IAM サービスに移動します。
  2. ポリシーで新規ポリシーを作成します。
  3. 書き込み権限付与に関連する JSON コードです。

IAM

{
    "Version": "2012-10-17", // Check Version
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*" // Check bucket name
        }
    ]
}

IAM ユーザーにポリシーを関連付ける

  1. IAM サービスでユーザーを選択する必要がありますが、会社のアカウントでない限り、個人しかいません。もちろん、個人が同僚の開発者を招待して進行する場合もありますが、その場合はユーザーを招待してユーザーをクリックすればいいです。
  2. '権限'タブで作成したポリシーを関連付けます。

S3 バケットポリシーを使用する方法

  1. S3 サービスでバケットを選択します。
  2. '権限'タブで'バケットポリシー編集'ボタンをクリックし、書き込み権限を付与します。

s3 bucket policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*"
        }
    ]
}

AWS CLI を使用した Cache-control

画像のキャッシュ制御ヘッダーである Cache-Control 値の定義が必要です。max-age=3600 は、画像を 1 時間キャッシュするように指示します。

動的に変わり続けるデータの場合は、max-age=3600 を推奨し、定期的に変わる静的な画像ではない場合は、Cache-Control: public, max-age=31536000, immutable と進行するといいです。

max-age は推奨値であり、必ずしも従う必要はありません。 個人的な推奨値は max-age=31536000です。

aws cli

aws s3 cp --metadata-directive REPLACE --cache-control "max-age=3600" s3://your-bucket-name/path/to/your/image.jpg

aws s3 cli

Chrome Console ウィンドウを利用したテストと確認

キャッシュ画像を確認するためには、Chrome DevTools を利用できます。

  1. F12 キーを押して'ツール > 開発者ツール'を選択
  2. 'ネットワーク'タブで画像のリクエストを探す
  3. 画像を選択して、リクエストの詳細表に表示される Response Headers または'応答ヘッダ'セクションを開き、Cache-Control の値を確認 (Cache-Control の値が空または Null の場合、Cache-Control は失敗です。したがって、AWS CLI コマンドを入力した後に応答を確認する必要があります。)

AWS S3 Cache-Control が必要な理由

AWS S3 を使用して画像キャッシュを設定すると、ウェブアプリケーションのパフォーマンスを向上させ、ユーザーエクスペリエンスを改善することができます。

これにより、画像のダウンロードとロード時間を最適化し、大規模なトラフィックに対応することができます。

aws s3 cli