Javascript/Angular

Nginx에서 index.html 파일만 캐시를 사용하지 않게 만들기

조영래 2025. 9. 12. 00:40

Anuglar 와 같은 SPA 같은 경우 서버에 수정한 부분을 반영했음에도 불구하고 브라우저의 캐시 문제로 인하여 새로운 index.html 파일을 가져오지 못하여 이전 페이지가 계속 나타나는 문제가 발생한다.
이런 경우에는 서버 설정에 index.html 인 경우에는 캐싱을 하지 말고 항상 가져가야 한다는 것을 정의해 놓으면 된다.
참고로 몇가지 이야기 하자면 서버에 설정을 수정하여 반영했다고 해서 100% 브라우저에 바로 적용되지는 않는 것 같다. 그런 경우에는 Clinet PC를 재부팅을 해보던지 브라우저에서 애플리케이션 페이지에 접속한 후 Ctrl+Shift+R 을 눌러서 새로 가져오도록 해야 한다.

* nginx.conf 파일 수정 예제

...

server {
		listen 446 ssl http2;
		server_name 도메인;
		
		root C:/nginx-1.22.1/html;
		index index.html index.htm;
    
		# "/" 로만 접근했을 때 /index.html 로 리다이렉트
		location = / {
			return 301 /index.html;
		}
		
		 # Angular와 같은 SPA를 위한 설정 (중요)
		location / {
			try_files $uri /index.html;
		}

		# index.html에 대한 캐시 비활성화 (가장 구체적인 규칙)
		location = /index.html {
			add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
			add_header Pragma "no-cache" always;
			add_header Expires "0" always;
		}
	
		ssl on;
		ssl_certificate C:/nginx-1.22.1/ssl/도메인.pem;
		ssl_certificate_key C:/nginx-1.22.1/ssl/도메인.key;
		ssl_session_timeout 5m;
		ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
		ssl_ciphers ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:HIGH:MEDIUM:!MD5:!aNULL:!EDH:!RC4:!DSS;
		ssl_prefer_server_ciphers on; 
		ssl_session_cache shared:SSL:10m;
	 
	 
 }