웹사이트 검색

nginx에서 정적 파일을 캐시하는 방법

이 페이지에서

  1. 1 서문
  2. 2 nginx 구성
  3. 3 테스트
  4. 4개의 링크

이 튜토리얼에서는 정적 파일(예: 이미지, CSS 및 Javascript 파일)의 Cache-Control HTTP 헤더의 max-age 지시문과 Expires HTTP 헤더를 미래의 날짜로 설정하도록 nginx를 구성하는 방법을 설명합니다. 방문자 브라우저에 의해 캐시됩니다. 이렇게 하면 대역폭이 절약되고 웹 사이트가 더 빠르게 표시됩니다(사용자가 사이트를 두 번째로 방문하면 브라우저 캐시에서 정적 파일을 가져옵니다).

1 서문

예를 들어 작동하는 nginx 설정이 있다고 가정합니다. 이 튜토리얼에 표시된 대로: Ubuntu 16.04 LTS에서 PHP 7 및 MySQL 5.7(LEMP)과 함께 Nginx 설치

2 nginx 구성

Expires HTTP 헤더는 http {}, 서버 {}, 위치 {} 내부에 배치할 수 있는 만료 지시문 또는 위치 {} 블록 내부의 if 문을 사용하여 설정할 수 있습니다. 일반적으로 정적 파일의 위치 블록에서 사용합니다. 다음과 같이:

location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
   expires 365d;
}

위의 예에서 모든 .jpg, .jpeg, .png, .gif, .ico, .css 및 .js 파일은 브라우저 액세스 시간으로부터 향후 365일 날짜가 포함된 Expires 헤더를 가져옵니다. 따라서 location {} 블록이 실제로 브라우저에서 캐시할 수 있는 정적 파일만 포함하는지 확인해야 합니다.

변경 후 nginx를 다시 로드합니다.

/etc/init.d/nginx reload

expires 지시문과 함께 다음 시간 설정을 사용할 수 있습니다.

  • off는 Expires 및 Cache-Control 헤더가 수정되지 않도록 합니다.\n
  • epoch는 Expires 헤더를 1970년 1월 1일 00:00:01 GMT로 설정합니다.\n
  • max는 Expires 헤더를 2037년 12월 31일 23:59:59 GMT로 설정하고 Cache-Control max-age를 10년으로 설정합니다.\n
  • @ 접두어가 없는 시간은 브라우저 액세스 시간을 기준으로 한 만료 시간을 의미합니다. Cache-Control 헤더를 no-cache로 설정하는 음의 시간을 지정할 수 있습니다. 예: 만료 10d; 또는 14w3d 만료;
  • @ 접두사가 있는 시간은 Hh 또는 Hh:Mm 형식으로 작성된 절대 시간 만료 시간을 지정합니다. 여기서 H는 0에서 24까지, M은 0에서 59까지입니다. 예: 만료 @ 15:34;

다음 시간 단위를 사용할 수 있습니다.

  • ms: 밀리초
  • s: 초
  • m: 분
  • h: 시간
  • d: 일
  • w: 주
  • M: 개월(30일)
  • y: 년(365일)

예: 1시간 30분 동안 1h30m, 1년 6개월 동안 1y6M.

또한 먼 미래의 Expires 헤더를 사용하는 경우 구성 요소가 변경될 때마다 구성 요소 파일 이름을 변경해야 합니다. 따라서 파일에 버전을 지정하는 것이 좋습니다. 예를 들어 javascript.js 파일이 있고 이를 수정하려는 경우 수정된 파일의 파일 이름에 버전 번호(예: javascript-1.1.js)를 추가해야 브라우저에서 다운로드할 수 있습니다. 파일 이름을 변경하지 않으면 브라우저는 캐시에서 (이전) 파일을 로드합니다.

Expires 헤더를 브라우저의 액세스 시간(예: 만료 10d;)에 기반하는 대신 파일의 수정 날짜에 기반할 수도 있습니다(이는 하드 드라이브에 저장된 실제 파일에 대해서만 작동한다는 점에 유의하십시오! ) 시간 앞에 오는 수정된 키워드를 사용하여:

expires modified 10d;

3 테스트

구성이 작동하는지 테스트하려면 Firefox 브라우저에서 개발자 도구의 네트워크 분석 기능을 사용하고 Firefox를 통해 정적 파일(예: 이미지)에 액세스할 수 있습니다. 헤더 출력에서 이제 max-age 지시문이 포함된 Expires 헤더와 Cache-Control 헤더를 볼 수 있습니다(max-age에는 초 단위의 값이 포함됩니다. 예를 들어 31536000은 미래 1년입니다).

4 링크

  • nginx HttpHeadersModule: http://wiki.nginx.org/HttpHeadersModule

저자 소개