Skip to main content
おっとっと.log

AWSホスティングとは？S3 + CloudFront + Route53の概要と役割

Website Development • Version 1.0.0 •

このガイドでは、AWSホスティングとは何か、そしてAstroサイトをAWSでホスティングする際に使用する主要なサービスの役割について解説します。AWSは、静的サイトをホスティングするための強力なインフラストラクチャを提供しており、S3、CloudFront、Route53を組み合わせることで、高速で安全なサイト配信が可能になります。

AWSホスティングとは

AWSホスティングとは、Amazon Web Services（AWS）の各種サービスを組み合わせて、ウェブサイトやアプリケーションをインターネット上に公開する方法です。
特に静的サイト（HTML、CSS、JavaScriptなどのファイルで構成されるサイト）のホスティングにおいて、AWSは非常に効率的で高いコストパフォーマンスを発揮します。

AWSホスティングで使用する主要サービス

AWSホスティングでは主に３つのサービスを組み合わせて使用することになります。
組み合わせに関しては後ほど確認していくので、まずは各種サービスについて確認していきましょう。

S3（Simple Storage Service）の役割

S3にはバケット と呼ばれるデータの「入れ物」が存在し、そこにWebサイトの表示に必要なコードや、画像などの静的ファイルを保存するストレージサービスです。

ビルドによって生成されたファイルをS3バケット（S3のストレージコンテナ）にアップロードすることで、サイトのコンテンツが保存されます。

S3の主な特徴は以下の通りです：

  • 高耐久性: データは自動的に複数のアベイラビリティゾーンに複製され、99.999999999%の耐久性を提供します
  • 低コスト: 静的ファイルの保存には非常に低コストで、使用した分だけの従量課金制です
  • スケーラビリティ: 容量の制限がなく、必要なだけファイルを保存できます
  • セキュリティ: バケットポリシーやアクセス制御により、セキュアなファイル管理が可能です

S3は、サイトのコンテンツを保存する「倉庫」のような役割を果たします。

CloudFrontの役割

CloudFrontは、CDN（Content Delivery Network）として機能し、S3に保存されたファイルを世界中のユーザーに高速配信します。
CloudFrontは、世界中に配置されたエッジロケーション（配信拠点）からコンテンツを配信することで、ユーザーが最寄りのサーバーからコンテンツを取得できるようにします。

CloudFrontの主な特徴は以下の通りです：

  • 高速配信: エッジロケーションから配信されるため、読み込み速度が大幅に向上します
  • キャッシュ機能: コンテンツをエッジロケーションにキャッシュすることで、S3へのアクセスを減らし、配信速度を向上させます
  • カスタムドメイン対応: 独自ドメインを使用してサイトにアクセスできるようにします
  • HTTPS対応: SSL/TLS証明書を使用したセキュアな通信を提供します
  • SPAルーティング対応: CloudFront Functionを使用することで、Astroサイトのクライアントサイドルーティングをサポートします

CloudFrontは、S3の「倉庫」からコンテンツを取り出して、世界中のユーザーに「配送」する役割を果たします。

Route53の役割

Route53は、DNS（Domain Name System）管理サービスとして機能し、独自ドメインをCloudFrontディストリビューションに接続します。
独自ドメインを使用しない場合は必須ではありませんが、独自ドメインを使用する場合には必要となります。

Route53の主な特徴は以下の通りです：

  • DNS管理: ドメインのDNSレコードを管理し、ドメイン名をIPアドレスやCloudFrontディストリビューションに変換します
  • 高可用性: 自動フェイルオーバー機能により、高い可用性を提供します
  • ヘルスチェック: エンドポイントのヘルスチェック機能により、正常なエンドポイントに自動的にルーティングします

Route53は、独自ドメイン（例：example.com）をCloudFrontディストリビューションに「接続」する役割を果たします。

AWSホスティングのパターン

AWSホスティングは上記で紹介した３つの主要サービスを組み合わせて構築していきます。
それぞれのパターンには特徴があり、用途に応じて選択することになります。

このサイトでは「S3 & CloudFront & Route53」のパターンを使用しているので、今後はそれについての解説を主に行っていきますが、今回は他のパターンに関しても簡単に見ていきたいと思います。

S3のみ

S3のみを使用するパターンは、最もシンプルな構成です。
静的ファイルをS3バケットにアップロードし、S3の静的ウェブサイトホスティング機能を使用してサイトを公開します。

このパターンの特徴：

  • シンプルな構成: S3のみで完結するため、設定が簡単です
  • 低コスト: 使用するサービスが少ないため、コストを抑えられます
  • 制限事項: S3のデフォルトドメイン（bucket-name.s3-website-region.amazonaws.com）を使用する必要があります
  • HTTPS非対応: カスタムドメインを使用しない場合、HTTPSが使用できません
  • 配信速度: CDNがないため、配信速度はS3のリージョンに依存します

用途: 開発環境やテスト環境、内部向けサイトなど、カスタムドメインやHTTPSが不要な場合に適しています。

S3 & Route53

S3とRoute53を組み合わせるパターンは、独自ドメインを使用したい場合に適しています。S3の静的ウェブサイトホスティング機能を使用し、Route53でDNSレコードを設定して独自ドメインを接続します。

このパターンの特徴：

  • 独自ドメイン対応: Route53でDNSレコードを設定することで、独自ドメインを使用できます
  • シンプルな構成: CloudFrontを使用しないため、構成が比較的シンプルです
  • HTTPS非対応: S3の静的ウェブサイトホスティングでは、HTTPSが使用できません
  • 配信速度: CDNがないため、配信速度はS3のリージョンに依存します

用途: 独自ドメインを使用したいが、HTTPSやCDNが不要な場合に適しています。ただし、現在ではHTTPSが標準となっているため、このパターンは推奨されません。

S3 & CloudFront & Route53 (このサイトはこれで構築)

S3、CloudFront、Route53を組み合わせるパターンは、本番環境で推奨される構成で,
このサイトもこのパターンで構築されています。

このパターンの特徴：

  • 高速配信: CloudFrontのCDNにより、世界中のユーザーに対して高速な配信が可能です
  • HTTPS対応: CloudFrontでSSL/TLS証明書を使用し、セキュアな通信を提供できます
  • 独自ドメイン対応: Route53でDNSレコードを設定することで、独自ドメインを使用できます
  • キャッシュ機能: CloudFrontのキャッシュ機能により、S3へのアクセスを減らし、配信速度を向上させます
  • SPAルーティング対応: CloudFront Functionを使用することで、Astroサイトのクライアントサイドルーティングをサポートできます
  • コスト: 3つのサービスを使用するため、他のパターンと比較してコストが高めです

用途: 本番環境や、パフォーマンスとセキュリティを重視するサイトに適しています。このパターンにより、高速で安全なサイト配信が実現できます。

AWSホスティングのセットアップ

使用するサービスのパターンを紹介していきましたが、ここからはそれらの設定について見ていきたいと思います。

ただ全てをここで解説してしまうとかなり分量が多くなってしまうので簡単な流れと各サービスの設定ガイドのリンクを載せておきます。（ごめんなさい。まだドキュメントは完成していません）
具体的な設定方法はそれぞれのガイドを参照していただければと思います。

セットアップの流れ

※今後具体的なドキュメントを作成予定

  1. S3バケットの作成と設定: 静的ファイルを保存するためのS3バケットを作成し、適切な設定を行います。%% todo 詳細は S3設定ガイド を参照してください。 %%

  2. CloudFrontディストリビューションの作成と設定: S3バケットをOriginとして設定し、CloudFrontディストリビューションを作成します。%% todo 詳細は CloudFront設定ガイド を参照してください。 %%

  3. Route53でのDNS設定（オプション）: 独自ドメインを使用する場合、Route53でDNSレコードを設定します。%% todo 詳細は Route53設定ガイド を参照してください。 %%

これらの設定により、WebサイトをAWS環境でホスティングできるようになります。

あとはデプロイしてあげれば表示されます。
デプロイ方法については、別のガイドで詳しく解説します。

まとめ

今回の内容はまとめると以下のようになります。

AWSホスティングは、S3、CloudFront、Route53の3つのサービスを組み合わせることで、高速で安全な静的サイトホスティングを実現できます。
S3はファイルの保存、CloudFrontは高速配信、Route53はDNS管理を担当し、それぞれが連携して動作します。

この構成により、世界中のユーザーに対して低レイテンシーでコンテンツを配信でき、高い可用性とスケーラビリティを提供できます。
また、サーバーの管理が不要で、AWSがすべてのインフラを管理してくれるため、運用負荷も軽減されます。

ということでAWSホスティングに関する解説を終わりたいと思います。
まだまだ具体的な設定については紹介できていませんが、それぞれのガイドで解説しますのでそれをもとに構築していってもらえればなと思います。

%% todo

参考リンク