AWS S3で何か実用的に使えることはないだろうか?と思い、静的サイトのホスティングをやってみました。

AWS S3 のバケットの作成

AWSのアカウントでログインし、S3にアクセスします。

https://s3.console.aws.amazon.com/s3/home

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

『バケット名』を入力します。『AWSリージョン』はアジアパシフィック(東京)にしました。

一般公開するので「パブリックアクセスをすべてブロック」 のチェックを外し、「現在の設定により、このパケットとパケット内のオブジェクトが公開される可能性があることを承認します。」にチェックを入れます。

「バケットを作成」をクリックします。

AWS S3「静的ウェブサイトホスティング」を有効にする

上記で作成したバケットの「プロパティ」画面を開きます。

「静的ウェブサイトホスティング」を”有効にする”のラジオボタンを選択します。

「ホスティングタイプ」を”静的ウェブサイトをホストする”のラジオボタンを選択します。

「インデックスドキュメント」を”index.html”、

「エラードキュメント-オプション」を”error.html”

と設定します。

バケットポリシーを編集する

上記で作成したバケットの「アクセス許可」画面を開きます。

バケットポリシーの「編集」ボタンをクリックして、バケットポリシーを追加します。デフォルト設定では、バケットに対するアクセス権を持つのはバケットの作成者のみのため、下記のポリシーを追加します。

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

「変更の保存」で編集した内容を保存します。

これで”パブリックにアクセス可能”という表示が出ればOKです。

HTMLファイルをアップロードする

バケットの「オブジェクト」画面を開きます。

「アップロード」ボタンをクリックします。

アップロード画面が開くので、「ファイルを追加」ボタンをクリックし、用意しておいた静的ファイル(index.htmlとerror.html)をアップロードします。

[ index.html ]

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>S3テスト</title>
    </head>
    <body>
        <div>
            <h1>S3 静的ホスティングのテスト</h1>
        </div>
    </body>
</html>

[ error.html ]

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Error Page</title>
    </head>
    <body>
        <div>
            <h1>ERROR</h1>
            <h2>WEBページを表示できません!</h2>
        </div>
    </body>
</html>

静的ファイル(index.htmlとerror.html)が追加されたことを確認します。

「アップロード」ボタンをクリックします。

Webページが表示されるか確認する

バケットの「オブジェクト」画面を開きます。

index.htmlをクリックします。

index.htmlのプロパティ画面の「オブジェクトURL」のURLリンクをクリックします。

Webページが表示されれば成功です。

AWS S3で静的なWebページを公開する方法 まとめ

AWS S3を利用することで簡単にWebページをインターネットに公開することができました。
ちょっとした自己紹介ページやLPページを公開するのに使えるのではないかと思いました。

料金もレンタルサーバを借りるより遥かに安いので、是非試してみてください!

Categories:

Tags:

No responses yet

コメントを残す

メールアドレスが公開されることはありません。