CloudFrontとEC2のSSL通信

前提・実現したいこと

CloudFront(jsのビルド成果物デプロイ済み)とEC2(jarファイルをデプロイ済・独自のserviceファイルを作成し自動起動中)間の通信をSSL化したいです。
静的サイトのhttps化のみの場合cloudfrontでSSL化はできたのですが、
EC2側にhttp通信を送るとmixed contentエラーになります。

下記mixed contentエラーです。

polyfills.94daefd414b8355106ab.js:1 Mixed Content: The page at '{cloudFront発行のドメイン名}' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://{ec2エンドポイント}:8080/'. This request has been blocked; the content must be served over HTTPS.

なおエラーが発生した処理は、アプリ起動時のデータ全件取得のgetリクエストになります。

そこで質問なのですが

・EC2もSSL化する必要があるのでしょうか。
・その場合、手順はどのようなものになりますでしょうか。

よろしくお願いいたします。

maisumakun

2021/05/22 05:02

> その場合EC2側にhttp通信を送るとmixed content typeエラーになります。「mixed content」のエラーはどこに出たのですか？

hogemaTV

2021/05/22 05:24

情報が少なすぎました。申し訳ありません。 chromeの開発者モードで下記mixed contentエラーが出ております。 polyfills.94daefd414b8355106ab.js:1 Mixed Content: The page at '{cloudFront発行のドメイン名}' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://{ec2エンドポイント}:8080/'. This request has been blocked; the content must be served over HTTPS. なおエラーが発生した処理は、アプリ起動時のデータ全件取得のgetリクエストになります。

maisumakun

2021/05/22 05:56

えっと、「S3⇔EC2間で通信している」のではなく、「S3とEC2の出力を1つのHTMLに載せて、それをブラウザから見ている」という状況で間違いないですか？

hogemaTV

2021/05/22 06:05

はい、cloudfront発行のドメインにアクセスしブラウザから見ております。 SSLでセキュアにS3⇔EC2間http通信が最終目標ではありますが現状 S3→のところでブロックされているという認識です。 httpsではなくhttpならば通信できております(保護されていない通信と出てしまいますが)。

maisumakun

2021/05/22 06:07 編集

「S3⇔EC2間」というのはどのような通信なのですか？「ブラウザ-CloudFront-S3」と「ブラウザ-（CloudFront-）EC2」という2つの通信の組み合わせ、ではないのですか？

hogemaTV

2021/05/22 06:15

おっしゃる通り、S3-EC2間ではなくCloudFront-EC2間でした。修正いたします。