NGINX 설정을 통해 브라우저 캐싱 방지하기

웹 어플리케이션을 개발하다보면 JS, CSS, HTML 등과 같은 정적 파일들이 변경되게 되는데, 웹브라우저 등에 의해 캐싱이 되는 등의 이유로 인해 변경사항이 바로 적용이 안되는 등의 애환이 있다.

물론, "ctrl + shift + r"을 통해 매번 브라우저 캐시를 무시하는 완전 refresh를 시키는 방법도 있지만, 개발을 하면서 매번 이러한 작업을 하는 것 자체가 매우 번거로운 일이다.

 

이러한 제약사항을 극복할 수 있는 방법을 찾던 중, 캐시 만료 설정인 "expires"에 -1을 넣으면 브라우저 캐싱을 막을 수 있다는 사실을 알게 되었다.

 

upstream api_server {
    server 127.0.0.1:8080;
    keepalive 100;
}

server {
	listen 80;
    listen [::] 80;
    server_name www.myserver.com;    
	server_tokens off;

	gzip on;
    gzip_comp_level 4;
    gzip_min_length 1000;
    gzip_proxied cache no-store private expired auth;
    gzip_types text/plain text/css text/xml application/json application/javascript application/x-javascript application/xml application/xhtml+xml application/xml+rss text/javascript;
	#gzip_disable regex; # 지정된 정규 표현식과 일치하는 User-Agent header 와 매칭되는 요청은 압축하지 않음.
    
	# static files
	location / {
		root  /home/service/comp/public;
        try_files $uri /index.html;
        index  index.html index.htm;
        expires -1;
    }
    
	location /api {
		proxy_pass http://api_server;
		proxy_set_header X-Domain-Name $domain;
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	}

	location /app {
    	proxy_pass http://127.0.0.1:3000
		proxy_set_header X-Domain-Name $domain;
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    
	location /nginx_status {
		stub_status on;
		access_log off;
		allow 127.0.0.1;
		deny all;
	}
}