Amazon S3とCloudFrontを使った静的ウェブサイトホスティングの技術検証

Last updated at 2024-10-05Posted at 2024-10-05

はじめに

この記事では、AWS（Amazon Web Services）のS3（Simple Storage Service）を使用して静的ウェブサイトをホスティングし、さらにCloudFrontを使ってそのコンテンツ配信を最適化する方法について解説します。

静的ウェブサイトは、HTML、CSS、JavaScriptなどのファイルで構成され、サーバーサイドでの処理が不要なため、コストを低く抑えることができます。

加えて、CloudFrontを使用することで、世界中のユーザーに対して高速かつ信頼性の高いコンテンツ配信が可能です。

前提条件

以下の条件を満たしていることが前提となります
・AWSアカウントを持っていること
・基本的なAWSの知識（特にS3とCloudFront）があること
・AWS Management Consoleにアクセスできる環境が整っていること

知識整理

引用画像：https://kyrieee.com/cloudfront-s3/2328/

今回必要な知識は以下の通りです。

Amazon S3:
オブジェクトストレージサービス。データをバケットに保存し、静的ファイルのホスティングが可能です。

Amazon CloudFront:
コンテンツ配信ネットワーク（CDN）サービス。S3から配信されるコンテンツをキャッシュし、エッジロケーションを通じてユーザーに近い場所からコンテンツを配信することで、パフォーマンスを向上させます。

構築手順

S3とCloudFrontを使った静的ウェブサイトホスティングの実装手順は以下の通りです。
ステップ1: S3バケットの設定
ステップ2: 全世界へ静的Webサイトの公開
ステップ3: CloudFrontの設定

早速ですが、ハンズオンをしながら途中途中解説していきます！

ステップ1: S3バケットの設定

まずは、S3バケットを作成し、CloudFront経由でコンテンツにアクセスできるようにオリジンアクセスコントロールを設定します。

S3バケットの作成

AWS Management Consoleにログインし、S3サービスを選択します。
「バケットを作成」をクリックし、バケット名を入力します。ACLは「無効」を選択します。

「このバケットのブロックパブリックアクセス設定」で「パブリックアクセスをすべてブロック」のチェックを外します。

「現在の設定により、このバケットとバケット内のオブジェクトが公開される可能性があることを承認します。」にチェックを付けます。

デフォルトの暗号化は以下の通り選択します。

暗号化タイプ: Amazon S3 マネージドキーを使用したサーバー側の暗号化 (SSE-S3)
バケットキー: 有効にする

これらの設定を確認後、画面右下の「バケットを作成」ボタンを押下します。

以上で、S3バケットの作成が完了しました。次のステップでは、静的ウェブサイトの公開方法について説明します。

ステップ2: 全世界へ静的Webサイトの公開

静的ウェブサイトホスティングの設定

作成したS3バケットをクリックし、静的ウェブサイトホスティングの設定を有効にします。

「静的ウェブサイトホスティング」を「有効」にし、以下の設定を行います。

インデックスドキュメントには、「index.html」で設定し、任意でエラードキュメントには「error.html」入力をして変更を保存します。

オブジェクトをアップロード

S3バケットに移動し、静的ウェブサイトに必要なオブジェクトをアップロードします。今回は以下の index.html ファイルを使用します。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テストサイト</title>
</head>
<body>
朝活お疲れ様～!
</body>
</html>

アップロード後の画面例

S3バケットポリシーの編集

S3バケットのアクセス許可タブに移動し、バケットポリシーを編集します。以下のバケットポリシーを追加します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::dev-s3-content/*"
        }
    ]
}