4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AWSのS3を使用した静的Webサイトのホスティング

Last updated at Posted at 2025-01-06

はじめに

AWSへの苦手意識を克服するために、まずはAWSのサービスを触ってみる必要があると思い、個人的に取り組みやすそうな「S3」から学習することにしました。
今回はS3の基礎を学びながら簡易的なWebサイトのホスティングを行ったので記事にまとめます。

S3とは

S3 (Amazon Simple Storge Service)はAWSが提供するオブジェクトストレージサービスであり、様々なデータをクラウド上に保存することができます。

特徴

  • 高い可用性と耐久性(ナンバーナイン:99.9999999%の耐久性を持つ)
  • 低コスト(従量課金制)
  • 容量無制限
  • 静的Webサイトの公開(サーバー不要) 等

バケットの作成

S3に保存するためには「バケット」と呼ばれる、オブジェクトを格納するコンテナ(入れ物)を作成する必要があります。
マネジメントコンソールからS3を選択し、S3コンソールから「バケットを作成」ボタンを押下するとバケットの設定画面に遷移します。

オブジェクトとは一つのファイルを表しています。
「オブジェクトストレージ」では、オブジェクト単位でデータが管理されます。

スクリーンショット 2024-12-30 14.51.57.png

▪️バケットタイプ
バスケットタイプは、使用するストレージクラスやアクセス頻度等によって考慮する必要があります。
今回はデフォルトで選択されている「汎用」バケットを使用します。

▪️バケット名
バケットの命名規則(例:小文字のみ、ハイフン使用可など)に従いバケット名を入力します。
詳しいルールはバケット命名規則をご確認ください。

スクリーンショット 2024-12-29 0.40.15.png

▪️オブジェクト所有者
デフォルトで「ACL無効」が選択されいるのでこのまま進めます。

ACL(アクセスコントロールリスト)とは、バケットやオブジェクトへのアクセスを管理するための仕組みです。
現在ではACLを無効化し、「バケットポリシー」や「IAMポリシー」といったアクセス制御を使用することが推奨されています。

▪️ブロックパブリックアクセス設定
バケットおよびオブジェクトへのアクセスを制限します。
S3でWebサイトを公開するには外部からのアクセスを許可する必要があるため、チェックボックスを外しておきます。

※ブロックパブリックアクセスを無効にするだけではURLにアクセスすることができません。後ほど記載する「バケットポリシーの設定」を行うことで外部からのアクセスを許可できるようになります。

スクリーンショット 2025-01-05 19.17.29_0.png

▪️バケットのバージョニング
今回は「無効にする」を選択しておきます。
バージョニングを有効にすることで、削除等の誤った操作をしてしまったオブジェクトの復元が可能です。

▪️タグ
今回はタグの作成は行いませんが、バケットやオブジェクトに「タグ(ラベル)」を付けることで、リソースの整理(分類、管理、検索等)に役立ちます。

▪️デフォルトの暗号化
S3のバケットにアップロードされたオブジェクトは、保存時に自動で暗号化されます。
今回はデフォルトで設定されている「SSE-S3」を使用し、バケットキーは「無効にする」を選択します。

スクリーンショット 2025-01-05 19.16.23_0.png

「バケットを作成」ボタンをクリックするとバケットが作成されます。

静的Webサイトのホスティング

Webサイトを公開するために、以下の設定を行う必要があります。

  • 作成したファイルのアップロード
  • アクセス権限の設定
  • バケットの有効化

先ほど作成したバケットをクリックし設定を行います。

スクリーンショット 2025-01-06 22.43.48_0.png

▪️オブジェクトタブ
ドラック&ドロップでファイルをアップロードします(「アップロード」ボタンからでも可能)。

スクリーンショット 2025-01-06 22.46.53_0.png

▪️アクセス許可タブ
バケットポリシーを設定しなければWebサイトを閲覧することができません(アクセス時に403エラーが発生します)。
「編集」ボタンを押下し、josn形式でバケットポリシーを設定します。

スクリーンショット 2025-01-06 22.50.08_0.png

今回は、公式のチュートリアルに記載されているバケットポリシーを使用します。

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

※バケット名("arn:aws:s3:::Bucket-Name/*")のBucket-Nameの部分は、作成したバケット名を記載します。

スクリーンショット 2025-01-06 22.51.43_0.png

バケットポリシーが記載できたら「変更を保存」ボタンを押下します。

▪️プロパティタブ
「静的Webサイトホスティング」の「編集」ボタンをクリックし、ホスティングの設定を行います。

スクリーンショット 2025-01-06 22.54.02_0.png
スクリーンショット 2025-01-06 22.54.45_0.png

①Webサイトホスティングの有効化
デフォルトでは無効になっているため「有効にする」を選択します。

スクリーンショット 2025-01-05 20.13.44_0.png

②インデックスドキュメントの設定
インデックスドキュメントとは、ファイル名を省略したURL('/')へのアクセスで表示されるページを指します。
一般的にindex.htmlファイルがインデックスドキュメントに設定されます。

スクリーンショット 2025-01-05 20.15.45_0.png

最後に

S3を使用したWebサイトの公開は、サーバーの立ち上げ等の必要がなく、簡単にホスティングができることが分かりました。
公式では静的WebサイトのホスティングにはAWS Amplifyの使用を推奨されていたので、S3と比較をしながらAmplifyを使用してのホスティングにも挑戦したいと思います。

4
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
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?