はじめに

この記事では、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/*"
        }
    ]
}

このポリシーは、dev-s3-content/* 以下のすべてのオブジェクトに対して、S3からの公開アクセスを許可します。

Resourceの箇所については、ご自身の環境に合わせて修正してください！

ステップ3: CloudFrontの設定

CloudFrontディストリビューションの作成

AWS Management ConsoleでCloudFrontサービスを選択し、「ディストリビューションの作成」をクリックします。オリジンとして先ほど作成したS3バケットを選択します。

オプション設定

任意設定としてCloudFrontのオプション設定では、デフォルトキャッシュ動作やSSL証明書の設定を行うことができます。

必要に応じて、HTTPからHTTPSへのリダイレクトやキャッシュポリシーの調整も可能です。

ディストリビューションの作成

設定が完了したら、CloudFrontのディストリビューションを作成します。

ディストリビューションのデプロイには数分かかります。

稼働確認

CloudFrontのドメイン名を確認

ディストリビューションが作成されると、CloudFrontからユニークなドメイン名が提供されます。

このドメイン名を使用してウェブサイトにアクセスします。

たとえば、私の環境では以下のURLにアクセスできます：http://d69wpjnh73n4g.cloudfront.net/。

動作確認

ブラウザにCloudFrontのドメイン名を入力し、静的ウェブサイトが正常に表示されるか確認します。

「朝活お疲れ様〜！」と表示されていることが確認できました。これで検証は完了です！

まとめ

Amazon S3とCloudFrontを組み合わせることで、静的ウェブサイトを簡単にホスティングし、世界中のユーザーに対して高速なコンテンツ配信を実現できます。

コスト効率が良く、スケーラビリティにも優れているため、多くのプロジェクトに最適なソリューションです。

ぜひこの方法を試して、静的コンテンツのホスティングに活用してください。

参考文献