S3の静的ウェブサイトホスティングで簡単なウェブページを公開してみた

はじめに

こんばんは、大野です。
先月のアドカレは楽しかったですね。
技術ブログは習慣化していきたいので、今月も投稿していきます！

今回は、S3を使って静的なウェブサイトをホスティングしてみます。
S3では、PHPなどのサーバサイドの言語を使わないHTMLを基本とした簡単な静的なウェブサイトならばホスティング可能で、EC2などでウェブサーバを作るより安価で簡単にホスティングすることが出来ます。

今回はそれをやってみます！
では行ってみましょう！

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

一般的にストレージ用途として使うことが多いS3ですが、前述の通り、サーバサイドの言語を使ったり、DBと通信したりしない、静的なウェブサイトならば、S3の静的ウェブサイトホスティング機能でホスティングすることが可能です。

今回公開を目指すウェブページ

まずは、オフラインで簡単なウェブページを作成してみました。

今回は、S3静的ウェブサイトホスティングで何処まで出来るのかということで、

文字テスト … 文字と簡単なHTMLタグの表示
リンクテスト … 別ページへのリンク
JavaScriptテスト … 簡単なJavaScriptの実行 (現在日時の表示)

の3件を検証してみます。

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

まずは、「This is a Test Page.」と表示されるだけの簡単なウェブページを公開するところまで行ってみます。

普通にS3バケットを作成する

まずは、データを入れる箱、S3バケットを作成します。

特に他の設定は変更せずデフォルトで作成します。

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

プロパティの一番下に「静的ウェブサイトホスティング」の設定があるので、ここを編集します。

「静的ウェブサイトホスティング」を有効にし、ホスティングタイプを「静的ウェブサイトをホストする」に設定すると、後は色々設定があります。

まずは、インデックスドキュメントに「index.html」を設定し、後はデフォルトで保存します。

ここまでの設定を完了すると、静的ウェブサイトホスティングが有効になり、バケットウェブサイトエンドポイント(ウェブページのURL)が表示されます。

テストファイルをアップロード

まずは、「This is a Test Page.」と表示されるだけの、テストファイルをアップロードしてみます。

インデックスファイルとして「index.html」でS3バケットにアップロードしました。

先程のバケットウェブサイトエンドポイントにウェブアクセスしてみます。

「403 Forbidden」になりました。
S3ではデフォルトでパブリックアクセスを全てブロックしており、外部からはS3バケットに保存されたデータにアクセスが出来ない設定になっています。
そのため、外部からウェブアクセスするためには、パブリックアクセスを有効にする必要があります。

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

アクセス許可の「ブロックパブリックアクセス (バケット設定)」を編集し、「パブリックアクセスをすべてブロック」のチェックを外します。

他のチェックも全て外します。

パブリックアクセスのブロック設定を外しましたが、「バケットポリシー」でパブリックアクセスがブロックされているので、バケットポリシーで許可します。

下記の通り、バケットポリシーで「PublicReadGetObject」を許可します。

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

このように設定したら準備完了です。