ERR_SSL_PROTOCOL_ERROR が表示されてしまう

Question

前提・実現したいこと

現在、Ubuntu 18.10でnginxを動かしています。
お名前.com、MyDNS、Let's Encryptで外部からドメイン名でhttpsでのアクセスができています。

今回、Webカメラを繋げて、mjpg-streamerを使って外部からでもグッピーの水槽の様子を見られるようにしたいと思っております。
現在、https://○○○.○○○.○○○.○○○:○○○○（LAN内でのipとmjpg-streamerのポート番号）/?action=stream を入力すると、ストリーミングで見ることができています。

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

しかし、https://○○○.○○:○○○○（ドメイン名とmjpg-streamerのポート番号）/?action=streamと入力するとchromeのブラウザで

このような画面となってしまって、表示ができません。

最近、linuxを学び始めて、Webサーバを立てるにも様々なサイトを見よう見まねでやってきたくらいなので、知識が乏しいです。

皆様のお力をお貸しください。よろしくお願いいたします。

補足

2019/6/9 14:32
補足1
取得した証明書とドメイン名は合っていると思います。アクセスしようとしているドイメン名も塗りつぶしたドメイン名と同じです。

補足2
しかし、「https://（ドメイン名）:アプリのポート」でアクセスしようとするとこのような表示になります。
赤く塗りつぶしたところは同じドメイン名が表示されています。

2019/6/10 11:37
補足3
リバースプロキシを設定した後
![

2019/6/10 13:43
補足4
リクエストパラメータ

2019/6/10 20:36
補足5
mjpg-streamerの起動コマンド
この.shファイルに実行権限を付けて起動しています。
最後の-bは付けたり付けなかったり

Comments

[CHERRY]

nginx のログには、どのようなメッセージが記録されているでしょうか？

[filu]

すみません、nginxの設定が悪いのか、「https://ドメイン名:アプリのポート」でアクセスするとaccess.logにもerror.logにもログが残らないです...

[scsi]

Nginxの設定を見直してログを出るようにしてください。

[filu]

すみません、nginx.confのhttpモジュールのところに
##
# Logging Settings
##

log_format main '$remote_addr - $remote_user [$time_local] '
'"$request" $status $body_bytes_sent '
'"$http_referer" "$http_user_agent" "$http_x_forwarded_for"';

# $remote_addr : クライアントのIPアドレス
# $remote_user : クライアントのユーザ名
# $time_local : アクセス日時
# $request : httpの要求URI
# $status : httpのステータス
# $body_bytes_sent: 送信バイト数
# $http_referer : リファラーURL（遷移元URL）
# $http_user_agent: ユーザエージェント情報（ブラウザ名・バージョン等）

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

このような記述をしているのですが、ポートを指定していない時はログがでますが、
ポートを指定するとログが表示されません
無知ですみません、どのようにしたら、すべてのアクセスログが取れるのでしょうか？

[scsi]

nginxを経由しないでアクセスしているということですね。nginxにリバプロの設定をする必要があります

[filu]

nginxのconfで、443をlistenしているserverの間に

location /guppy/ {
access_log /var/log/nginx/guppy-access.log main;
error_log /var/log/nginx/guppy-error.log info;
rewrite_log on;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_redirect off;

proxy_pass http://127.0.0.1:23236;
}

このような記述を追加しました。
https:（ドメイン名）/guppy/
でアクセスをすると、一応、mjpg-streamerに接続できている？みたいで、補足③の画像のような画面がでてきます。

ログですが、
（DNS？ゲートウェイ？ルータのIP） - - [10/Jun/2019:11:08:54 +0900] "GET /guppy/ HTTP/2.0" 400 40 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36" "-" "-"

このようなログがguppy-access.logに出力されます。

[Umeeeh]

400 エラーというのは mjpg-streamer のエラーです。mjpg-streamer のログにはエラーはでてませんか？ あと、400エラーになる際のリクエストパラメータを教えてください。

[filu]

リクエストパラメータというのは補足4に追記した内容で良いでしょうか？

mjpg-streamerのログを取る方法を現在探しているので、そちらは少しお待ちください。

[Umeeeh]

https://ドメイン名/guppy/?action=stream だとどうなりますか？ ソースコードを見た感じ、リクエストパラメータが不正な場合に 400 エラーが出るようです。（間違ってるかもですが…）

[scsi]

mjpg-streamerの起動コマンドを見せてください

[scsi]

いや、起動コマンドは関係なさそうか。

[scsi]

関係あるかわかりませんが proxy_redirect off; を削除した場合どうなるでしょうか。

Answer 1

nginxの設定が悪いのか、「https://ドメイン名:アプリのポート」でアクセスするとaccess.logにもerror.logにもログが残らないです...

アプリのポートというのは、mjpg-streamer のポートのことでしょうか？

mjpg-streamer を確認してみたところ、http://192.168.10.10:8080 のように mjpg-streamer を起動したホストの IP アドレスと mjpg-streamer の設定で指定したポートを使って、 Webブラウザでアクセスできるのですね。

上記のポートが、mjpg-streamer のポートであれば、 nginx で、mjpg-streamer に中継するような設定をしていないのであれば、nginx 経由でのアクセスはできません。

ストリーミングをSSL通信にする の例のように、nginx で、リバースプロキシを設定して、アクセスする必要があるのではないでしょうか。

Answer 2

証明書を取得したドメインとhttpsでアクセスするドメインは一致していますか？

Comments

[filu]

ご回答ありがとうございます。
補足として写真追加しました。
取得したドメイン名とアクセスするドイメンは同じだと思います。

Answer 3

皆さん、初めての投稿で色々情報不足な投稿となってしまいご迷惑をお掛けしてしまいました。。。

色々、ご意見いただきながら、リバースプロキシを設定し、色々試してみました。

https://github.com/jacksonliam/mjpg-streamer/issues/95

https://community.octoprint.org/t/reverse-proxy-configuration-examples/1107

ここの2つのサイトを見つけ、自分もupstreamというものを記述してみたところ、
無事、mjpg-streamからの映像を表示させることができました。

nginxのconfで変更を加えた点は次の通りです。
・httpモジュールの間に

upstream "mjpg-streamer" {
        server 127.0.0.1:23236;
}

を記述
・443をlistenしているserverモジュールの間に

location /guppy/ {
    access_log /var/log/nginx/guppy-access.log main;
    error_log /var/log/nginx/guppy-error.log debug;
    rewrite_log on;
    proxy_set_header    Host $host;
    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_pass  http://mjpg-streamer/;
    }

を記述

です。proxy_redirectは参考ページ先に書いてなかったので削除しました。
rewriteを記述したり、locationの正規表現？のところも色々変えてみたりしましたが、結局、upstreamでの記述であっけなく表示することができました。

私自身、nginxやhttpのやりとり自体の知識と理解力があまりにも乏しいため、なぜこれで解決をしたのか、なぜ今までではダメだったのかが理解できていません。。。

もし、わかる方がおりましたら、ご教示いただけるととても嬉しいです。。。
一応、問題の解決はしましたので、解決済みへと変更します。

Comments

[Umeeeh]

良かったですね。なんとなく分かりました。

proxy_pass の引数のURLは、末尾に「/」がなかったのが原因で、末尾に「/」をつければ良かったんだと思います。こうです→ 'proxy_pass https://127.0.0.1:23236/`

URLの末尾に `/` がない場合は、https://127.0.0.1:23236/guppy?action=stream というふうに 転送されるので、「No File extension found」 というエラーになったんだと思います。

mjpg-stream は URLの最後の ファイル名が 指定されない場合は「index.html」とみなします。それ以外の場合は ファイル名に「.」があるかチェックして、「.」がないと 「No File extension found」 というエラーになります。「/guppy」の部分がファイル名と認識され、かつ「.」がないので このエラーが出たとすれば 辻褄が合います。

[filu]

ご返信が遅くなってしまい、すみません＞＜

proxy_pass https:127.0.0.1:23236/
だと502 Bad Gatewayと表示されましたが、
proxy_pass http:127.0.0.1:23236/
だとちゃんと表示されました！！

なるほど... そのような動作だから引っ掛かっていたのですね、理解できました！
ありがとうございます！
私も皆さんのように問題の原因を追えられるようこれからも勉強していきます！