Terraform applyコース / Chapter 05

静的フロントエンドを安全に配信する

ビルド成果物を公開し、CloudFrontだけを入口にして、独自ドメインとHTTPSで届ける。S3は「公開サイト」ではなく、CDNの非公開originとして扱う。

TL;DR

  1. フロントエンドはビルドしてS3/Amplifyへ配置する。
  2. 利用者はCloudFront経由で読む。S3 bucketをpublicにはしない。
  3. Route 53とACMでカスタムドメインとHTTPSを完成させ、更新後の画面で確認する。

01配信経路を一本にする

buildから利用者までの経路を一枚で追い、公開する場所と公開しない場所を分ける。

フロントエンドのビルド成果物がS3またはAmplifyに配置され、CloudFront、Route 53、ACMを通じて利用者へHTTPS配信される構成図
静的ファイルは非公開originに置き、利用者への入口をCloudFrontと独自ドメインに一本化する。

1. buildして配置する

フロントエンドはビルド成果物を配置して更新する。教材ではAmplifyを手動で構築し、CloudFrontとS3のカスタムドメイン対応をTerraformで整える。どの方法でも、配信対象はビルド済みの静的ファイルである。

2. S3を直接公開しない

CloudFrontをoriginへの唯一の公開経路にする。S3にはCloudFrontのdistribution ARNを渡してOACを設定し、bucketのpublic accessには頼らない。これにより、利用者はCDN経由でだけコンテンツを取得する。

3. ドメインとHTTPSを結ぶ

ACM証明書をCloudFrontへ関連付け、Route 53のAレコードをCloudFrontへ向ける。DNS、証明書、distributionがそろって初めて、意図したカスタムURLでHTTPS表示できる。

更新後の確認見ること
カスタムURLHTTPSでトップページが表示される
配信経路CloudFront経由で最新のビルド成果物を取得できる
公開範囲S3 bucketをpublicにせずOACでoriginアクセスを許可する

教材上の補足: 初回のAmplify構築は手動でも、CloudFront・S3 OAC・Route 53の関係はTerraformで意図を残す。更新後はURLを開き、データを含む画面まで確認する。

この章で持ち帰ること

  1. 静的ファイルの配置先と利用者の配信入口を分ける。
  2. S3をpublicにせず、CloudFrontのOACでoriginアクセスを制御する。
  3. Route 53・ACM・CloudFrontをそろえ、更新後のカスタムURLで確認する。