AWS S3 이미지 캐시 설정

AWS S3를 사용하여 이미지 캐시를 설정하는 방법에 대해 설명합니다. 이미지 캐시를 설정하면 웹 애플리케이션의 이미지 로딩 및 성능을 최적화할 수 있습니다.

S3 버킷 생성 및 이미지 업로드

AWS S3 콘솔에서 새로운 버킷을 생성하고 이미지를 업로드합니다. AWS S3 버킷 생성 관련 글은 별도로 작성하도록 하겠습니다.

IAM 정책을 사용한 방법

1. AWS Management Console에서 IAM 서비스로 이동합니다.
2. 정책에서 정책을 생성합니다.
3. 쓰기 권한 부여와 관련된 JSON 코드입니다.

{
    "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. '권한'탭에서 '버킷 정책 편집' 버튼을 클릭하고 쓰기 권한을 부여합니다.

{
    "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 s3 cp --metadata-directive REPLACE --cache-control "max-age=3600" s3://your-bucket-name/path/to/your/image.jpg

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를 사용하여 이미지 캐시 설정하면 웹 애플리케이션의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.

이를 통해 이미지 다운로드 및 로딩 시간을 최적화하고 대규모 트래픽에 대비할 수 있습니다.