nginxでproxy_passを使って異なるポートへ転送できません。

Question

前提・実現したいこと

nginxの80ポートでまちうけしているあとに、ローカルの57575ポートへ転送させたい。
何か足りない情報等ございましたら追記させていただきますので、ご一報いただけますと幸いです。

発生している問題・エラーメッセージ

• 背景

pythonのbutterflyというアプリを導入。(57575ポートで動作するアプリ)
127.0.0.1:57575でアクセス可能（実際にアクセスして動作確認済み）

• 目的

全面にNginxをおいて、80ポートでまちうけてしていて、アクセスがあったときに127.0.0.1:57575へフォワードさせてアクセスさせたい。

• エラー（nginxをかましたとき　失敗時）

http://xxx.yyy.zzz.aaa/static/main.css?v=022df8d20581de36bf728c083bee7390（net::ERR_ABORTED 404 (Not Found)）

• nginxをかまさないでアクセスした場合（成功時）

http://xxx.yyy.zzz.aaa:57575/static/main.css?v=022df8d20581de36bf728c083bee7390

http://xxx.yyy.zzz.aaa
http://xxx.yyy.zzz.aaa:57575

URLにポートがあるかないかで、CSSやJavaScriptが読み込めずエラーとなり、利用ができなくなってしまっています。

該当のソースコード

nginxのロケーションディレクティブに proxy_pass を入れただけです。

location / {
            proxy_pass http://127.0.0.1:57575;
}

試したこと

butterfly起動時に port 指定で 57575 ではなく 80 を指定してあげればnginxをかますこともなく済みます。が、今後のことも考えnginxで80ポートから他ポートへ転送することができないかどうかを知りたいです。

補足情報（FW/ツールのバージョンなど）

環境
Ubuntu18.04
python3.6.0
フレームワーク butterfly
Nginx 1.14.0

Answer 1

githubのリポジトリにnginxの設定方法があるようなのでここが参考になると思います。

Butterfly with nginx reverse proxy and https · paradoxxxzero/butterfly Wiki

今の設定に追加でヘッダー系の設定を足せば動くのではないかと思います。

location /butterfly {

        proxy_pass http://127.0.0.1:57575;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header Origin "$scheme://$host";

        proxy_connect_timeout 7d;                                                                                                              
        proxy_send_timeout 7d;                                                                                                                 
        proxy_read_timeout 7d;
    }

Comments

[EzrealTrueshot]

ありがとうございます！
そんなページがあったのは知りませんでした。。。
夕方試させていただきます！

[EzrealTrueshot]

エラーが出て、利用できませんでした。
GET http://xxx.yyy.zzz.aaa/local.js net::ERR_ABORTED 404 (Not Found)
'ws://xxx.yyy.zzz.aaa/ws/session/c7cd1cac-081e-4371-8427-dd0d729c6519' failed: Error during WebSocket handshake: Unexpected response code: 404
WebSocket error

[EzrealTrueshot]

おさがわせいたしました。
try_files $uri $uri/ =404;

この設定をnginxから排除したら、無事につながりました。