ENGINEERING ARTICLE
CloudFrontでS3とAPI Gatewayを同一ドメインから配信する方法
この記事は約3分で読めます
こんにちは、 @Manabu です。
静的サイトからAPI Gatewayを呼び出す場合、API GatewayのURLを直接JavaScriptへ記載する方法があります。
ただ、CloudFrontのビヘイビアを利用すれば、通常のページとAPIを同じドメインから公開することができます。
今回は、通常のページはS3、/api/配下はAPI Gatewayへ転送する方法について紹介します。
この記事は、以下のような方におすすめです。
こんな方におすすめ
- 静的サイトからAPI Gatewayを呼び出したい
- サイトとAPIを同じドメインで公開したい
- CloudFront経由のAPIが404になって困っている
https://example.com/article/ → S3
https://example.com/api/contact → API Gateway
オリジンを2つ用意する
CloudFrontへ次のオリジンを登録します。
- HTMLなどを保存するS3
- API Gatewayの実行APIドメイン
API Gatewayのオリジンドメインには、https://や/api/contactを含めず、ドメイン部分だけを設定します。
xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com
オリジンパスは空欄にします。
API用ビヘイビア
主な設定は次のとおりです。
| 項目 | 設定 |
|---|---|
| パスパターン | /api/* |
| オリジン | API Gateway |
| キャッシュ | 無効 |
| Origin request policy | AllViewerExceptHostHeader |
| HTTPメソッド | POSTを含める |
API GatewayへCloudFrontのHostヘッダーを転送しないこともポイントです。
404になったときの確認
API Gatewayの直接URLへPOSTして成功するのに、CloudFront経由だけ404になる場合は、次を確認します。
/api/*がAPI Gatewayオリジンを向いているか- オリジンパスに
/apiが入っていないか - CloudFront Functionが
index.htmlを追加していないか - API Gatewayに
POST /api/contactがあるか
オリジンパスに/apiがあると、/api/api/contactとして転送される可能性があります。
まとめ
今回は、CloudFrontのビヘイビアを使って、S3とAPI Gatewayを同じドメインから配信する方法について紹介しました。
API用のビヘイビアでは、キャッシュを無効にし、API Gatewayのオリジンパスを空欄にすることがポイントです。
404が発生した時は、API Gatewayの直接URLとCloudFront経由の結果を比較すると、原因を切り分けやすいと思います。