nginx에서 브라우저가 정적 파일을 캐시하도록 설정하기

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

이 방법이 귀하에게 효과가 있을 것이라는 보장은 하지 않습니다!

1 사전 주의사항

작동하는 nginx 설정이 있다고 가정합니다. 예를 들어, 이 튜토리얼에서 보여준 것처럼: Ubuntu 12.04 LTS에서 PHP5(및 PHP-FPM) 및 MySQL 지원과 함께 Nginx 설치

2 nginx 구성하기

Expires HTTP 헤더는 expires 지시어의 도움으로 설정할 수 있으며, 이는 http {}, server {}, location {} 내 또는 location {} 블록 내의 if 문 안에 배치할 수 있습니다. 일반적으로 정적 파일에 대한 location 블록에서 사용합니다. 예를 들어 다음과 같이:

| 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 헤더가 수정되지 않도록 합니다.
• epoch는 Expires 헤더를 1970년 1월 1일 00:00:01 GMT로 설정합니다.
• max는 Expires 헤더를 2037년 12월 31일 23:59:59 GMT로 설정하고, Cache-Control max-age를 10년으로 설정합니다.
• @ 접두사가 없는 시간은 브라우저 접근 시간에 대한 만료 시간을 의미합니다. 음수 시간을 지정할 수 있으며, 이는 Cache-Control 헤더를 no-cache로 설정합니다. 예: expires 10d; 또는 expires 14w3d;
• @ 접두사가 있는 시간은 하루의 절대 만료 시간을 지정하며, Hh 또는 Hh:Mm 형식으로 작성됩니다. 여기서 H는 0에서 24까지, M은 0에서 59까지입니다. 예: expires @15:34;

다음과 같은 시간 단위를 사용할 수 있습니다:

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

예: 1h30m은 한 시간 삼십 분, 1y6M은 일 년과 여섯 개월을 의미합니다.

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

Expires 헤더를 브라우저의 접근 시간에 기반하여 설정하는 대신(예: expires 10d;), 파일의 수정 날짜에 기반하여 설정할 수도 있습니다(실제 하드 드라이브에 저장된 파일에 대해서만 작동함을 유의하십시오!) modified 키워드를 사용하여 시간을 앞에 붙입니다:

expires modified 10d;

3 테스트

구성이 작동하는지 테스트하려면 Firefox용 Live HTTP Headers 플러그인을 설치하고 Firefox를 통해 정적 파일(예: 이미지)에 접근할 수 있습니다. Live HTTP Headers 출력에서 이제 Expires 헤더와 max-age 지시어가 있는 Cache-Control 헤더를 확인할 수 있어야 합니다( max-age는 초 단위의 값을 포함하며, 예를 들어 31536000은 1년 후를 의미합니다):

4 링크

• nginx HttpHeadersModule: http://wiki.nginx.org/HttpHeadersModule
• Firefox용 Live HTTP Headers 플러그인: https://addons.mozilla.org/en-us/firefox/addon/live-http-headers/

저자 소개

Falko Timme는 Timme Hosting(초고속 nginx 웹 호스팅)의 소유자입니다. 그는 HowtoForge의 주요 유지 관리자(2005년부터)이며 ISPConfig의 핵심 개발자 중 한 명(2000년부터)입니다. 그는 또한 O’Reilly의 “Linux System Administration” 책에 기여했습니다.