Skip to content

CDNと統合されたフルマネージドな環境にSingle Page Application (SPA) を構築する

概要

このアーキテクチャで達成できる要件

  • フルマネージドなサービスを利用したい
  • グローバル CDN を利用してコンテンツを高速に配信したい

構成図

構成説明

  • Web アプリケーションをホストする Amazon S3 バケットを作成します。
  • Web アプリケーションの CDN 配信を実現するため、S3 バケットをオリジンとして持つ Amazon CloudFront ディストリビューションを作成します。
  • S3 バケットへのアクセスを CloudFront ディストリビューションからのアクセスのみに制限するため、オリジンアクセスコントロール(OAC)を作成して CloudFront ディストリビューションに設定します。
  • CloudFront によって割り当てられるドメイン名に加えて、カスタムドメインを使用するために、Amazon Route 53 ホストゾーンに ALIAS レコードを作成します。
  • カスタムドメインを用いた HTTPS アクセスを実現するために AWS Certificate Manager でパブリック証明書を作成します。
  • 不正な通信をブロックするために AWS WAF の Web ACL を CloudFront ディストリビューションに設定します。

処理フロー

  1. アプリケーションのカスタムドメインの FQDN に対する HTTPS リクエストを、CloudFront ディストリビューションが処理する。
  2. CloudFront ディストリビューションを経由して S3 バケットにリクエストが送信される。
  3. S3 バケットにホストされたアプリケーションがクライアントへロードされる。

AssemblyLineの構成

このアーキテクチャでは、以下の AssemblyLine が生成されます。

  • AWS Frontend Application
    • Web アプリケーションをデプロイする。

AWS Frontend Application

この AssemblyLine は、以下の Pipeline から構成されます。

  • deploy
    • Web アプリケーションをデプロイするためのクラウドリソースをデプロイする。
  • publish-site
    • S3 バケットにアプリケーションをデプロイする。

Architecture Decision Records

Route 53を利用して独自ドメインを設定する

Context

  • CloudFront では、ディストリビューションが作成されると自動生成ドメインが提供されます。
    • 自動生成ドメインはランダムな文字列で構成されるため、ブランドイメージを統一できない、覚えづらいためユーザ体験が低下するといった問題があります。

Decision

  • CloudFront で自動生成されたドメインに加えて、Route 53 を利用して別名の独自ドメインを設定します。
    • 公開するアプリケーションに対して任意のドメイン設定することで、ブランドイメージの統一やユーザ体験の向上を達成できます。

S3だけでなくCloudFrontを併用してアプリケーションをホストする

Context

  • S3 バケットを用いたアプリケーションのホスティングは、S3 の静的ウェブサイトホスティング機能を利用することでも実現できますが、この場合、以下の課題があります。
    • 静的ウェブサイトホスティング機能では HTTP エンドポイントのみがサポートされており、HTTPS に対応していません。
    • 払い出されたエンドポイントを用いてアプリケーションにアクセスできるようにするには、S3 バケット自体のパブリックアクセスを有効にしてバケット内オブジェクトをパブリック公開する必要があります。

Decision

  • S3 の静的ウェブサイトホスティング機能ではなく、S3 バケットをオリジンとして持つ CloudFront ディストリビューションを利用します。
    • CloudFront が HTTPS に対応しているため、HTTPS アクセスが可能になります。
    • CloudFront ディストリビューションに OAC を設定し、S3 のバケットポリシーを設定することで、CloudFront ディストリビューションからのみ S3 バケットにアクセスできるようになり、バケット内オブジェクトをパブリック公開する必要が無くなります。

非機能要件

可用性

冗長化構成

  • 本アーキテクチャ構成では冗長化構成は行なっていません。可用性は S3 と CloudFront で担保されています。

運用・保守性

保守

  • S3 および CloudFront はマネージドサービスのため、サーバーの保守は不要です。
  • SSL 証明書の自動更新
    • Certificate Manager によってパブリック証明書が作成され、CloudFront ディストリビューションにカスタムドメインが設定されます。
    • 発行された証明書は、Certificate Manager によって自動更新されます。

セキュリティ

通信

  • 本アーキテクチャではデフォルトで通信するデータを HTTPS を利用して暗号化します。

データの暗号化

  • S3 バケットに保存されるオブジェクトには、S3 マネージドキーによるサーバー側の暗号化(SSE-S3)が適用されます。

Web からの攻撃対策

  • CloudFront ディストリビューションに Web ACL を設定することで、アプリケーションを保護します。
    • Web ACL には、以下の AWS マネージドルールグループが設定されます。
      • AWSManagedRulesAmazonIpReputationList
      • AWSManagedRulesCommonRuleSet
      • AWSManagedRulesKnownBadInputsRuleSet

Last updated: