nginx reverse proxy 뒤의 앱 연결

[wiserain]

nginx reverse proxy 쪽의 nginx.conf 설정은 아래와 같습니다.

server {
    listen 443 ssl http2;
    server_name <%= domain.name %>;

    ssl on;
    ssl_certificate <%= domain.signed_cert_path %>;
    ssl_certificate_key <%= domain.key_path %>;

    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_session_cache shared:SSL:50m;
    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA;
    ssl_prefer_server_ciphers on;

    ssl_stapling on;
    ssl_stapling_verify on;
    ssl_trusted_certificate <%= domain.signed_cert_path %>;

    ssl_session_tickets on;

    ssl_dhparam <%= dhparam_path %>;

    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;

    # Prevent Nginx from leaking the first TLS config
    if ($host != $server_name) {
        return 444;
    }

    location / {
        return 301 https://$server_name/transmission/;
    }

    location ^~ /transmission {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        proxy_pass_header X-Transmission-Session-Id;
        add_header   Front-End-Https   on;

        location /transmission/rpc {
            proxy_pass <%= domain.upstream %>:9092;
        }

        location /transmission/web/ {
            proxy_pass <%= domain.upstream %>:9092;
        }

        location /transmission/upload {
            proxy_pass <%= domain.upstream %>:9092;
        }

#       location /transmission/web/style/ {
#           alias /usr/share/transmission/web/style/;
#       }
#
#       location /transmission/web/javascript/ {
#           alias /usr/share/transmission/web/javascript/;
#       }
#
#       location /transmission/web/images/ {
#           alias /usr/share/transmission/web/images/;
#       }

        location /transmission {
          return 301 https://$server_name/transmission/web;
        }
    }

    location /flexget {
        proxy_pass <%= domain.upstream %>:5051;
        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;
    }

    location /webui {
        proxy_pass <%= domain.upstream %>:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

location에 따라서 root /는 transmission rpc로 /flexget은 flexget의 webui로 마지막으로 /webui를 통해서 연결하고 싶습니다.

서브도메인 루트인 경우는 잘 되는데 제가 하고자하는 바와 같이 location 아래에 붙으면 아래와 같은 404 페이지가 호출되고 도메인 루트로 리디렉션되면서 transmission rpc로 빠집니다. (아이디 비번을 물어봄)

제가 구글링을 해보니 nuxt publicpath가 앱 소스에서 root로 잡혀있거나 기본값으로 잡혀있는게 아닌가 싶습니다. 다른 socket.io 관련 서버 설정이 문제일 수도 있구요.

혹시 이 부분에 대해서 해결 방법을 아신다면 조언 부탁드릴게요.

[tarpha]

nuxtconfig.js 안의 baseUrl 설정 부분이 있습니다.

baseUrl: 'http://localhost:' + (process.env.PORT || 3000),

nuxt publicpath 문제면 여기에 /webui를 붙이면 될 거 같네요.

.env 안에 WS_URL도 뒤에 /webui를 붙여야 할 것 같네요.

[wiserain]

말씀하신 두 가지에 axios.js에도 비슷한게 보여서 해봤는데 다 안되네요. 정 안되면 sub domain root로 빼서 써봐야겠습니다.