はじめに AWSでサーバーレスアーキテクチャのSPAサイトを組むにあたって、フロントエンドをS3(+CloudFront)から配信し、バックエンドをAPI Gatewayに置くのは一般的な構成だと思います。 フロントエンドのサイトとバックエンドのAPIで二つのドメインで運用することもできますが、前段にCloudFrontを置いて一つのドメインから両オリジンにアクセスができる構成を作ってみます。 構成図にするとこんな感じ。 S3 設定はすべてデフォルト。 API Gateway REST APIを作成。 わざわざLambdaを作るのも面倒なのでMockを使って仮のレスポンスを返します。 APIをデプロイします。ステージ名は「api」とします。 得られたエンドポイントからAPIを呼んでみます。 $ curl https://XXXXXXXXXX.execute-api.ap-northeast
![CloudFront・S3・API GatewayでマルチオリジンなSPAサイトを作ってみる | It works for me](https://cdn-ak-scissors.b.st-hatena.com/image/square/6ba645955d19243dab386951ebaf1d3c423c8b13/height=288;version=1;width=512/https%3A%2F%2Fwww.blog.danishi.net%2Fwp-content%2Fuploads%2F2020%2F02%2FAmazon-CloudFront%404x.png)