Expires 설정으로 정적 리소스(이미지, CSS, JS 등) 캐싱 최적화

Expires 헤더는 브라우저가 리소스를 캐시할 기간을 지정하며,

이를 통해 서버 요청 수를 줄이고 웹사이트 성능을 향상시킬 수 있습니다.

---

1. Expires 헤더의 중요성

• 캐싱: 브라우저가 리소스를 로컬에 저장해 재사용 → 서버 부하 감소, 페이지 로딩 속도 개선
• 적용 예시:
  • 이미지(.png, .jpg): 자주 변경되지 않으므로 긴 캐시 기간 (예: 1개월)
  • CSS/JS 파일: 변경 빈도에 따라 중간 기간 (예: 1시간)
  • HTML 파일: 짧은 캐시 기간 또는 캐시 비활성화 (빈번한 업데이트)

---

2. Nginx 설정 단계

1. 기본 헤더 설정 추가

정적 리소스에 공통 캐시 헤더를 추가합니다.
예시: 이미지 파일(.png)에 대한 설정

location = /thumb.png {
    # 캐시 관련 헤더 설정
    add_header Cache-Control "public";
    add_header Pragma "public";  # 구형 브라우저 호환
    add_header Vary "Accept-Encoding";  # 압축 방식에 따른 변동성 표시

    # 캐시 기간 설정 (1개월)
    expires 1M;

    root /sites/demo;
}

2. 모든 정적 리소스에 적용 (정규식 사용)

확장자(.css, .js, .jpg, .png 등)를 기준으로 캐시 설정을 일괄 적용:

location ~* \.(css|js|jpg|jpeg|png)$ {
    access_log off;  # 접근 로그 비활성화 (선택사항)

    add_header Cache-Control "public";
    add_header Pragma "public";
    add_header Vary "Accept-Encoding";

    expires 1M;  # 1개월 캐시
}

---

3. 설정 설명

1. add_header 디렉티브

• Cache-Control "public": 리소스가 공개적으로 캐시될 수 있음을 명시
• Pragma "public": 구형 브라우저 호환을 위한 헤더
• Vary "Accept-Encoding": 클라이언트의 압축 방식(gzip, br 등)에 따라 다른 응답 제공 가능성 표시

2. expires 디렉티브

• 형식: expires [시간][단위]
  • 단위: s(초), m(분), h(시간), d(일), M(월), y(년)
  • 예시:
    • expires 1h; → 1시간 캐시
    • expires 7d; → 7일 캐시
    • expires max; → 최대 캐시 기간 (10년)

3. access_log off

• 정적 리소스 요청 로깅을 비활성화 → 디스크 I/O 및 로그 파일 크기 감소

---

4. 결과 확인

1. curl로 헤더 확인

curl -I http://your-domain.com/thumb.png

• 응답 헤더 예시:

  HTTP/1.1 200 OK
  Cache-Control: public, max-age=2592000  # 30일(1개월)을 초 단위로 변환
  Expires: Thu, 01 Jan 2024 00:00:00 GMT
  Vary: Accept-Encoding

2. 브라우저 개발자 도구 확인

• Network 탭 → 응답 헤더에서 Cache-Control, Expires 확인

---

5. 주의사항

• 변경 빈도 고려: 자주 변경되는 리소스는 짧은 캐시 기간 설정
• 강제 갱신: 캐시 무효화를 위해 파일 이름에 해시 추가 (예: style-abc123.css)
• 보안: 민감한 데이터는 Cache-Control: private 또는 no-store 사용

---

6. 전체 설정 예시

server {
    listen 80;
    server_name example.com;
    root /var/www/html;

    # 정적 리소스 캐싱 설정
    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg)$ {
        access_log off;
        add_header Cache-Control "public";
        add_header Pragma "public";
        add_header Vary "Accept-Encoding";
        expires 1M;
    }

    # HTML 파일은 캐시 비활성화
    location ~* \.html$ {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
    }
}

 

이 설정을 통해 정적 리소스의 효율적인 캐싱이 가능해집니다!