S3で静的Webホスティングしてみた


 はじめに

Codeシリーズを勉強しようとAWSのハンズオンで実際に手を動かしていたところS3の静的Webホスティングの設定があったのでアウトプットの一環として投稿します。
ただ今回は過程で設定したのみなので、CloudFrontやRoute53などの設定はしておりません

 AWS S3とは

  ・安価で耐久性の高いAWSのクラウドストレージサービス
  ・ユーザーがデータを容量制限なく保存可能なマネージド型で提供されるオブジェクト型ストレージ

 S3の特徴

  ・0.023USD/GB・月と、安価。1GBで約3円/月
  ・99.99999999%の高い耐久性
  ・容量無制限。1ファイル最大5TBまで
  ・バケットやオブジェクトに対してアクセス制限を設定できる

 静的Webホスティングとは

  ・静的なWebサイトをホスティング(一般公開)すること。
  ・静的なWebサイトとはHTMLファイルをサーバーにアップロードしておき、リクエストに対してそのままそのファイルをレスポンスるサイトのこと。
  ・阿部 寛さんのホームページとか

 手順

AWSマネジメントコンソールからS3に移動しバケットを作成します

次にバケット名を付けていくのだが、このバケット名は世界で唯一である必要があるため作成日付や自分の名前などで作成していく。

ブロックパブリックアクセスのバケット設定でブロックアクセスをすべてブロックのチェックを外す。
チェックを外すことで下の方に注意喚起がでてくるのだが、パブリックにすることで静的Webホスティングを使いたいためにしたということを確認するためにチェックをいれバケットを作成をクリックする。

なお今回はバージョニング機能と暗号化については無効でいきます。

次にファイルをアップロードした時にS3のバケットがWebサイトとしてホスティングしていくようにしたいので、まず静的Webホスティングの設定をしていきます。

作成したバケットをクリックしタグのプロパティを開き下にスクロールすると静的Webホスティングの編集できるところがあるので開きます。
静的Webホスティングを有効にチェックし、用意したドキュメントをインデックスドキュメントの欄に書き保存する

次にタグのアクセス許可をクリックしその中にあるバケットポリシーに下のポリシーを記入する。

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

"arn:aws:s3:::xxxxxxxxx/*"のxxxxxxxxxには各自作成したバケット名を記入に保存する。
次にファイルのアップロードをしていきます。

オブジェクトタグにあるアップロードを押しファイルを追加します。

最後にホスティングされていることを確認するために先ほど設定したプロパティタグの静的Webホスティングの設定まで移動するとエンドポイントがありますので、そちらをクリックすると・・・!

 おわりに

今回初めてQiitaに投稿するので不慣れな点が多々あると思います。
まだまだこれからもAWSについてアウトプットしていこうと思いますのでよろしくお願いします!!!

(。・ω・)ノ゙バイバイ