CloudFrontの多段構成を試みたところ、うまくいきませんでした。どうやらCloudFrontには制限が設けられているようです。
やりたかったこと
- REST APIのアプリケーションと、静的なWebサイトを同じドメインで提供
- アプリケーションはECSにあり、ELBを通してアクセス
- 静的WebサイトはAWS Amplify Consoleにホスティング
- それぞれをCloudFrontのオリジンとして登録し、パスで振り分ける
403エラーが返ってきてしまう
Amplify Consoleに対するすべてのリクエストが403エラーになってしまいます。
403 ERROR
The request could not be satisfied.
Bad request. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
AWSのドキュメントを参照しても、原因に思い当たるところがありません。
https://aws.amazon.com/jp/premiumsupport/knowledge-center/resolve-cloudfront-bad-request-error/
原因はCloudFrontのドキュメント外の仕様だった
CloudFrontはオリジンに対するリクエストの Via ヘッダーに次のような値を設定します。
Via: 2.0 f32d93db98d9cf41d6a5114f4ba1xyz.cloudfront.net (CloudFront)
この形式のヘッダーがリクエストに含まれていると、CloudFrontは前述のような403エラーを返します。
おそらく、CloudFrontをCloudFrontのオリジンとして指定されるのを防ぐためにこのような仕様になっているのでしょう。
Amplify Consoleは内部的にCloudFrontを通して提供されている
Amplify Consoleのエンドポイントは、内部的にCloudFrontが使われています。
当初にやりたかったサイトの振り分けがエラーになってしまうのはこれが原因だったようです。
ヘッダーを改変すれば制限を回避できる
仕様を逆手に取り、 Via ヘッダーを削除したり別の値を指定すればワークアラウンドとして機能しそうです。
実際には試していませんが、どうしても必要な場合は検討してみてはどうでしょうか。