3行で分かる概要
- CloudFrontにS3とAPI Gatewayをマルチオリジンで設定して同じカスタムドメインにしようとした
- 無限に
missing authentication token
で怒られた - 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が呼び出される