Nginx 배포 시 Spring Swagger 안나오는 버그 해결

문제 상황

원래 SpringBoot의 resoureces/static 파일 아래에 React build 결과 나온 파일을 넣어 통합 배포를 하고 있었습니다.

이때는 Swagger가 잘 나와서 문제가 없었는데 nginx를 통한 통합 배포를 하며 오류가 발생했습니다.

현재 상황은

Nginx에 프론트 빌드 파일을 올려 배포하고 nginx의 proxy_pass 설정을 통해 같은 인스턴스의 SpringBoot로 /api 요청이 들어오면 http://localhost:8080/api 로 보내주는 설정을 해두고 있었습니다.

location /api/ {
    proxy_pass <http://localhost:8080/api/>;
    proxy_http_version 1.1;
    proxy_set_header Host $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;
  }

문제 원인

Swagger 화면을 보여주기 위한 nginx proxy_pass 설정이 안되어 있기 때문이였습니다.

1. /swagger-ui 프록시 설정
2. /api-docs 프록시 미설정

문제 해결 과정

그런데 Swagger 화면을 보여주기 위한 라우팅은 /swagger-ui/index.html 이였습니다.

그래서 nginx 설정 파일에 다음 proxy_pass 설정을 하고 nginx를 다시 시작했습니다.

location /swagger-ui/ {
    proxy_pass <http://localhost:8080/swagger-ui/>;
    proxy_http_version 1.1;
    proxy_set_header Host $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;
  }

그렇게 하니 swagger-ui 화면으로 잘 이동은 되지만

No API definition Provided.

No API definition provided 에러가 나왔습니다.

이 에러가 왜 뜬지 백엔드 팀원에게 물어보니 Swagger API를 가져오는 거는 다른 경로이기 때문에 네트워크 탭을 보고 그것을 추가해줘야 한다고 했습니다.

그래서 네트워크 탭을 확인해보니

네트워크 탭

/api-docs 로 가는 요청이 있었습니다.

다른 블로그에서는 /v3/api-docs 라 하길래 그것을 추가해도 안되길래 네트워크 탭을 확인해보니 저는 /api-docs 여서 이걸 proxy_pass 설정해줬습니다.

location /api-docs {
    proxy_pass <http://localhost:8080/api-docs>;
    proxy_http_version 1.1;
  }

이렇게 하니 스웨거 화면이 잘 떴습니다!