[nginx] 웹 어플리케이션에 context path가 존재할 경우, webpack 등으로 패킹된 html의 js,css include 구문에서 context path를 생략한 채 자원을 요청하여 404가 발생하는 케이스에 대한 해결

포인트

• 웹 자원을 include 하는 구문 (href="/xxx", src="/xxx") 의 시작을 절대경로가 아닌 상대경로로 replace 해 주어서 해결함.
  
  

수정 전 (nginx > default.conf)

...
location / {

    proxy_set_header    Host $http_host;
    proxy_set_header    X-Real-IP $remote_addr;
    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header    X-Forwarded-Proto $scheme;
    proxy_set_header    X-NginX-Proxy true;

    proxy_pass http://tomcat;
    proxy_connect_timeout 5;
}
...

수정 후 (nginx > default.conf)

...
location / {

    sub_filter_once off; # 한 번만 치환이 아니라 만나면 계속 치환
    sub_filter 'src="/' 'src="./';
    sub_filter 'href="/' 'href="./';

    proxy_set_header    Host $http_host;
    proxy_set_header    X-Real-IP $remote_addr;
    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header    X-Forwarded-Proto $scheme;
    proxy_set_header    X-NginX-Proxy true;

    proxy_pass http://tomcat;
    proxy_connect_timeout 5;
}
...

참고 링크

• https://stackoverflow.com/questions/46610662/nginx-reverse-proxy-with-different-context-path