[테크블로그] 하위 경로 이슈

이슈

주말내집 프로젝트의 프론트엔드 리액트 프로젝트는 https://duaily.net/ 도메인을 사용하고 있습니다.
추가로, 서버 api는 스프링 프로젝트를 이용해 nginx에서 ‘/api’ 하위 도메인으로 설정했습니다.
또한, 스프링 프로젝트 내부 타임리프 페이지를 nginx에서 ‘/admin’ 하위 도메인으로 설정했습니다.

location / {
    root /home/ubuntu/client/dist;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}

location /tech {
    root /home/ubuntu/back-office/dist;
    index index.html index.htm;
    try_files $uri $uri/ /tech/index.html;
}

테크 블로그 프론트엔드로 새로운 vue 프로젝트를 생성한 후에 위의 설정들과 동일하게 ‘/tech’ 하위 도메인으로 설정 후 nginx를 재시작했을 때 정상적으로 접속되지 않았습니다.

해결방안

nginx를 위와 같이 설정하면 ‘/tech’ 하위 경로로 접속을 해도 기존의 ‘/’ 경로로 요청을 보냅니다.

location / {
    root /home/ubuntu/client/dist;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}

location /tech {
    sub_filter static/js/ tech/static/js/;
    sub_filter href="/favicon href="tech/favicon;
    sub_filter static/css/ tech/static/css/;
    sub_filter static/media/ tech/static/media/;
    sub_filter manifest.json/ tech/manifest.json/;
    sub_filter_once off;
    sub_filter_types *;
    
    alias /home/ubuntu/back-office/dist;
    index index.html index.htm;
    try_files $uri $uri/ /tech/index.html;
}

우선, alias를 사용하여 location에서 매칭된 ‘/tech’를 제거하고 alias로 설정된 경로에서만 파일을 찾게합니다.
또한 js와 css파일을 로드해주기 위해서 sub_filter를 사용해야 합니다. sub_filter str1 str2 는 가져온 파일에서 str1 문자열을 모두 str2 문자열로 치환해주는 전처리 작업을 해줍니다.
위의 sub_filter를 모든 부분에 적용해주어야 하기 때문에 sub_filter_once off; 옵션을 설정합니다.
추가로 html 파일 뿐만 아니라 js와 css에 있는 경로도 전부 변경해주어야 하기 때문에 sub_filter_types *; 옵션을 추가합니다.