CloudFrontでAPI Gatewayをオリジンに指定する場合の注意

はじめに

CloudFront経由でAPI Gatewayを叩いてみたくなったので叩きました。
その際のつまづきをメモしておきます。

1.HOSTヘッダーをオリジンAPI Gatewayにリクエストしてエラー

エラー内容

< HTTP/1.1 403 Forbidden
~（略）~
{"message":"Forbidden"}

ステータス403で上記レスポンスが返却されました。

エラー原因

↑記事でも詳しくまとめられていますが、API Gatewayがオリジンの場合、Origin Request PolicyでHostをオリジンへリクエストするよう設定すると、このエラーが発生するようです。

CloudFrontの設定画面でも、API GatewayへのOrigin Request PolicyはAllViewerExceptHostHeader（HOSTヘッダー以外をオリジンへリクエストするOrigin Request Policy）が推奨されています。

2.オリジンパスとオリジンへのリスエストパスの関係を誤解してエラー

エラー内容

< HTTP/1.1 403 Forbidden
~（略）~
{"message":"Missing Authentication Token"}

エラー原因

CloudFrontはパスパターンを確認した後、そのパス部分をすべて含むリクエストをオリジンに送信する仕様でした。（そりゃそうか）

パスパターン設定とcloudfrontからオリジンへのリクエストパスの関係は以下の通りとなります。

パスパターン設定

リクエストパス

// デフォルトパスパターンに一致するケース
https://XXXXX.cloudfront.net/aaa
  → 〇：https://expressEC2instace/aaa // 想定通りの挙動

// パスパターン	/api/*　に一致するケース
https://XXXXX.cloudfront.net/api/example
    // なんとなくパスパターン以降がパスとなると想定していた
  → ☓：https://apigateway_dev/example
    // オリジンへはパスパターン込みでリクエストされる
  → 〇：https://apigateway_dev/api/example

つまり、API Gatewayのメソッドを以下のように作成する必要があります。

API Gatewayのパス設計がCloudFrontのパスパターンを考慮しないといけないのはなんか微妙ですね・・・

おわりに

単純なエラーだったので良かったですが、API Gateway周りは微妙に不親切なことが多いように思います。
これからも触れる機会を作っていき、慣れていきたいです。

また、見聞きしたことのあるようなよくある構成でも、実際にやってみないと分からないことは多くあると強く思いました。
少しでも気になったら手を動かす癖がつけばいいなと思います。