Nginx 역방향 프록시가 있는 React 앱에 /swagger 가 표시되지 않습니다. /redoc

Question

그래서 저는 /swagger/에서 작동하도록 Swagger를 설정하려고 노력해 왔으며 도메인으로 전환하기 전까지는 잘 작동했습니다. 나는 nginx에 대한 경험이 없으며 역방향 프록시입니다. 누군가 도움을 줄 수 있다면 내 설정을 공유하겠습니다. 실제로 페이지가 열리지만 모두 흰색입니다. /redoc/(Redis)도 마찬가지입니다.

Nginx.conf

events {
worker_connections 768;
multi_accept       on;
}

http {

large_client_header_buffers 16 5120k;
fastcgi_read_timeout 900;
proxy_read_timeout 900;   
proxy_connect_timeout 900;
proxy_send_timeout 900;    

sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
server_tokens off;

proxy_buffer_size   128k;
proxy_buffers   4 256k;
proxy_busy_buffers_size   256k;

include /etc/nginx/mime.types;
default_type application/octet-stream;

ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;

access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;

gzip on;

proxy_http_version      1.1;
proxy_set_header        Upgrade $http_upgrade;
proxy_set_header        Connection "upgrade";
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        Host $http_host;
proxy_intercept_errors  on;

server {

    client_max_body_size 250M;
    listen 80;
    server_name mysite.com;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

        location / {
            return 301 https://$host$request_uri;
    }
}

server {

    client_max_body_size 250M;
    listen 443 ssl;
    server_name mysite.com;

    ssl_certificate /etc/letsencrypt/live/mysite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mysite.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://mysite:3000/;
        proxy_redirect off;
        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        Host $http_host;
        proxy_intercept_errors  on;
    }

    location /ht/ {
        proxy_pass http://mysite:8000/ht/;
        proxy_redirect off;
        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        Host $http_host;
        proxy_intercept_errors  on;
    }

    location /swagger/ {
        proxy_pass http://mysite:8000/swagger/;
        proxy_redirect off;
        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        Host $http_host;
        proxy_intercept_errors  on;
    }

예를 들어 /ht/(상태 확인)는 정상적으로 작동합니다.

백엔드의 urls.py:

urlpatterns = [ 
url(r'^swagger/$', schema_view.with_ui('swagger', cache_timeout=0), name='schema- 
swagger-ui')]

다른 파일이 필요하면 알려주십시오. 기꺼이 공유하겠습니다. 민감한 데이터를 mysite.com과 같은 더미 데이터로 대체합니다.

미리 감사드립니다!

편집: 네트워크 탭에서 모든 CSS, JS 파일에 대해 "이 앱을 실행하려면 Javascript를 활성화해야 합니다"라는 메시지가 표시되고 /redoc에도 동일하게 적용되며 콘솔 로그에도 "Uncaught SyntaxError: Unexpected"가 표시되는 것을 확인했습니다. JS 파일의 경우 토큰 '<'"입니다.

React 앱이라는 사실을 잊어버렸는데, 앱 자체는 잘 작동하고 있습니다. 백엔드는 Python/Django에 있습니다. 그래서 저는 /swagger/에서 작동하도록 Swagger를 설정하려고 노력해 왔으며 도메인으로 전환하기 전까지는 잘 작동했습니다. 나는 nginx에 대한 경험이 없으며 역방향 프록시입니다. 누군가 도움을 줄 수 있다면 내 설정을 공유하겠습니다. 실제로 페이지가 열리지만 모두 흰색입니다. /redoc/(Redis)도 마찬가지입니다.

Nginx.conf

events {
worker_connections 768;
multi_accept       on;
}

http {

large_client_header_buffers 16 5120k;
fastcgi_read_timeout 900;
proxy_read_timeout 900;   
proxy_connect_timeout 900;
proxy_send_timeout 900;    

sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
server_tokens off;

proxy_buffer_size   128k;
proxy_buffers   4 256k;
proxy_busy_buffers_size   256k;

include /etc/nginx/mime.types;
default_type application/octet-stream;

ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;

access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;

gzip on;

proxy_http_version      1.1;
proxy_set_header        Upgrade $http_upgrade;
proxy_set_header        Connection "upgrade";
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        Host $http_host;
proxy_intercept_errors  on;

server {

    client_max_body_size 250M;
    listen 80;
    server_name mysite.com;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

        location / {
            return 301 https://$host$request_uri;
    }
}

server {

    client_max_body_size 250M;
    listen 443 ssl;
    server_name mysite.com;

    ssl_certificate /etc/letsencrypt/live/mysite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mysite.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://mysite:3000/;
        proxy_redirect off;
        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        Host $http_host;
        proxy_intercept_errors  on;
    }

    location /ht/ {
        proxy_pass http://mysite:8000/ht/;
        proxy_redirect off;
        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        Host $http_host;
        proxy_intercept_errors  on;
    }

    location /swagger/ {
        proxy_pass http://mysite:8000/swagger/;
        proxy_redirect off;
        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        Host $http_host;
        proxy_intercept_errors  on;
    }

예를 들어 /ht/(상태 확인)는 정상적으로 작동합니다.

백엔드의 urls.py:

urlpatterns = [ 
url(r'^swagger/$', schema_view.with_ui('swagger', cache_timeout=0), name='schema- 
swagger-ui')]

다른 파일이 필요하면 알려주십시오. 기꺼이 공유하겠습니다. 민감한 데이터를 mysite.com과 같은 더미 데이터로 대체합니다.

미리 감사드립니다!

편집: 네트워크 탭에서 모든 CSS, JS 파일에 대해 "이 앱을 실행하려면 Javascript를 활성화해야 합니다"라는 메시지가 표시되고 /redoc에도 동일하게 적용되며 콘솔 로그에도 "Uncaught SyntaxError: Unexpected"가 표시되는 것을 확인했습니다. JS 파일의 경우 토큰 '<'"입니다.

React 앱이라는 사실을 잊어버렸는데, 앱 자체는 잘 작동하고 있습니다. 백엔드는 Python/Django에 있습니다.