1
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 2024-10-07

これは何?

AWSのS3を使って静的ウェブサイトホスティングの設定をしていく記事
脳死で書いているので脳死で試すこともできるはず。。。!

注意点

  • この記事のメインはホスティングの設定なので、ウェブサイトの方は本当に雑な作り
  • AWSのコンソールはUIがよく変わるので、そのうち方法変わっているかも
  • 今回のやり方は推奨されていない
    • S3だけだとHTTP通信しかできないので、ちゃんと運用する場合CloudFrontと組み合わせる必要がある(ここは今度書く)

実際にやっていく

バケットの作成

ここからバケットを作成する
スクリーンショット 2023-12-18 22.05.57.png

バケットの名前

全世界で一意である必要があるため、被らない名前にする必要がある
スクリーンショット 2023-12-18 22.07.09.png

ACLの設定

スクリーンショット 2023-12-18 22.06.58.png

ブロックパブリックアクセス設定

ここが最初の注意書きで推奨されていない設定
スクリーンショット 2023-12-18 22.08.00.png

バケットのバージョニング設定

有効にすると費用が結構かかるはず
スクリーンショット 2023-12-18 22.08.18.png

ほいバケット完成
スクリーンショット 2023-12-18 22.23.40.png

静的ホスティングをするためにバケットの設定

作成したバケットに入りプロパティタブの静的ウェブサイトホスティングを編集する
スクリーンショット 2023-12-18 22.25.25.png

ここは静的ウェブサイトホスティングを有効にして、インデックスドキュメントを設定するだけでOK
スクリーンショット 2023-12-18 22.29.11.png

バケットポリシーの設定

アクセス許可のタブに移動しバケットポリシーの編集を行う
内容は作成したバケットからオブジェクトを取得するのを許可する感じ

backets-name は自分が作成したバケット名

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

indexファイルを作成、配置

本当に適当(サイトと読んではいけないレベル)

index.html
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>静的ホスティング</title>
</head>
<body>
  <div>
    <div>
      アドベントカレンダー
    </div>
  </div>
</body>
</html>

バケットのオブジェクトタブからアップロードする
スクリーンショット 2023-12-18 22.40.37.png

スクリーンショット 2023-12-18 22.41.13.png

プロパティタブの静的ウェブサイトホスティングにエンドポイントが吐き出されている
スクリーンショット 2023-12-18 22.41.35.png

アクセスすると🎉
スクリーンショット 2023-12-18 22.41.47.png

感想

  • 頭をそんな使わなくても上から読みつつ手を動かせば同じような環境が作れるはず
  • 注意点でも書いたが自分用や遊びならいいと思うが真面目に使う場合CloudFrontも使った方が良い(今度やる)
    • コストもそこまで大きくならないはず
  • 少しAWSの勉強をしていれば誰でもできそう
1
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
1
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?