AWS S3で静的ウェブサイトを簡単に公開する方法

tkmi
2024-12-25
2024-12-25

お疲れ様です。

今回はAWS S3を使って、Webサイトを公開してみたいと思います。

AWS S3(Simple Storage Service)は、静的ウェブサイトをホストするためのシンプルかつコスト効率の高いソリューションです。このブログ記事では、AWS S3を使った静的ウェブサイトの公開手順を解説します。また、HTTPS対応やカスタムドメインの設定方法、ベストプラクティスについても触れます。

1. AWS S3で静的ウェブサイトをホスティングするメリット

簡単: サーバー管理の必要がなく、数クリックでウェブサイトを公開可能。
コスト効率: 使用したストレージ量とトラフィックに応じた課金で無駄がない。
スケーラブル: アクセスが急増しても自動で対応。
グローバル対応: CloudFrontと組み合わせて、世界中のユーザーに高速配信可能。

2. 公開の手順

S3バケットを作成する

AWSマネジメントコンソールにログインします。
「S3」サービスを選択し、新しいバケットを作成。
「バケット名」はユニークである必要があります(例: my-static-website)。
バケットの「パブリックアクセス設定」で「パブリックアクセスをすべてブロック」のチェックを外し、アクセスを許可します。

注意: 「パブリックアクセスをすべてブロック」のチェックを外し(=パブリックアクセスをブロックしない)ますが、基本的にはチェックを入れて、公開アクセスはカスタマイズする方がよいでしょう。

ウェブサイトファイルをアップロードする

HTML, CSS, JavaScriptなど、静的ウェブサイトのファイルをローカルからS3にアップロードします。
フォルダ構造例:

/index.html
/styles.css
/images/logo.png
静的ウェブサイトホスティングを有効化

S3バケットの「プロパティ」タブから「静的ウェブサイトホスティング」を選択。
「インデックスドキュメント」に「index.html」 を指定。
必要に応じて「エラードキュメント」に「error.html」を指定。

パブリックアクセスを許可する

「アクセス許可」タブでバケットポリシーを設定し、ファイルをパブリックにします。
例: バケットポリシー

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

「your-bucket-name」を作成したバケット名に置き換えます。

ウェブサイトをテストする

S3が生成するウェブサイトエンドポイント(例:http://your-bucket-name.s3-website-region.amazonaws.com)をブラウザで開き、動作を確認。


3. HTTPSとカスタムドメインを設定する方法

HTTPS対応

S3単体ではHTTPSがサポートされていないため、CloudFrontを併用してHTTPS化を行います。CloudFrontディストリビューションを作成し、オリジンにS3バケットを指定します。
AWS Certificate Manager(ACM)でカスタムドメインのSSL証明書を発行してCloudFrontに設定。

カスタムドメインを利用

AWS Route 53または他のDNSプロバイダを使って、カスタムドメインをCloudFrontディストリビューションに関連付けします。


4. ベストプラクティス

キャッシュコントロール

更新頻度の高いコンテンツにはキャッシュを短く設定します。
S3のメタデータでキャッシュヘッダーを指定可能です。

セキュリティを考慮

必要最小限のアクセス許可を設定(読み取り専用)することが推奨されています。
オリジンアクセスコントロール(OAC)を利用し、直接のバケットアクセスを制限(CloudFront利用時)します。

ログの有効化

アクセスログを有効化し、ユーザーのアクセスパターンを分析。

CloudFrontとの連携

S3単体ではなく、CloudFrontを利用してパフォーマンスとセキュリティを向上させます。


5. まとめ

AWS S3は、シンプルかつスケーラブルな静的ウェブサイトホスティングを提供します。CloudFrontやRoute 53を組み合わせることで、HTTPSやカスタムドメインも簡単に対応可能です。