[nginx / swagger ] swagger-ui/index.css 404 not found

1. 현상

서버에 배포한 뒤 swagger-ui/index.html 을 불렀는데 index.html과 그 밑의 꾸러미들이 주르륵 404가 뜨는 것을 발견

Spring Security도 사용을 안했는데 걸릴 것이 없는데.. 하고 로컬에서 테스트를 해보니 잘 된다

해서 서버 쪽에 이슈가 있다라고 생각했다

 

외부 게이트웨이다보니 web과 was 서버를 따로 띄워놓고 web 서버에 ssl 및 nginx를 설치하였고

was로 패싱시켜주도록 만들어놨다

 

was 쪽 로그를 살펴보니 아예 들어오지도 않고 있는 것을 발견

nginx error.log를 살펴보니 이런 에러가 나있었다

2023/06/26 16:16:51 [error] 72043#0: *8 open() "/app/docroot/nginx/swagger-ui/swagger-ui.css" failed (2: No such file or directory), client: 210.211.88.202, server: localhost, request: "GET /swagger-ui/swagger-ui.css HTTP/1.1", host: "open-api-dev.gtws.co.kr", referrer: "https://open-api-dev.gtws.co.kr/swagger-ui/index.html"
2023/06/26 16:16:51 [error] 72043#0: *12 open() "/app/docroot/nginx/swagger-ui/swagger-ui-bundle.js" failed (2: No such file or directory), client: 210.211.88.202, server: localhost, request: "GET /swagger-ui/swagger-ui-bundle.js HTTP/1.1", host: "open-api-dev.gtws.co.kr", referrer: "https://open-api-dev.gtws.co.kr/swagger-ui/index.html"
2023/06/26 16:16:51 [error] 72043#0: *11 open() "/app/docroot/nginx/swagger-ui/index.css" failed (2: No such file or directory), client: 210.211.88.202, server: localhost, request: "GET /swagger-ui/index.css HTTP/1.1", host: "open-api-dev.gtws.co.kr", referrer: "https://open-api-dev.gtws.co.kr/swagger-ui/index.html"
2023/06/26 16:16:51 [error] 72043#0: *13 open() "/app/docroot/nginx/swagger-ui/swagger-initializer.js" failed (2: No such file or directory), client: 210.211.88.202, server: localhost, request: "GET /swagger-ui/swagger-initializer.js HTTP/1.1", host: "open-api-dev.gtws.co.kr", referrer: "https://open-api-dev.gtws.co.kr/swagger-ui/index.html"
2023/06/26 16:16:51 [error] 72043#0: *14 open() "/app/docroot/nginx/swagger-ui/swagger-ui-standalone-preset.js" failed (2: No such file or directory), client: 210.211.88.202, server: localhost, request: "GET /swagger-ui/swagger-ui-standalone-preset.js HTTP/1.1", host: "open-api-dev.gtws.co.kr", referrer: "https://open-api-dev.gtws.co.kr/swagger-ui/index.html"

로그를 보면 No such file or directory가 있었는데 이상한 url prefix가 달려있어서 이것부터 찾아보기로 했다

 

 

2. 원인

ssl 설치 후 443 https로 보냈을때의 에러라 nginx/conf/extra/nginx-ssl.conf 를 살펴보았다

server {
    listen       443 ssl;
    server_name  localhost;
    root         /app/docroot/nginx;
  
...

    location /api {
        proxy_pass http://backend;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
    }

    location / {
        index startindex.html; 

        limit_except GET POST HEAD OPTIONS {
            deny all;
        }
    }

    location ~* ^.+\.(jpg|jpeg|gif|png|swf|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|txt|tar|mid|midi|wav|bmp|rtf|mov)$ {
        expires      4y;
    }

    location ~* ^.+\.(css|js)$ {
        expires      30d;
    }

    error_page  400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 422 423 424 426 /error.html;
    error_page  500 501 502 503 504 505 506 507 508 510  /error.html;

    location = /error.html {
        root   /app/docroot/nginx/errors; }

    location = /favicon.ico {
        log_not_found  off;
    }

    location = /nginx_status {
        stub_status on;
        access_log  off;
        allow 10.0.0.0/8;
        allow 127.0.0.1;
        deny all;
     }
}

root는 기본적으로 nginx에서 설정을 한 root를 따라갔고

swagger-ui 라는 prefix는 /api에 못들어가서 이렇게 된 듯했다

 

 

3. 해결

- default url prefix 변경하기

location /api {
        proxy_pass http://backend;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
    }
    
    
->
location / {
        proxy_pass http://backend;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
    }

해서 location 의 /api를 기본인 default로 변경하고 기존 / 설정을 지워주었다

 

 

- 스웨거 필터링 걸기

location ~ ^/(swagger|webjars|configuration|swagger-resources|v2|v3|csrf) {
        proxy_pass http://backend;
        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;
    }

 

 

static 파일이나 swagger에 관련된 것 (index.html 안의 css, js 등)을 위한 필터링도 추가해준다

 

 

 

잘 나오는 것 확인 !!