概要

サーバレスアーキテクチャのフロントエンドを構築
CloudFrontを前段に置いてマルチオリジンを構成する
オリジンはAPIGateWayとS3で構成し、URIによってどちらかのオリジンにアクセス
APIGatewayの後ろはLambdaだがここでは書かない
最後にWAFでIPアドレスによるアクセス制限

前提

ドメインと証明書は取得済み
ここではdev-＜projectname＞.comを取得ドメイン名とする

詳細

こんな感じの完成イメージ

Distribution作成

オリジンドメインは作成したS3のアドレスを入力
オリジンパスはここでは無し
OAIを任意の名前で作成
バケットポリシーはここではひとまず自動

ビュワーはHTTPSオンリーでも良いかも。APIGatewayはHTTPSのみしか対応してないはず

キャッシュポリシーとオリジンリクエストポリシーは後で変更予定。ここではとりあえずデフォルト

デフォルト

デフォルトルートオブジェクトに"index.html"

以上でとりあえずDistribution作成

S3バケット作成

パブリック・アクセスのバケットを作成
詳細手順は割愛

Identityがない方のバケットポリシーを削除

ACM証明書作成

詳細手順は省略
申請した手続きをRoute５３にレコード作成して認証にする

Distributionに証明書をセット

CNAMEにドメインをセット
証明書をセット

Route53レコード登録

Route53にAレコードを作成。Distributionのドメインを入力

APIGateaway

RestAPIを任意の名前で作成

リソースの作成

リソース”/api”と”/admin”を作成

apiの下にadminを作成

リソースの作成後、レスポンスさせたいリソースを選択、[アクション]から[メソッドの作成]を選択。
[メソッドの作成]後、HTTPメソッドが選択可能、今回は"GET"を選択し、確定。

シンプルに使いたい場合は、統合レスポンスのマッピングテーブルを作成

デフォルトの統合レスポンスを順番に展開し、マッピングテンプレートのContent-Type：application/jsonにレスポンスしたい内容を入力。入力完了後、[保存]。

API動作確認（テスト）

APIデプロイ

テストで動作に問題がないことを確認したあとは、実際にデプロイ

生成されたURLでアクセス。APIGatewayで任意のステージ名を作成した場合、最初のパスになる
APIGateway単体でのアクセス成功を確認

※末尾のパスが設定できていない場合、下図のようにMissing Authentication Tokenエラーが返ってくる
※APIGatewayでStage名が”dev”だった場合、CloudFrontのオリジンパスは"/dev"に設定する
※ステージ名（ステージ変数）が$defaultだった場合オリジンパスの入力は不要