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

はじめに

AWSのS3の機能である静的サイトのホスティングを使ってウェブサイトを表示します。

S3を使用するメリット

・簡単
・コスパがいい

前提

AWSアカウントを所持
html、cssファイルは作成済

表示まで

1．S3バケットの作成

①　S3のコンソール画面から「バケットを作成」をクリック

②　バケット名を入力

バケット名は世界で一意である必要があります。
バケット名は3～63文字、小文字、数字、ドット、ハイフンのみで構成など他にもルールあり。

③　「パブリックアクセスをすべてブロック」のチェックを外す

今回はウェブサイトの表示なので、ブロックにチェックすると、アクセス出来なくなります。

④　「バケットの作成」をクリック

その他はデフォルトで大丈夫です。

2．ファイルのアップロード

バケットを作成するとコンソール画面にバケットが追加されています。

①　この画面で新しく作成したバケット名をクリックします。

※　スクショの手違いでアクセスの欄が「公開」になっていますが、本来は「オブジェクトは公開することができます」と表示されます。

②　S3バケットにhtmlファイルとcssファイルをアップロードします。

オブジェクトタブの「アップロード」をクリック

「ファイルを追加」をクリックし、アップロードするファイルを選択

ファイルを追加すると、選択したファイルが表示されます。
追加したら、下部の「アップロード」をクリック

3．ホスティングの設定

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

バケットにファイルを追加したら、プロパティを開きます

静的ウェブサイトホスティングの「編集」をクリック

静的ウェブサイトホスティングを「有効にする」にチェック
インデックスドキュメントにアップロードしたhtmlファイル名を入力

「変更の保存」をクリック

②　アクセス設定

アクセス許可タブのバケットポリシーを編集

ポリシーエディターに

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

を追加。
ResourceのBucket-Nameのところをバケット名に変更

例

"arn:aws:s3:::hello-aws-site/*"

ポリシーを入力したら、変更の保存をクリック

4．サイトの表示

全て設定が完了したら、再度プロパティタブの静的ウェブサイトホスティングに戻ると、エンドポイントが表示されています。

これをクリックすると

ブラウザでサイトが公開されました。

CloudFrontやRoute53を使用した高速化、ルーティングは今後やりたいと思います。

以上