🚀 nginx proxy pass를 바꿨더니 생긴 에러 ‐ 스웨거 인식 문제

백엔드 서버의 proxy pass를 기존의 http://backend에서 http://backend/로 수정했더니 생기는 에러에 관한 정리를 한 문서입니다

초기 상황

우선 클라우드에서 도커를 돌리려 하다보니 계속해서 에러가 발생을 하였다. 이를 해결하려고 로컬에서 도커를 실행하려는 환경을 구축해두었다

현재 백엔드에 별도의 api에 관련된 코드가 없었기에 백엔드 테스트로 가장 직관적이라고 생각한 것이 public 디렉토리 안에 있는 server-test.html 파일을 실행시키는 것이었다.

nginx의 설정을 보게 되면

location /api {
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
}

해당 방식으로 /api의 prefix를 붙이는 요청들이 백엔드 컨테이너로 향하게 된다.

그렇기에 localhost/api/socket-test.html로 GET 요청을 보내게 되었는데 초기에 백엔드 컨테이너를 돌리고 기존처럼 socket-test.html 요청을 보내도 404에러가 지속적으로 나왔다.

socket-test.html은 서버 디렉토리 안에 있는 파일이다보니 백엔드에 요청을 보낼때 /api를 선행하여 보내야 하는데 그렇게 될 경우 prefix 까지 정적파일 요청 경로에 포함이 되서 public 안에서 파일을 찾지를 못한다

사실 이런 경우

app.useStaticAssets(join(__dirname, '..', 'public'), {
  prefix: '/api'});
}

이런 식으로 prefix를 지정해주면 들어오는 요청에서 정적 파일 서빙을 진행을 할때, 요청 주소의 /api prefix를 알아서 제거를 해주고 올바른 경로로 진행이 되는데 나의 경우는 다른 방법을 사용했다. 여기서 발생하는 에러가 있다!!!

나 같은 경우 nginx의 default.conf에서 직접적으로 모든 요청에 관하여 api prefix를 제외하는 방법을 사용했다

location /api {
    proxy_pass http://backend/; //여기에 백슬래시 추가!!!!
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
}

요런식으로 proxy_pass에 trailing slash를 추가하게 될 경우 들어오는 요청에 관하여 api가 제거가 된다

예를 들어 /api/users이런식의 요청이 들어오게 될 경우, 백엔드로 둘다 처리가 되는건 똑같지만

• trailing slash 없는 경우: http://backend/users (api가 제거됨)
• trailing slash 있는 경우: http://backend/api/users (api가 제거되니 않음)

그렇기에 정적 파일 요청과 backend api 요청들 모조리 다 api가 무시되어서 그리 진행을 만약 할 경우, 백엔드에 관한 요청처리와 swagger가 정상 작동이 되지 않게 되는 것이다!

setGlobalPrefix에 관하여 알아보자

app.setGlobalPrefix('api');

• 모든 컨트롤러의 라우트에 자동으로 '/api' prefix 추가
• 컨트롤러 코드를 수정할 필요 없이 전역적으로 적용

setGlobalPrefix('api') 적용 전:

GET /users
POST /users

setGlobalPrefix('api') 적용 후:

GET /api/users
POST /api/users

static file과 스웨거에서 경로를 인식을 못하는 문제!!!

setGlobalPrefix는 라우트 핸들러(컨트롤러의 엔드포인트)에만 적용되고, 정적 파일 서빙에는 영향을 주지 않는다.

또한 setGlobalPrefix는 Swagger와도 독립적으로 동작하기에 swagger내에서도 별도로 prefix를 설정해야합니다

따라서 두개의 경우에는 prefix를 따로 해당 코드들 안에서 명시를 해둬야한다

SwaggerModule.setup('api/api-document', app, document);

app.useStaticAssets(join(__dirname, '..', 'public'), {
  prefix: '/api',
});