個人開発したアプリで、CloudFrontを経由してhttpsでアクセスできるようにインフラを構築したのですが、通信に問題が発生していました。
AWSで問題が起きた場合の調査は不慣れでだいぶ時間かかりましたが、苦手ということはそれが解決できるようになれば一気に成長するチャンスでもあるので気合い入れて取り組みました。
インフラ構成
Route 53で独自ドメインを取得済みで、ドメインをCloudFrontに向けてCloudFront経由でS3に置いてある静的ファイルにアクセスし、S3からバックエンドのECSにAPIを呼び出す。
問題
httpでアプリにアクセスすると想定通りページが表示されてAPIからデータも取得できるが、httpsでアクセスすると静的ページは表示されるがAPIと接続できない。
トラブルシューティング
CloudFrontの設定に問題があるかと推測して、CloudFrontに関する記事を調べたり設定をひとつひとつ確認しましたが特に手がかりになるものはありませんでした。
そこでChromeの検証ツールでネットワークタブを確認してみるとhttpsステータスの項目にblocked:mixed-contentの表示がありました。
初めて見るステータスだったのでとりあえずググってみると以下の記事が見つかりました。
記事によると混合コンテンツ(mixed-content)とはhttpsのページ内にhttpのサブリソースが読み込まれている状態とのこと。
なるほど、確かに現状自分のアプリの環境ではS3からECSへのAPIの呼び出しはhttpでリクエスト送っていました。
まだこれが原因か断言できませんが、もしこれが原因ならhttpでアプリにアクセスした時はAPIと接続できていたのも納得です。
対応策
S3からECSへAPIを呼び出すリクエストもhttpsで送れるようにする。
そのためにELBをS3とECSの間に置いて、S3からはhttpsでELBにリクエストを送るようにする。
上手くいかないかもしれませんが、今のところ他に手がかりがないのでまずはELBから試してみます。
これでまだ動かないようなら別の原因を調査します。
ロードバランサー周りはあまり触ったことがないので、これを機会に対応できる範囲広げていきます。
