CloudFront를 통해 이미지가 로드되지 않는 이유는 무엇입니까?

간략한 설명

권한이나 구성 문제 또는 403이나 404 오류로 인해 이미지가 차단될 수 있습니다.

오류 메시지로 인해 이미지가 로드되지 않는지 확인하려면 브라우저의 개발자 도구를 엽니다. 네트워크 탭에서 이미지 요청에 대한 네트워크 호출을 찾습니다. 요청에 대한 응답 헤더에서 404 또는 403 오류 코드를 확인합니다.

서버 값이 Amazon Simple Storage Service(S3) 또는 사용자 지정 오리진 서버 이름으로 설정된 경우 오리진에서 오류 코드를 반환합니다.

해결 방법

Amazon S3 오리진에 액세스할 수 있는 권한이 CloudFront에 없는 경우

Amazon S3 Rest API 엔드포인트의 이미지에 액세스하도록 CloudFront에 구성된 오리진 액세스 ID(OAI)가 있는 경우 버킷에 버킷의 콘텐츠에 대한 OAI 액세스 권한을 부여하는 버킷 정책이 있는지 확인합니다. 정책이 없으면 CloudFront에서 요청이 수행되면 403: 액세스 거부 오류가 반환되고 이미지가 로드되지 않습니다.

이 오류를 해결하려면 S3 버킷 정책 권한을 확인합니다.

이미지가 S3 오리진 또는 사용자 지정 오리진에 존재하지 않는 경우

요청된 이미지 파일이 버킷에 없거나 다른 폴더에 있는 경우 403 또는 404 오류가 반환됩니다. 반환되는 오류는 S3 버킷 권한에 따라 다릅니다.

• 버킷에 대한 s3:ListBucket 권한이 있는 경우 Amazon S3는 404: 해당 키 없음 오류를 반환합니다.
• s3:ListBucket 권한이 없는 경우 Amazon S3는 403: 액세스 거부 오류를 반환합니다.

동작 경로 패턴이 요청을 잘못된 오리진이나 폴더로 보내는 경우

배포에 경로 패턴이 다른 여러 동작이 있는 경우 이미지가 잘못된 오리진 또는 파일이 없는 폴더로 전달될 수 있습니다. 이 경우 404 오류가 표시됩니다.

이 오류를 해결하려면 배포의 동작 및 경로 패턴을 검토합니다. 요청이 경로 패턴과 일치하는 올바른 동작으로 연결되고 올바른 오리진으로 전달되는지 확인합니다.

예를 들어 다음 구성에서 동작 1에는 요청을 S3 오리진으로 라우팅하는 경로 패턴 "테스트"가 있습니다. 동작 2에는 트래픽을 Elastic Load Balancing(ELB) 오리진으로 라우팅하는 경로 패턴 "기본값(*)"이 있습니다.

Behavior1: Path pattern = test ====> S3 origin 
Default Behavior: Path pattern = Default (*)=====> ELB origin

“https://example.com/test/myimage.png”에 대한 요청이 이루어지면 배포는 경로를 동작 2의 경로 패턴 **기본값(*)**과 일치시킵니다. 테스트 끝에 와일드카드가 없으므로 요청이 동작1 경로 패턴 테스트와 일치하지 않습니다. 와일드카드가 없는 경우 이 요청은 기본 동작의 경로 패턴과 일치하며 ELB 오리진으로 전달됩니다. 객체가 ELB 오리진에 존재하지 않기 때문에 요청에서 404 오류를 반환하고 이미지가 로드되지 않습니다.

헤더, 쿠키 또는 쿼리 문자열에 대해 동작 캐시 설정이 구성되지 않은 경우

오리진은 요청된 이미지를 제공하기 위해 요청에 특정 헤더, 쿠키 또는 쿼리 문자열을 전달해야 할 수 있습니다. 이 경우 CloudFront를 사용하여 요청하면 이미지가 로드되지 않습니다. 하지만 오리진에 직접 동일한 요청이 이루어지면 요청이 성공하고 오리진에서 요청된 리소스를 반환합니다.

문제를 해결하려면 오리진에 요청을 처리하기 위해 특정 헤더, 쿠키 또는 쿼리 문자열이 필요한지 확인합니다. 그런 다음 동작 캐시 설정에서 요구 사항이 허용되는지 확인합니다.

오리진 요청 정책을 사용하여 CloudFront가 오리진에 전송하는 요청에 포함된 값(헤더, 쿠키 및 쿼리 문자열)을 허용합니다. 레거시 캐시 설정을 사용할 수도 있습니다.

오리진에 이미지에 대한 메타데이터가 올바로 설정되지 않은 경우

오리진의 Content-Type에 대한 메타데이터가 이미지/png로 설정되지 않은 경우 이미지가 브라우저에 표시되지 않고 다운로드됩니다.

이 문제를 해결하려면 Content-Type 메타데이터를 확인합니다. 필요한 경우 S3 또는 사용자 지정 오리진의 이미지에 대해 값을 이미지/png로 업데이트합니다.

CORS 오류로 인해 이미지가 로드되지 않는 경우

CloudFront 또는 오리진의 CORS 구성이 올바르게 설정되지 않은 경우 "요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다." 오류가 표시됩니다.

이 문제를 해결하려면 CORS 구성이 CloudFront와 오리진 모두에 대해 설정되어 있는지 확인합니다. 자세한 내용은 CloudFront의 "요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다" 오류를 해결하려면 어떻게 해야 합니까?를 참조하세요.

---