elastic beanstalkでデプロイした環境にhttpsの設定をしたが、「このサイトにアクセスできません」となる

前提・実現したいこと

elastic beanstalkでデプロイした環境をhttpsを設定したい

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

elastic beanstalkでデプロイした環境をhttps化したいのですが画像のようになってしまい、正常に表示されません

該当のソースコード

securelistener-clb.config

yaml
1option_settings:
2  aws:elb:listener:443:
3    SSLCertificateId: 証明書のarn
4    ListenerProtocol: HTTPS
5    InstancePort: 80
6    InstanceProtocol: HTTP
7  aws:elb:listener:
8    ListenerEnabled: false

試したこと

ロードバランサーの設定の見直し

route53のレコード再設定

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

ドメインはroute53で取得しています。
タイプAレコードのルーティング先をelastic beanstalkで作成したロードバランサーのDNSアドレスにしています。

証明書はCertificate Managerで取得しています。
ドメイン名　*.hoge.com
追加の名前　hoge.com
の形で証明書を取得しました。

ロードバランサーのタイプはClassic Load Balancerです。

追記
セキュリティグループの設定はこのようになっています。

追記
https://を明示的につけることで「この接続ではプライバシーが保護されません」というページが表示されました。接続してみると証明書は(無効)となっており、cssやjsなどは読み込めませんでした。
Route53のレコード少しを修正したところ証明書が有効になり「このサイトへの接続は完全には保護されていません」となりました。

yu_1985

2020/08/30 12:37

ブラウザではちゃんとwww〜でアクセスしてますか？

bigbox267

2020/08/30 13:12

付けましたが変わらなかったです。

yu_1985

2020/08/30 13:30

貼っているRoute53のレコードはwwwのものですが、何もつけていない場合のものも設定しておいたほうが賢明です。あと、httpでのアクセスを許可していないようですが、httpでアクセスしたりしてませんか？明示的にhttpsでアクセスしないと接続できないかも。

bigbox267

2020/08/30 13:55

https://を明示的につけることで「この接続ではプライバシーが保護されません」というページが表示されました。接続してみると証明書は(無効)となっており、cssやjsなどは読み込めませんでした。

yu_1985

2020/08/30 15:32

> Route53のレコード少しを修正したところ何をどう修正したのか追記してください。また、キャッシュを消したりスーパーリロード(Ctrl/Cmd+Shift+R)したりするとどうなりますか？

行動規範の内容に同意します

回答1件

自己解決

結論としてはyu_1985さんが仰っていたようにhttps://と明示的に記載することで表示されました。

最終的に行ったこととしてはアプリケーションロードバランサーを使用したElastic Beanstalk環境を再度構築し

https://aws.amazon.com/jp/premiumsupport/knowledge-center/elastic-beanstalk-https-configuration/

こちらのサイトの

https-reencrypt-alb.config
https-lbsecuritygroup.config(vpc-#######部分を自分のEC2のVPC IDに書き換え)
https-backendsecurity.config

この3つのファイルを.ebextensionsファイルの直下に作成

https://github.com/awsdocs/elastic-beanstalk-samples/blob/master/configuration-files/aws-provided/resource-configuration/alb-http-to-https-redirection.config

こちらのサイトの

alb-http-to-https-redirection.config

このファイルを.ebextensionsファイルの直下に作成

下記のファイルは記載されているサイトは再度見つけることができなかった

こちらは恐らく必要ないが作成してあった

yaml
1###################################################################################################
2####
3#### HTTPS redirection configuration for AL2 PHP platforms that use NGINX
4#### This will simply redirect HTTP requests to the 443 listener on the ELB
5####  
6#### HTTPS redirection for all HTTP requests, unless they come from the ELB healthchecker.
7#### Note that this does not require a rewrite of the default EB NGINX .conf file.
8####
9###################################################################################################
10
11files:
12   "/etc/nginx/conf.d/elasticbeanstalk/https_redirect.conf":
13     owner: root
14     group: root
15     mode: "000644"
16     content: |
17       set $redirect 0;
18       if ($http_x_forwarded_proto != "https") {
19         set $redirect 1;
20       }
21       if ($http_user_agent ~* "ELB-HealthChecker") {
22         set $redirect 0;
23       }
24       if ($redirect = 1) {
25         return 301 https://google.com;
26       }