Nginx는 웹 서버와 리버스 프록시 기능을 제공하는 오픈 소스 소프트웨어입니다. 이는 웹 애플리케이션의 성능을 향상시키기 위해 많은 개발자들이 사용하는 도구입니다. Nginx의 주요 기능 중 하나는 웹 캐싱입니다. 웹 캐싱은 자주 요청되는 컨텐츠를 저장하여 웹 페이지의 로딩 시간을 줄이는 역할을 합니다. 이번 블로그에서는 Nginx와 자바스크립트를 함께 사용하여 빠른 캐시 전략을 구현하는 방법을 알아보겠습니다.

Nginx 캐시 설정

Nginx에서 캐시를 사용하려면 먼저 Nginx 설정 파일을 수정해야 합니다. 다음은 Nginx 설정 파일의 예입니다.

http {
  ...
  
  proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m inactive=60m;
  proxy_temp_path /path/to/temp;

  server {
    ...
    
    location / {
      proxy_cache my_cache;
      proxy_cache_valid 200 302 10m;
      proxy_cache_valid 404 1m;
      
      proxy_pass http://backend;
    }
  }
}

위의 예제에서 proxy_cache_path 지시어는 캐시 파일을 저장할 경로와 관련된 설정을 내부 캐시 지역에 지정합니다. proxy_cache_valid 지시어는 HTTP 응답 코드에 따라 캐시를 유지할 시간을 지정합니다. 이러한 설정을 통해 Nginx에 캐시 전략을 구성할 수 있습니다.

자바스크립트를 사용한 캐시 재생성

Nginx는 기본적으로 캐시를 자동으로 재생성하지 않습니다. 하지만 자바스크립트를 사용하여 캐시를 제어할 수 있습니다. 자바스크립트 기반의 재생성을 구현하기 위해서는 proxy_cache_key 지시어를 사용하여 캐시 키를 재정의해야 합니다. 다음은 예제입니다.

location / {
  proxy_cache my_cache;
  proxy_cache_key "$scheme$request_method$host$request_uri$cookie_user";
  proxy_cache_valid 200 302 10m;
  proxy_cache_valid 404 1m;
  
  if ($request_method = GET) {
    add_header Last-Modified $upstream_http_last_modified;
    add_header Cache-Control "no-store, no-cache";
    expires off;
  }

  if ($request_method = POST) {
    set $no_cache 1;
  }
  
  if ($cookie_nocache = "1") {
    set $no_cache 1;
  }
  
  if ($arg_nocache = "1") {
    set $no_cache 1;
  }
  
  if ($no_cache = "1") {
    proxy_cache_bypass 1;
  }
  
  proxy_pass http://backend;
}

위의 예제에서 proxy_cache_key 지시어는 캐시 키를 새로 정의하고 있습니다. 이를 통해 GET 메서드 이외의 요청은 캐싱되지 않도록 설정할 수 있습니다. 또한, 캐시 제어를 위해 Last-Modified 헤더와 Cache-Control 헤더도 설정하고 있습니다. 이러한 설정을 통해 자바스크립트를 사용하여 필요한 경우만 캐시를 재생성할 수 있습니다.

결론

Nginx와 자바스크립트를 함께 사용하여 빠른 캐시 전략을 구현하는 방법을 알아보았습니다. Nginx의 캐시 설정을 수정하고 자바스크립트를 사용하여 캐시를 재생성할 수 있습니다. 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있습니다. Nginx와 자바스크립트를 연계하여 캐시 전략을 개발하는 개발자들에게 유용한 내용이었기를 바랍니다.

#nginx #캐시 #자바스크립트