[Nginx] NGINX에서 정적 파일 캐시 설정하는 방법

Notice

Recent Posts

Recent Comments

Link

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

피터의 개발이야기

[Nginx] NGINX에서 정적 파일 캐시 설정하는 방법 본문

DevOps/nginx

[Nginx] NGINX에서 정적 파일 캐시 설정하는 방법

기록하는 백앤드개발자 2025. 3. 11. 06:54

ㅁ 들어가며

[Nginx] NGINX 기설 설정 파일의 구조와 사용법 - 캐시 설정 (정적 파일)을 정리하면서 캐싱기능에 대해서 알게 되었다. 웹사이트 성능을 높이려면 정적 파일(이미지, CSS, JS 등)에 대한 캐시 설정이 필수적이다. NGINX에서는 다양한 방법으로 캐시를 설정할 수 있으며, 적절한 캐시 정책을 적용하면 페이지 로딩 속도를 향상시키고 서버 부하를 줄일 수 있다. 이번 글에서는 NGINX에서 정적 파일 캐시를 설정하는 방법을 정리하였다. 주로 NGINX Caching 설정 가이드을 인용하여 작성하였다.

ㅇ 정적 파일 캐시?
ㅇ NGINX Caching 설정방법
ㅇ NGINX Caching 추가 설정
ㅇ NGINX Caching 컨트롤 방법
ㅇ NGINX 캐시 설정 적용 및 테스트

ㅁ 정적 파일 캐시란?

https://nginxstore.com/blog/nginx/nginx-caching-설정-가이드

정적 파일 캐시는 웹 브라우저가 동일한 파일을 다시 요청할 때, 서버에서 파일을 다시 다운로드하지 않고 로컬 저장소(캐시)에 저장된 파일을 재사용하여 클라이언트에게 더 빠른 응답을 제공하는 기술이다.

ㅇ 캐시를 적용 시

페이지 로딩 속도 향상: 불필요한 네트워크 요청 감소
서버 부하 감소: 반복적인 요청을 줄여 서버 성능 최적화
대역폭 절약: 클라이언트가 캐싱된 리소스를 사용하면 트래픽 감소

NGINX Caching 설정방법

ㅁ NGINX Caching 저장될 경로와 공유 메모리 영역 설정

#  /etc/nginx/nginx.conf

...

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    proxy_cache_path /data/nginx/cache keys_zone=nginxcache:10m;

...
   
    include /etc/nginx/conf.d/*.conf;

}

ㅇ proxy_cache_path 지시문

- 경로 지정: /data/nginx/cache

- 공유 메모리 영역의 이름: nginxcache

- 영역의 크기를: 10MB

ㅁ NGINX에서 정적 파일 캐시 설정하기

expires 지시어를 사용한 캐시 설정

server {
    listen 80;
    server_name example.com;
    
    proxy_cache nginxcache; # 캐싱할 공유 메모리 영역 지정

    location / {
        root /var/www/html;
        index index.html;
    }

    # 정적 파일 캐싱 설정
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff|woff2|ttf|svg|eot|otf)$ {
        expires 30d;  # 30일 동안 캐시 유지
        add_header Cache-Control "public, no-transform";
        add_header X-CACHE-STATUS $upstream_cache_status;
        access_log off;
    }
}

ㅇ 위에서 정의한 캐싱할 공유 메모리 영역(nginxcache)을 지정하였다.

ㅇ expires 지시어를 사용하면 특정 파일 유형에 대해 브라우저 캐시 만료 시간을 설정할 수 있다.

ㅇ expires 설명

- expires 30d; → 30일 동안 캐시 유지
- add_header Cache-Control "public, no-transform"; → 파일이 캐시될 수 있도록 HTTP 헤더 추가
- access_log off; → 정적 파일 요청에 대한 로그를 비활성화하여 성능 최적화

ㅇ 캐싱 상태를 확인

- 캐싱 상태를 확인할 수 있는 응답 헤더(X-CACHE-STATUS)를 추가

$ curl -I localhost 

HTTP/1.1 200 OK
Server: nginx/1.25.4
Date: Tue, 18 Jun 2024 08:26:07 GMT
Content-Type: text/html
Content-Length: 615
Connection: keep-alive
Last-Modified: Tue, 18 Jun 2024 05:51:17 GMT
ETag: "66712055-267"
X-CACHE-STATUS: MISS  <------- 캐시 상태 표시
Accept-Ranges: bytes

$ curl -i localhost 

HTTP/1.1 200 OK
Server: nginx/1.25.4
Date: Tue, 18 Jun 2024 08:26:54 GMT
Content-Type: text/html
Content-Length: 615
Connection: keep-alive
Last-Modified: Tue, 18 Jun 2024 05:51:17 GMT
ETag: "66712055-267"
X-CACHE-STATUS: HIT  <------- 캐시 상태 표시
Accept-Ranges: bytes

<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>

NGINX Caching 추가 설정

ㅁ proxy_cache_path

ㅇ levels

proxy_cache_path /data/nginx/cache keys_zone=nginxcache:10m levels=2:1:1;

- 캐시 파일이 저장될 디렉토리의 계층 구조를 설정

- 3단계까지 설정이 가능

- 각 단계별로 1 혹은 2의 값을 설정 가능

$ ls /data/nginx/cache/54/a/4/ 
8e47e49a7a4175f257325117c0e3 4 a 54

- 위와 같이 설정하면, 캐시파일이 지정된 계층 구조로 생성된다.

ㅇ inactive

proxy_cache_path /data/nginx/cache keys_zone=nginxcache:10m inactive=10m;

- 지정된 시간동안 캐시 파일이 엑세스되지 않으면 캐시 파일의 유효 여부와 관계 없이 해당 캐시 파일을 삭제

- 기본값: 10분

ㅇ max_size

# max
proxy_cache_path /data/nginx/cache keys_zone=nginxcache:10m max_size=10g;

#min
proxy_cache_path /data/nginx/cache keys_zone=nginxcache:10m min_free=3g;

- max_size

ㄴ 캐시 파일 디렉토리의 최대 크기를 설정

ㄴ 캐시 파일 크기 초과: 오래된 캐시 파일을 삭제
- min_free

ㄴ 최소 여유 공간을 설정

ㄴ 여유 공간이 부족해지면 오래된 캐시 파일을 삭제

ㅁ proxy_cache_methods

location / {
        proxy_pass http://localhost:90;
        proxy_cache_valid 1m;
        proxy_cache_methods GET HEAD POST;
        add_header X-CACHE-STATUS $upstream_cache_status;
    }

ㅇ 캐싱 설정을 적용할 http 요청 메서드를 정의한다.

ㅇ GET, HEAD 메서드는 설정과 관계 없이 항상 적용된다.

ㅁ proxy_cache_key

location / {
    proxy_pass http://localhost:90;
    proxy_cache_valid 1m;
    proxy_cache_key $scheme$proxy_host$request_uri;
}

ㅇ 캐시된 항목을 식별할 캐시 키를 정의한다.

ㅇ 기본값은 $scheme$proxy_host$request_uri이다.

ㅇ 해당 설정을 통해 특정 헤더를 포함해서 캐시 키를 생성하는 등 지정된 설정을 기반으로 캐시를 분리할 수 있다.

NGINX Caching 컨트롤 방법

ㅁ Cache-Control 헤더를 활용한 고급 캐싱 설정

location ~* \.(jpg|jpeg|png|gif|ico)$ {
    expires 90d;
    add_header Cache-Control "public, max-age=7776000, immutable";
}

location ~* \.(css|js)$ {
    expires 7d;
    add_header Cache-Control "public, max-age=604800";
}

ㅇ 캐시 만료 정책을 더욱 정밀하게 설정하려면 Cache-Control 헤더를 활용할 수 있다.

ㅇ 설명

- max-age=7776000→ 브라우저가 90일 동안 파일을 캐시

- immutable→ 파일이 변경되지 않는다고 가정하여 불필요한 요청 방지

- max-age=604800→ CSS와 JS 파일은 7일 동안 캐시

ㅇ immutable이란?
파일이 변경되지 않는 경우, 브라우저가 불필요하게 캐시를 확인하는 요청(304 Not Modified)을 보내지 않도록 한다.

ㅁ ETag & Last-Modified를 활용한 캐싱

ㅇ NGINX는 기본적으로 정적 파일에 대해 ETag와 Last-Modified 헤더를 제공합니다.

- ETag: 파일의 고유한 해시값을 기반으로 변경 여부 확인

- Last-Modified: 파일이 마지막으로 수정된 날짜를 기준으로 변경 여부 판단

ㅇ 설정 확인
기본적으로 활성화되어 있으므로, 설정을 추가할 필요는 없다.

curl -I https://example.com/style.css

curl을 사용해 응답 헤더를 확인할 수 있다.

HTTP/1.1 200 OK
Last-Modified: Wed, 06 Mar 2024 12:00:00 GMT
ETag: "5d2c-5b8f2ad4b4b00"
Cache-Control: max-age=604800

ㅇ 캐시 갱신이 필요하면,

파일명을 변경
ETag를 재생성하도록 서버 설정을 변경

ㅁ 캐시 무효화(강제 갱신) 방법

ㅇ 이미 캐시된 파일을 갱신하려면 두 가지 방법을 사용할 수 있다.

파일 버전 변경 (?v=1.0 방식)

<link rel="stylesheet" href="/css/style.css?v=2.0">

ㅇ 파일이 변경될 때마다 ?v=2.0처럼 버전을 변경하면 브라우저는 새로운 파일로 인식하여 다시 다운로드한다.

NGINX에서 캐시 무효화 설정

location ~* \.(css|js)$ {
    expires 7d;
    add_header Cache-Control "public, max-age=604800";
    add_header ETag "";
}

ㅇ add_header ETag "";을 추가하면 ETag를 제거하여 변경 여부를 항상 확인하도록 만든다.

ㅁ NGINX 캐시 설정 적용 및 테스트

NGINX 설정 테스트

설정을 변경한 후, 문법 검사를 실행하세요.

nginx -t

ㅇ "syntax is ok" 메시지가 나오면 설정이 정상이다.

NGINX 재시작 및 설정 반영

systemctl restart nginx  # NGINX 재시작
systemctl reload nginx   # 설정 파일만 다시 로드 (무중단 반영)

응답 헤더 확인

curl -I https://example.com/image.jpg

ㅇ Cache-Control, Expires 헤더가 정상적으로 적용되었는지 확인한다.

ㅁ 마무리

이번 글에서는 NGINX에서 정적 파일의 캐시를 설정하는 방법을 알아보았다. 캐싱 설정을 통해 서버 성능을 향상하고, 클라이언트에게 더 빠른 응답을 제공할 수 있다. 추가설정을 통해 캐시서버의 상태를 최적화할 수 있다.

ㅁ 함께 보면 좋은 사이트

ㅇ NGINX 콘텐츠 캐싱

ㅇ NGINX Caching 설정 가이드

'DevOps > nginx' 카테고리의 다른 글

[Nginx] Nginx의 기본 이해와 주요 기능 (0)	2025.03.18
[Nginx] NGINX으로 HLS(HTTP Live Streaming) 스트리밍 캐싱설정 (0)	2025.03.14
[Nginx] NGINX 설정 파일의 구조와 사용법 (0)	2025.03.10
[Nginx] NGINX의 End of Life (EOL) 정책 정리 (0)	2025.03.06
[Nginx] Nginx의 허용IP와 Proxy_pass 설정 (0)	2024.10.26

'DevOps/nginx' Related Articles

Comments

피터의 개발이야기

[Nginx] NGINX에서 정적 파일 캐시 설정하는 방법 본문

[Nginx] NGINX에서 정적 파일 캐시 설정하는 방법

ㅁ 들어가며

ㅁ 정적 파일 캐시란?

NGINX Caching 설정방법

ㅁ NGINX Caching 저장될 경로와 공유 메모리 영역 설정

ㅁ NGINX에서 정적 파일 캐시 설정하기

NGINX Caching 추가 설정

ㅁ proxy_cache_path

ㅁ proxy_cache_methods

ㅁ proxy_cache_key

NGINX Caching 컨트롤 방법

ㅁ Cache-Control 헤더를 활용한 고급 캐싱 설정

ㅁ ETag & Last-Modified를 활용한 캐싱

ㅁ 캐시 무효화(강제 갱신) 방법

ㅁ NGINX 캐시 설정 적용 및 테스트

ㅁ 마무리

ㅁ 함께 보면 좋은 사이트

'DevOps > nginx' 카테고리의 다른 글

티스토리툴바