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

Question

前提・実現したいこと

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

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

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

該当のソースコード

securelistener-clb.config

option_settings:
  aws:elb:listener:443:
    SSLCertificateId: 証明書のarn
    ListenerProtocol: HTTPS
    InstancePort: 80
    InstanceProtocol: HTTP
  aws:elb:listener:
    ListenerEnabled: false

試したこと

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

route53のレコード再設定

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

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

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

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

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

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

Comments

[yu_1985]

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

[bigbox267]

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

[yu_1985]

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

[bigbox267]

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

[yu_1985]

> Route53のレコード少しを修正したところ

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

Answer 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ファイルの直下に作成

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

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

###################################################################################################
####
#### HTTPS redirection configuration for AL2 PHP platforms that use NGINX
#### This will simply redirect HTTP requests to the 443 listener on the ELB
####  
#### HTTPS redirection for all HTTP requests, unless they come from the ELB healthchecker.
#### Note that this does not require a rewrite of the default EB NGINX .conf file.
####
###################################################################################################

files:
   "/etc/nginx/conf.d/elasticbeanstalk/https_redirect.conf":
     owner: root
     group: root
     mode: "000644"
     content: |
       set $redirect 0;
       if ($http_x_forwarded_proto != "https") {
         set $redirect 1;
       }
       if ($http_user_agent ~* "ELB-HealthChecker") {
         set $redirect 0;
       }
       if ($redirect = 1) {
         return 301 https://google.com;
       }