Nginx는 웹 서버로서 다양한 기능을 제공하는데, 그 중 하나는 캐싱 기능입니다. 캐싱은 웹 애플리케이션의 성능을 향상시키는데 도움이 되는 중요한 요소입니다. 특히 자바스크립트 기반의 웹 애플리케이션에 캐싱을 효과적으로 관리하는 방법을 알아보겠습니다.

1. 정적 자원에 대한 캐싱

자바스크립트 파일, 스타일시트 등과 같은 정적 자원은 변경되지 않는 경우가 많습니다. 이러한 정적 자원을 캐싱하여 클라이언트에게 캐시된 버전을 제공하는 것은 효율적입니다. Nginx에서는 설정 파일을 통해 정적 자원의 캐싱을 구성할 수 있습니다.

아래는 Nginx 설정 파일에서 정적 자원에 대한 캐싱을 구성하는 예시입니다:

location /static/ {
  alias /path/to/static/files/;
  expires max;
  gzip_static on;
}

위의 예시에서 /static/ 경로로 요청이 들어오면 /path/to/static/files/ 디렉토리에서 해당 파일을 찾아 제공합니다. expires max는 캐시의 만료 시간을 최대로 설정하는 옵션입니다. gzip_static on은 정적 파일을 압축하여 제공하는 옵션입니다.

2. 동적 자원에 대한 캐싱

자바스크립트 기반의 웹 애플리케이션에서는 동적으로 생성되는 데이터도 많습니다. 이러한 동적 자원을 캐싱하여 반복적인 요청에 대한 처리 시간을 줄일 수 있습니다. Nginx에서는 동적 자원에 대한 캐싱을 위해 proxy_cache 모듈을 사용할 수 있습니다.

아래는 Nginx 설정 파일에서 동적 자원에 대한 캐싱을 구성하는 예시입니다:

proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m use_temp_path=off;

server {
  location /api/ {
    proxy_set_header Host $host;
    proxy_cache my_cache;
    proxy_cache_key $scheme$proxy_host$request_uri;
    proxy_cache_valid 200 5m;
    proxy_pass http://backend_server;
  }
}

위의 예시에서 /api/ 경로로 요청이 들어오면 backend_server로 프록시되어 응답을 받습니다. proxy_cache는 캐시를 사용하도록 설정하고, proxy_cache_key는 캐시 키를 설정합니다. proxy_cache_valid는 캐시의 유효 시간을 설정하는데, 이 예시에서는 200 응답에 대해 5분 동안 유효하도록 설정되었습니다.

마무리

Nginx를 사용하여 자바스크립트 기반 웹 애플리케이션의 캐싱을 효과적으로 관리할 수 있습니다. 정적 자원과 동적 자원에 대한 캐싱을 구성하여 웹 애플리케이션의 성능을 향상시킬 수 있습니다. 이를 통해 사용자 경험을 개선하고 서버의 부하는 줄일 수 있습니다.

저희 포스트가 도움이 되었다면, #Nginx #캐싱 해시태그를 사용하여 공유해주세요!