Nginx 환경 설정으로 원하는 자원(CSS,JS,이미지)만 캐싱하기

Nginx 설정 (수정 전)

server {
    listen 80;

    location / {
        auth_request /auth;
        proxy_pass https://front_new;
    }

    #인증
    location = /auth {
        ...
    }
}

문제점

Nginx 환경 설정으로 자원(CSS,JS,이미지)만 캐싱한 이유

Angular 프로젝트의 웹서버로 Nginx를 사용하고 있습니다.
메인 화면에서 로그인이 되지 않은 상태면 로그인 url로 넘기고 있는데,
문제는 이 과정에서 Nginx에서 설정한 auth_request가 호출되지 않고 브라우저 캐시로 인해 redirect 되고 있습니다.
예를 들어 'example.com/' 을 호출하면 'example.com/login' 으로 redirect 됩니다.
이 과정에서 보안 목적으로 설정한 auth_request를 정상적으로 수행하지 않아서 자원(CSS, JS, 이미지 등)은 캐싱하고 페이지는 캐싱하지 않는 설정을 추가했습니다.

Nginx 설정 (수정 후)

개별 수정 코드

CSS,JS 캐싱

location ~* \.(?:css|js)$ {
    root /app-front;
    expires 30d;
    add_header Cache-Control "public";
}

• root : 캐싱이 되는 빌드된 파일이 있는 곳
• expires : 캐싱 기간
• add_header Cache-Control : HTTP 응답 헤더에 'Cache-Control' 헤더를 추가해서 브라우저 또는 중간 프록시 서버에서 캐시에 관한 설정을 추가. 'public' 옵션은 리소스가 공용 캐시에 저장될 수 있음을 나타낸다.

이미지,폰트 등 캐싱

location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
    root /app-front;
    expires 1M;
    add_header Cache-Control "public";
}

기존 코드에 캐싱하지 않도록 설정

location / {
    add_header Cache-Control "no-cache";

    auth_request /auth;
    proxy_pass https://front_new;
}

add_header Cache-Control : 'no-cache'는 매번 원래 서버에 접근하여 데이터를 검증한다.

전체 수정 코드

server {
    listen 80;

    location / {
        add_header Cache-Control "no-cache";

        auth_request /auth;
        proxy_pass https://front_new;
    }

    #인증
    location = /auth {
        ...
    }

    location ~* \.(?:css|js)$ {
        root /app-front;

        expires 30d;
        add_header Cache-Control "public";
    }

    location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
        root /app-front;

        expires 1M;
        add_header Cache-Control "public";
    }
}