0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-05-09

■目的

S3でバケットを作成し、静的ウェブサイトをホスティングする。
さらっと用語を復習。

S3…オブジェクトストレージサービス、安価、容量無制限
バケット…オブジェクトを入れる箱
オブジェクト…データ

Step 1:S3バケットの作成

1.バケットを作成、をクリック
S3_1.png

2.適当な名前を付ける

S3のバケット名は一意であり、作成後変更できないので注意。
(変更したい場合は、新規でバケット作成してデータをそのバケットに移動する)

S3_2.png

💡補足

バケットタイプ 説明
汎用 オリジナルの S3 バケットタイプであり、ほとんどのユースケースやアクセスパターンに推奨
ディレクトリ アベイラビリティーゾーンまたは Local Zone のバケット場所タイプでバケットの作成をサポート

3.オブジェクト所有者を設定する
S3_3.png

4.ブロックパブリックアクセス設定
※すべてブロックからチェックを外す
S3_4.png

ブロックパブリックアクセス…S3バケットやオブジェクトを誤ってインターネット上に公開してしまうのを防ぐための機能

情的ウェブサイトホスティングをする場合は、ブロックをオフにする。

5.バケットのバージョニング
S3_5.png

バージョニング…オブジェクトの変更履歴が保持される。
意図しない削除や上書きをした際に、1世代前に戻せて便利✨

6.タグの設定
特に設定はしない。
S3_6.png

7.デフォルトの暗号化
デフォルトのままにする。
S3_7.png

8.詳細設定>オブジェクトロック
今回は無効のままにする。
S3_8.png

オブジェクトロック…オブジェクトが削除されないようにするための保護機能

9.バケットを作成、をクリック
10. 正常に作成されたことを確認

S3_9.png

11.対象のバケット>アクセス許可タブ>「バケットポリシー」の編集をクリック
以下のIAMポリシーを張り付け、「変更を保存」をクリック

s3-bucket-test.2025/*の箇所は、自分のバケット名にしてください。
このVersion、はIAMポリシーのバージョンを指しており、現時点での最新のIAMポリシーバージョンは"Version": "2012-10-17" となるため、編集はしないこと!

{
    "Version": "2012-10-17",(★編集しないこと!)
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::s3-bucket-test.2025/*"★ここを編集!
        }
    ]
}

Step 2:静的ウェブサイトホスティングの有効化

1.S3>汎用バケット>作成したバケットをクリック
S3_10.png

2.S3のプロパティタブをクリック
一番下までスクロール。
S3_11.png

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

S3_12.png

4.編集する
情的ウェブサイトホスティングを「有効にする」を選択
インデックスドキュメントを入力
編集が終わったら、「変更を保存」をクリック
S3_13.png

Step 3:ウェブページ(html)の作成

  1. test.htmlを作成する。this is test page.とだけ記載する。
  2. S3のバケットを選択し、test.htmlをアップロードをクリック
  3. アップロードに成功した、表示があればOK

S3_14.png

Step 3:アクセス

  1. 対象のバケット>プロパティ静的ウェブサイトホスティング
    パケットウェブサイトエンドポイント、を確認する
    S3_15.png

2.アクセスする
無事アクセスできた✨

S3_16.png

💡検証で作成した場合、バケットの削除をすること!

■エラー&詰まった個所

バケットウェブサイトエンドポイントにアクセスしたら403 Forbidden

事象:バケットウェブサイトエンドポイントにアクセスしたら403 Forbiddenが表示された。
S3_17.png

原因:パブリックアクセスを許可していなかったため。
解決策:パブリックアクセスを許可し、バケットポリシーの編集

②JSONエラー「The policy must contain a valid version string」

事象:S3のバケットポリシーを編集中に、JSONのエラーがでた。
S3_18.png

原因:ポリシーの "Version" の値が正しくない。
"Version": "2012-10-17" の箇所の編集、これを日付だと勘違いし、2025に変更していた。

解決策:"Version": "2012-10-17" を編集しない。
このVersion、はIAMポリシーのバージョンを指しており、現時点での最新のIAMポリシーバージョンは"Version": "2012-10-17" となるため、編集はしないこと!

■所感

S3はSAAの資格勉強の際に「ストレージ+web公開もできる」ということで、個人的にいいな!と思ったサービスでした。ストレージがただデータを保管する箇所、っていうのはもう古いのかな。
バケット作成自体は簡単だけど、アクセス設定回りの設定はしっかり設定する必要がありそう。
あと、JSONでまたつまずいてしまった(笑)無効な構文だとエラーが表示されることを学習した。
バケット削除の際に、バケット名を入力する必要があるがコピペでOKだった。
(だいたいそんなもんなの??)

■参考サイト

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?