おれさまラボ

実際に手を動かして理解を深めるブログ。

Amazon S3 を使って静的 Web ページを公開する方法

はじめに

Amazon S3 には Static website hosting(静的サイトホスティング)機能があり、サーバを用意せずとも、S3 バケットに HTML ファイルを置けば Web サイトを公開できてしまいます。

非常にお手軽ですが、S3 をよく知らない人が使うにはわかりにくいところもあるので、実際に試した内容をメモとして残しておきます。

参考サイト

📰:AWS マネジメントコンソール を使用したバケットの静的ウェブサイトとしての設定 - Amazon Simple Storage Service

今回の構成

今回はこのような構成を目指します。

S3 バケットの作成

AWS マネジメントコンソールにサインインし、Amazon S3 コンソール(https://console.aws.amazon.com/s3/)を開きます。

[バケットを作成] ボタンをクリックします。

(1) 任意のバケット名を入力、(2) 任意のリージョンを選択します。

(1) [パブリックアクセスをすべてブロック] のチェックを外し、(2) [了承] にチェックを入れます。

[バケットを作成] をクリックします。

バケットが作成されたことを確認してください。

デフォルト暗号化の有効化

💡:デフォルト暗号化は S3 にアップロードされたコンテンツを自動的に暗号化してくれる機能です。これを無効化した状態でコンテンツを公開すると http での公開状態となります。暗号化された状態(https)でコンテンツを公開する場合には、デフォルト暗号化機能を有効にする必要があります。

⚠:コンテンツアップロード後にデフォルト暗号化機能を有効化した場合、既存のコンテンツは暗号化されず、個別に暗号化を指定する必要があるので注意してください。

S3 バケットの [プロパティ] タブから [デフォルト暗号化] をクリックします。

(1) AES-256 を選択し、(2) [保存] をクリックします。

デフォルト暗号化が有効になったことを確認します。

💡:デフォルト暗号化が有効になった状態でコンテンツにアクセスすると、https でのアクセスに変わります。(この手順ではまだコンテンツをアップロードしていないので、コンテンツアップロード後に確認してみてください)

コンテンツのアップロード

テスト用のコンテンツを用意します。ここではテキストエディタで以下内容を作成し、index.html として保存しました。

<!DOCTYPE html>
<html>
  <head>
    <title>index page</title>
  </head>
  <body>
    This is a test page.
  </body>
</html>

[アップロード] をクリックします。

アップロード用のモーダルウィンドウが表示されるので、(1) 先ほど作成した index.html を選択し、(2) [アップロード] をクリックします。

index.html がアップロードされたことを確認してください。

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

S3 バケットの [プロパティ] から [Static website hosting] をクリックします。

(1) インデックスドキュメントとして index.html を、(2) エラードキュメントとして error.html を入力し、[保存] をクリックします。

💡:[エンドポイント] に表示されている URL はアクセス確認に使用するのでメモしておいてください。

💡:index.html はトップページ、error.html は何らかの原因でホスティングサイトへのアクセスが失敗した場合に表示されるページです。本手順では、error.html の作成・アップロードは省略しています。

[バケットホスティング] 機能が有効化されたことを確認してください。

ここまでで、S3 バケットにコンテンツがアップロードされ、バケットホスティング機能も有効になった状態ですが、この状態でエンドポイント(今回は https://test-s3-bucket-20200509-1140.s3-ap-northeast-1.amazonaws.com/ )にアクセスしてもエラーとなります。

このエラーを回避するために、S3 のバケットポリシー機能を使って適切なアクセス許可を行う必要があります。

バケットポリシーの変更

(1) [アクセス権限] タブから [バケットポリシー] をクリックします。

バケットポリシーエディタに JSON 形式でポリシーを定義します。ここでは、以下のように定義しています。

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

💡:test-s3-bucket-20200509-1140/ 配下のディレクトリ全てに対して、HTTP GET メソッドを使った読み取り権限を与える S3 バケットポリシーです。環境に合わせて Resource の ARN を変更するようにしてください。

(1) バケットポリシーを入力したら、(2) [保存] をクリックします。

💡:バケットポリシー保存後、パブリックアクセスに関する警告が表示されるようになりますが、意図的にパブリック公開しているので問題ありません。

この状態でエンドポイント(今回は https://test-s3-bucket-20200509-1140.s3-ap-northeast-1.amazonaws.com/ )にアクセスすると、アップロードしたインデックスドキュメント(今回は index.html)が表示されます。

コンテンツの追加

ここでは dir01 というサブディレクトリを切り、test01.html というコンテンツを追加してみます。

[概要] タブから (1) [フォルダの作成] をクリック、(2) 任意のフォルダ名(今回は dir01)を入力し、(3) [保存] ボタンをクリックします。

ディレクトリが作成されたことを確認してください。

テスト用のコンテンツを用意します。ここではテキストエディタで以下内容を作成し、test01.html として保存しました。

<!DOCTYPE html>
<html>
  <head>
    <title>test01 page</title>
  </head>
  <body>
    This is a test01 page.
  </body>
</html>

先ほど作成した dir01 に移動し、[アップロード] をクリックします。

(1) test01.html を選択し、(2) [アップロード] をクリックします。

test01.html がアップロードされたことを確認してください。

対象のコンテンツ(今回は https://test-s3-bucket-20200509-1140.s3-ap-northeast-1.amazonaws.com/dir01/test01.html )にアクセスすると、アップロードしたコンテンツ(今回は test01.html )が表示されます。

以上