LoginSignup
1
1

More than 1 year has passed since last update.

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

Posted at

 はじめに

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ホスティングを使いたいためにしたということを確認するためにチェックをいれバケットを作成をクリックする。

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

スクリーンショット 2021-06-14 104731.png

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

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

スクリーンショット 2021-06-14 110415.png

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

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

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

オブジェクトタグにあるアップロードを押しファイルを追加します。
スクリーンショット 2021-06-14 111751.png

スクリーンショット 2021-06-14 111850.png

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

 おわりに

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

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1