S3で静的ウェブサイトホスティングの設定をする

こんにちは、クラウドインテグレーション2部の加藤ゆです。

今回は、S3の静的ウェブサイトホスティング機能をつかった、ウェブサイト表示手順をまとめていきます。
本記事では、簡単なHTMLをS3バケットに保存し、HTMLを公開します。

S3の静的ウェブサイトホスティング機能とは？
ユースケース
静的ウェブサイトホスティング設定手順
おまけ
おわり

S3の静的ウェブサイトホスティング機能とは？

S3バケットに配置した、静的なファイルをウェブサイトとして公開できる機能です。

「静的ウェブサイトホスティング」を分解してみますと、

静的ウェブサイト
- いつ誰がどのタイミングでアクセスしても表示内容が変わらないウェブサイトのこと
ウェブサイトホスティング
- プロバイダーのサーバを借りてインターネット上でウェブサイトを公開すること

S3バケットをホスティングしてウェブサイトを公開しよう！というのが、S3の静的ウェブサイトホスティング機能です。
S3バケット内のオブジェクトをウェブサイトとして公開できるってことですね。

ユースケース

HTMLファイル等を社内公開、または一般公開してブラウザでアクセスさせたいケースでご利用いただけます。

AWSですとEC2上でApacheをインストールして設定するということももちろん可能ですが、静的なWEBページであればS3上でより簡単にコストを抑えて実現することができます。

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

AWS公式ドキュメントはこちら

docs.aws.amazon.com

S3 バケットを作成

HTMLを格納するS3バケットを作成します。
ここで作成したバケットに対して、ウェブサイトホスティング設定と、アクセス権限設定を実施していきます。

「S3」を検索して、S3サービス画面に画面遷移

「バケットを作成」を押下

「バケット名」を指定
(※バケット名は制約によりグローバルで一意でなければなりません。ご利用のAWSアカウントIDや日付をいれると良いでしょう)

ブロックパブリックアクセス設定

ブロックパブリックアクセス設定を無効化します。

デフォルトでは、有効化（公開されない）設定となっていますが、
今回はパブリックにS3バケットを公開しますのでチェックを外し、無効化（公開する）とします。

無効化する場合、「この設定によりS3バケットが公開されますが承認しますか？」と確認項目が表示がされますので、こちらも承認にチェックをいれます。

その他、バージョニング設定、タグ、暗号化については今回は設定しません。

簡単に以下に機能説明を記載しますので、必要に応じてご利用ください。

バケットのバージョニング
バケットに格納される、すべてのオブジェクトのすべてのバージョンを管理します。
つまり、オブジェクトに対して以前のバージョンを復元したり、取得することできますので、意図しない操作ミスの復旧が出来るでしょう。
一方で、すべてのバージョンを保存しているのでその分保管料金が増えますこと、ご注意ください。

S3 バージョニングの仕組み - Amazon Simple Storage Service

デフォルトの暗号化
このバケットに保存されるオブジェクトを暗号化しますか？という項目です。
デフォルトで無効ですが、有効化した場合は、すべてのオブジェクトがバケットに保存される際に暗号化されます。
暗号化キーを設定する必要がありますので、利用する鍵のタイプを選択してください。

Amazon S3 のデフォルトバケット暗号化の有効化 - Amazon Simple Storage Service

コンテンツをS3 バケットに保存

先程作成したS3バケットにHTMLコンテンツを格納します。
今回格納するHTMLは、簡単に「Hello World!!」と表示されるだけのHTMLファイルです。

先程のS3バケットを選択します。

ローカルからドラッグ＆ドロップで格納可能です。
アップロードファイルが表示されますので、チェックして「アップロード」を押下。

以上で、表示コンテンツのアップロードが完了しました。

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

「プロパティ」＞「静的ウェブサイトホスティング」＞「編集」を押下

以下のように設定します

静的ウェブサイトホスティング
- 有効化
ホスティングタイプ
- 静的ウェブサイトをホストする
インデックスドキュメント
- index.html

インデックスドキュメントとは？
インデックスドキュメントのファイル名を入力します。
S3 バケットにアップロードしたHTMLファイルと同一のファイルを入力してください。
S3はルートドメインまたはサブフォルダに対するリクエストが行われたときに、このインデックスドキュメントを返します。
たとえば、「http://www.example.com」をブラウザでリクエストした場合、特定のファイルをリクエストしているわけではないので、S3 はデフォルトページとして、インデックスドキュメントを提供します。

インデックスドキュメントの設定 - Amazon Simple Storage Service

エラードキュメントとは？
4XXのエラードキュメントをカスタム表示させる場合は、エラードキュメントのファイル名を指定します。こちらもS3 バケットにアップロードしたHTMLファイルと同一のファイルを入力してください。
設定が無い場合、S3デフォルトのエラー画面が表示されます。

カスタムエラードキュメントの設定 - Amazon Simple Storage Service

以上で、静的ウェブサイトホスティングの設定が完了しました。
「バケットウェブサイトエンドポイント」が生成されていることが分かります。

アクセスしてみる～その①～

ちなみに、静的ウェブサイトホスティングの設定が完了した時点でこのエンドポイントにアクセスしてみると・・・

403のAccessDeniedですね、現在の設定ではアクセスは拒否されます。

なぜなら、AWSへのアクセスはデフォルトですべて拒否されているからです。
アクションを実行するには明示的な許可設定をしてあげる必要があります

該当する Deny ステートメントがなく、該当する Allow ステートメントもない場合は、暗黙的な拒否が発生します。
IAM プリンシパルは、デフォルトでアクセスが拒否されされるため、アクションを実行するには明示的に許可を受ける必要があります。そうでない場合は、アクセスは暗黙的に拒否されます。

https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/reference_policies_evaluation-logic.html#AccessPolicyLanguage_Interplay

S3 バケットのアクセス権限設定

という事で、

明示的に外部からアクセスを許可するために、アクセス権限を設定しましょう。

「アクセス許可」＞「バケットポリシー」＞「編集」

バケットポリシー

すべてのオブジェクトに対してGETアクションを可能とする場合は以下の設定となります。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::handson-20220829/*"   #対象S3バケットのARN/*
        }
    ]
}

バケットポリシーが設定されると、赤字の「パブリックにアクセス可能」「公開」の表示が確認できます。

アクセスしてみる～その②～

もう一度エンドポイントにアクセスしてみます。

期待通りの表示が確認出来ました！

おまけ

接続元IPアドレスを制限したい

S3バケットのバケットポリシーで、指定されたIP アドレス (aws:VpcSourceIp) からのものでない限り、バケットへのトラフィックをブロックするという設定が可能です。

具体的には、「Condition（条件）」ブロック内に「NotIpAddress」でIPアドレスを指定し、このIPアドレス以外のアクセスは拒否する、という記述をしましょう。

本記事では詳しく記載しませんので、以下公式ドキュメントをご覧ください。
Amazon S3 バケットへのアクセスを特定の IP または VPC に制限する

HTTPSでアクセスがしたい

S3 ウェブサイトエンドポイントでは、HTTPSをサポートしていません。HTTPSを使用する場合は、Amazon CloudFront（CDNサービス）を使用する必要があります。
CloudFrontのオリジンにS3 バケットのウェブサイトエンドポイントを設定し、SSL証明書を設定していく必要があります。

以下公式ドキュメントをご覧ください。

CloudFront を使用して Amazon S3 バケットに対する HTTPS リクエストを処理する