CloudFrontにマルチオリジン設定するときに勘違いで詰まった話

3行で分かる概要

1. CloudFrontにS3とAPI Gatewayをマルチオリジンで設定して同じカスタムドメインにしようとした
2. 無限にmissing authentication tokenで怒られた
3. API Gatewayのリソース階層とCloudFrontのBehaviorのPath Patternが一致していないのが問題だった

本題

S3にフロントエンドのファイル群を置いて、CloudFrontを間に挟むよくある(?)形式
この際にページの一部コンテンツについては定期的に内容を更新したかったのでAPI経由で取るようにした
APIエンドポイントもWebページのカスタムドメインと同じドメインを使いたかったのでCloudFrontにマルチオリジン設定をして振り分けることにした

この設定をしようとしてmissing authentication tokenが返されるという典型的なミスにハマり、原因が分からず1週間以上詰まったという話

原因

当初、API Gatewaのリソースは下記のようにルートの直下にAPIエンドポイントを生やし、それをprodステージにデプロイしていた

その状態でOriginとBehaviorの設定は下記にしていた

で、https://hogedomain/api/endpointにアクセスしてmissing authentication tokenで怒られた
OriginDoaminName/OriginPathがBehaviorのPath Patternまで含めたURLにマッピングされると勘違いして、API GatewayのURLhttps://XXXXX.amazonaws.com/prod/endpointが、https://hogedomain/api/endpointで呼び出されると思っていたのが原因

実際にはhttps://XXXXX.amazonaws.com/prod/がhttps://hogedomain/にマッピングされるので上記ではアクセスできない

解決

API Gateway側のリソースにCloudFrontのPath Patternで設定したいパスを1階層掘ることで当初の意図通りhttps://hogedomain/api/endpointでAPI GatewayのURLが呼び出される