はじめに:
CloudFrontとALB間で502エラーが出てWebページのURLにアクセスしても、正しく表示されなかったことについて書きたいと思います。
問題の説明:
- AWSのネットワーク構成は、Route53でドメイン取得して、CloudFront(CDN)→ALB(負荷分散、プロキシ)→ECS Fargateコンテナ(フロント、バックエンド)と接続する構成
- ブラウザでALBのDNS名にアクセスすると、アプリのトップページは表示される
- Route53で登録したドメインをCloudFrontのカスタムドメインに設定
- Route53でALBのDNS名にルーティングしたalb.***.comというサブドメインをAレコードで登録
これらの状況で登録したドメインにブラウザでアクセスすると以下のように502エラーが発生
エラーメッセージから、CloudFront周りがうまく行っていないんだろうなぁということが推察されました。
原因と解決方法：
色々と調べる中、AWS公式の502エラーの説明を見ると
- CloudFrontのオリジンに正しくALBのドメインが当たっていない
- ACM証明書のドメインとCloudFrontのドメインが一致していない
- ACM証明書がALBに適切に当たっていない
- ACM証明書の期限が切れている
などが考えられることが書かれていました。
１つずつ要因を探っていくと、結果的にALBにホストドメインの証明書が正しく当たっていなかったことが原因でした。
サブドメインの証明書が当たっているだけで、肝心のホストドメインの証明書がついていませんでした。
ALBに複数ドメインを設定する場合は、デフォルト証明書以外にもSNIのリスナー証明書に追加する必要がありました。
ただホストとサブ一緒に発行していれば、見落とすことはなかったので、基本的にホストとサブは同じ証明書で発行するのが良いかと思いました。
参考資料: