SSL化したサイトにアクセスすると502 Bad Gatewayと出る

Question

AWSでSSL化したWEBサイトにアクセスすると502 Bad Gatewayとでてしまうのでこのエラーを解消したいです。
ヘルスチェックは**Health checks failed with these codes: [502]**と出ました。
SSL化はここを参考にしました。

試したこと
502のエラーに関して調べたらALBターゲットの設定に問題があるらしくALBのログやターゲットグループの設定を確認してみましたが、問題はなさそう見受けられました。

①ALBのターゲットグループ設定
](066d0ede800e181be3a93e5ca64b3ff5.png)

②ALBの設定

③ALBのログ

④nginx.conf
nginxが80番ポートの場合ALBのリスナーも80ポートにするべきのかも？

 server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /home/webapp/laravel/public;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
            try_files $uri $uri/ /index.php?$query_string;
        }

        location ~ .(css|gif|ico|jpeg|jpg|js|pdf|png|svg|swf|zip|eot|otf|ttf|woff|woff2) {
            expires 1y;
            access_log off;
            log_not_found off;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

⑤EC2のインバウンドルール

その他要望があれば追記します
どうかよろしくお願いします。

追記
新しいターゲットグループ（laravel-tg）ロードバランサーが設定されない。

unusedとなっている

Answer 1

結論から言うと、ターゲットグループの設定が誤っています。

以下にその根拠を書きます。

Health checks failed with these codes: [502]

少なくともALBのターゲットグループに対するヘルスチェックに失敗してると思われます。
設定を見るに、ターゲットグループに設定したインスタンスに対しては、/ に対して80番ポートで
ALBのログはALBに対するリクエストのログなので、見るのはそこではありません。
確認すべきは配下のインスタンスが/でリクエストを受け付けることができているかです。
nginxのログとLaravelのログを確認してください。
ただ、今回の問題の原因はそこよりも前なのでその旨は以下に記載します。

nginxが80番ポートの場合ALBのリスナーも80ポートにするべきのかも？

ALBがリッスンするポートとはALBが外部からリクエストを受け付けるポートであり、nginxが80番ポートならターゲットグループで80番ポートに対してリクエストを送ればいいだけなので、双方の設定を揃える必要はありません。

ただ、nginxで80番ポートをリッスンしているのに、ターゲットグループのポートを443にしています。
EC2側で443ポートをリッスンしていないのにEC2の443ポートにリクエストを送ったら当然エラーになります。
そしてヘルスチェックをTraffic Portにしているので、ターゲットグループで設定したポートと同じポートにヘルスチェックを送ってしまっているためにヘルスチェックが通っていません。
※Traffic Portに設定しないで、ヘルスチェックは別のポートに別のリクエストを送るように設定することもできます。
恐らく、Targetsに設定したインスタンスはUnhealthyになっているのでは？

対処としては、ターゲットグループのポートをHTTP:80に設定してください。
※ちなみに、よく「EC2インスタンス側でHTTPSの設定を〜」と書いているQiitaの記事やブログが出てきますが、そうしなければいけない明確な理由がない限りその必要はありません。
HTTPS化をしたいのであればACMを使ってALBに証明書を設定すれば十分で、ALB→インスタンス間の通信はAWS内部の通信なので、そこに関しては基本的にHTTPで問題ありません。

あと、EC2のHTTP、HTTPSのポートを全IPに対して開放していますが、HTTPに関しては最終的にはALBからの通信が通れば十分です。
なので、ALBのセキュリティグループからの接続を許可するよう設定しておくといいでしょう。
（ALBを通さないで直接アクセスして動作確認したい、とかであればそれに加えて自分の接続元IPぐらいは許可しておいてもいいとは思います。）
また、前述の通りそもそもEC2側でHTTPSを使っていないのであればHTTPSのポートの許可は必要ありません。

Comments

[Tikka123456]

とても丁寧な回答ありがとうございます。初歩的な質問で申し訳ないですがターゲットグループの設定に関しては作り直した方が良いでしょうか？ポート番号等を再設定する場所が見当たらないので。

[Tikka123456]

EC2のインバウンドルールに関して情報が古かったです。新しいのと差し替えました。

[yu_1985]

ターゲットグループに関しては作り直してもいいですが、インスタンスを登録する時にポートを指定できるのでそれでもできます。
もっともターゲットグループはすぐに作れるので、作り直したほうが明快だとは思います。

また、ターゲットグループでEC2の80番ポートを対象にリクエストを送るのであれば、EC2のセキュリティグループで443を許可する必要はないです。

[Tikka123456]

返信ありがとうございます。502エラーは無くなりページが表示されましたが保護されていない通信と出てしまいます。