Amazon S3에서 호스팅되고 CloudFront를 통해 제공되는 정적 웹 사이트의 지연 시간 문제를 해결하려면 어떻게 해야 합니까?

최종 업데이트 날짜: 2020년 6월 29일

웹 사이트의 정적 콘텐츠가 Amazon Simple Storage Service(Amazon S3) 버킷에서 호스팅되고 Amazon CloudFront 배포를 통해 사용자에게 제공됩니다. 웹 사이트의 콘텐츠가 느리게 로드되거나 TTFB(Time To First Byte) 지표가 높은 것으로 표시됩니다. 이 문제를 해결하려면 어떻게 해야 합니까?

간략한 설명

웹 사이트의 정적 콘텐츠를 로드할 때 발생하는 지연 시간 문제를 해결하려면 다음 이벤트 중에서 지연 시간에 영향을 미치는 이벤트를 식별합니다. 그런 다음 이러한 이벤트를 최적화하는 방법을 구현합니다.

  1. 클라이언트가 도메인 이름에 대한 DNS 쿼리를 보내는 경우(DNS 조회 프로세스)
  2. 클라이언트가 SSL/TLS 협상을 포함하여 웹 서버(CloudFront 콘텐츠 전송 네트워크)로 요청을 보내는 경우
  3. CloudFront가 요청을 처리하고 캐시에서 콘텐츠를 제공하거나 CloudFront가 요청을 오리진(Amazon S3)에 전달하는 경우

이러한 이벤트의 성능은 다음에 따라 달라집니다.

  • 로컬 시스템의 웹 브라우저 및 리소스
  • 로컬 네트워크
  • 로컬 DNS 서버
  • 로컬 라우터, 방화벽 또는 프록시
  • 업스트림 DNS 서버
  • 인터넷 서비스 공급자
  • Amazon S3 및 CloudFront

해결 방법

지연 시간에 영향을 미치는 이벤트 식별

웹 브라우저의 개발자 도구를 사용하여 웹 사이트 콘텐츠 요청 내에서 각 구성 요소의 성능을 확인합니다. 예를 들어 Mozilla Firefox를 사용하는 경우 MDN web docs 웹 사이트에서 Firefox Developer ToolsNetwork request details를 참조하십시오.

지연 시간에 영향을 미치는 이벤트를 확인한 후 해당 이벤트의 시간을 줄이기 위한 다음 고려 사항을 검토합니다.

클라이언트가 도메인 이름에 대한 DNS 쿼리를 보내는 경우(DNS 조회 프로세스)

DNS 조회 프로세스를 최적화하는 다음 방법을 고려하십시오.

  • 클라이언트 측 DNS 캐싱을 활성화하거나 늘립니다.
  • 로컬 DNS 서버에서 DNS 캐시를 설정하거나 늘립니다.
  • 인터넷 서비스 공급자의 확인자 DNS 서버가 지연 시간을 초래하는 경우 퍼블릭 DNS 서버를 사용하는 것이 좋습니다.

클라이언트가 SSL/TLS 협상을 포함하여 웹 서버(CloudFront 콘텐츠 전송 네트워크)로 요청을 보내는 경우

클라이언트와 서버 간 연결 시간을 줄일 수 있는 다음 방법을 고려하십시오.

  • 웹 캐싱, 인터넷 서비스 공급자 또는 네트워크 경로를 수정하여 로컬 네트워크 성능을 최적화합니다. 웹 브라우저와 CloudFront 간 연결은 주로 로컬 네트워크, 인터넷 서비스 공급자의 대역폭, 클라이언트와 가장 가까운 CloudFront PoP(Point of Presence) 위치에 필요한 네트워크 라우팅 또는 홉에 따라 달라집니다. 모범 사례는 가장 최적화된 웹 리소스 경로를 구성하는 것입니다. 또한 올바른 DNS 확인자를 사용하면 웹 브라우저에서 가장 가까운 올바른 POP 위치를 찾을 수 있습니다.
  • 로컬 캐싱을 사용하여 서버(CloudFront)의 리소스에 대한 요청을 줄입니다. 로컬 캐싱은 CSS, Javascript 또는 이미지와 같이 자주 변경되지 않는 정적 객체에 특히 유용합니다. Amazon S3에서 호스팅되는 정적 콘텐츠의 경우 객체에 cache-control 헤더를 추가할 수 있습니다. cache-control 헤더는 일정 시간 동안 웹 사이트 콘텐츠를 브라우저 메모리 또는 로컬 디스크에 보관하도록 웹 브라우저에 지시합니다. 이 시간 동안 웹 브라우저는 인터넷을 통해 콘텐츠를 요청하는 대신 로컬 메모리에서 콘텐츠를 로드합니다. Amazon S3 콘솔을 사용하여 cache-control 헤더를 설정할 수 있습니다.
  • 로컬 캐싱 HTTP 정방향 프록시가 이미 있는 경우 웹 사이트 콘텐츠에 대해 충분히 큰 캐시 크기를 지정할 수 있습니다. 이렇게 하면 자주 액세스하는 페이지가 로컬 프록시 캐시에 저장되고 요청 시 브라우저에 콘텐츠가 제공되기 때문에 인터넷을 통해 전송되는 요청 수가 줄어들 수 있습니다.

CloudFront가 요청을 처리하고 캐시에서 콘텐츠를 제공하거나 CloudFront가 요청을 오리진(Amazon S3)에 전달하는 경우

캐시에서 더 많은 콘텐츠를 제공하여 오리진에서 오는 콘텐츠에 대한 요청을 줄이면 웹 사이트를 로드할 때의 지연 시간을 줄일 수 있습니다. 웹 콘텐츠가 대부분 캐시에서 제공되도록 CloudFront 구성을 최적화하는 다음 방법을 고려하십시오.

  • CloudFront의 정적 콘텐츠에 대한 최소 캐시 시간을 늘립니다. 또는 CloudFront 배포의 기본 동작에 대한 최소 캐시 시간을 늘릴 수 있습니다. 배포의 기본 동작에 대한 최소 캐시 시간을 늘리는 한 가지 방법은 최소 TTL 값을 늘리는 것입니다. 그러면 CloudFront가 Amazon S3 오리진에서 객체를 요청하는 대신 더 오래 객체를 캐싱할 수 있습니다.
  • 헤더 또는 쿼리 문자열에 대한 전달 또는 캐시 설정을 검토합니다. CloudFront 캐싱은 [선택한 요청 헤더를 기준으로 캐싱] 및 [쿼리 문자열 전달 및 캐싱에 대한 값을 모두 [없음(캐싱 개선)]으로 설정할 때 최적화됩니다. 그러나 이러한 값 중 일부를 기반으로 전달 또는 캐싱해야 하는 경우 특정 헤더와 쿼리 문자열만 전달하거나 캐시해야 합니다.
    참고: Amazon S3 오리진으로 쿠키를 전달하도록 CloudFront를 구성하지 마십시오. Amazon S3는 쿠키를 처리하지 않습니다.
  • CloudFront 배포에서 압축을 활성화합니다. 압축을 활성화하면 CloudFront가 엣지 또는 POP 로케이션에서 자동으로 객체를 압축한 다음 압축된 객체를 제공합니다. 이렇게 하면 다운로드 시간이 단축되고 페이지 로드 성능이 개선될 수 있습니다.
  • 정적 콘텐츠에 별도의 캐시 동작을 사용합니다. 정적 콘텐츠와 동적 콘텐츠에 서로 다른 캐시 동작을 사용하는 것이 모범 사례입니다.

다음 단계에 따라 정적 콘텐츠에 대한 최적의 캐시 설정을 구성합니다.

  1. CloudFront 콘솔을 엽니다.
  2. 배포 목록에서 웹 사이트의 정적 콘텐츠를 제공하는 배포를 선택합니다.
  3. [동작] 탭을 선택합니다.
  4. 정적 콘텐츠에 대한 새 동작을 생성하거나 정적 콘텐츠의 경로 패턴에 대한 기존 동작을 편집할 수 있습니다. 기존 동작을 편집하려면 동작을 선택한 다음 [편집]을 선택합니다.
  5. [선택한 요청 헤더를 기준으로 캐싱]에서 [없음(캐싱 개선)]을 선택하여 캐싱을 최적화합니다. 특정 헤더를 전달해야 하는 경우 [화이트리스트]를 선택한 다음 필요한 헤더만 추가합니다.
  6. Amazon S3 객체에 cache-control 헤더를 사용하려면 [객체 캐싱]에서 [오리진 캐시 헤더 사용]을 선택합니다. Amazon S3 오리진에서 cache-control 헤더를 재정의하려면 [사용자 지정]을 선택합니다. 그런 다음 [최소 TTL]을 원하는 최소 캐시 기간으로 설정합니다.
    경고: 배포 동작의 최소 TTL, 최대 TTL 및 기본 TTL 값은 오리진의 객체에 설정된 캐시 헤더와 상호 작용합니다.
  7. [쿠키 전달]에서 [없음(캐싱 개선)]을 선택합니다.
  8. [쿼리 문자열 전달 및 캐싱]에서 [없음(캐싱 개선)]을 선택하여 캐싱을 최적화합니다. 특정 쿼리 문자열을 전달해야 하는 경우 [모두 전달, 화이트리스트를 기준으로 캐싱]을 선택한 다음 필요한 쿼리 문자열만 추가합니다.
  9. [자동으로 객체 압축]에서 []를 선택합니다.
  10. [예, 편집]을 선택하여 변경 사항을 저장합니다.