【AWS】S3静的ウェブサイトホスティングの設定方法を完全ガイド！HTTPS対応まで初心者でも安心
生徒
「AWSのS3って、ホームページを公開できるって聞いたんですけど、本当ですか？」
先生
「はい、S3には静的ウェブサイトホスティング機能があり、HTMLや画像ファイルなどをアップロードするだけで公開できますよ。」
生徒
「設定って難しいですか？HTTPS対応も気になります…」
先生
「それじゃあ、S3で静的ウェブサイトを公開する方法とHTTPS対応の手順を順番に見ていきましょう！」
1. AWS S3で静的ウェブサイトをホスティングするとは？
AWS S3（Simple Storage Service）は、ファイルを保存するだけでなく、HTML・CSS・JavaScriptなどの静的ファイルをWebサイトとして公開する機能も備えています。この機能を活用すれば、サーバー不要で簡単にホームページやポートフォリオサイトを公開できます。
例えば、次のような用途に使われます：
- ポートフォリオサイトの公開
- 製品紹介ページの公開
- ランディングページのホスティング
- HTML/CSS/JSのみのシングルページアプリケーション
2. S3バケットの作成と静的ホスティング有効化
まずは、静的ウェブサイトを公開するためのS3バケットを作成します。以下の点に注意してください：
- バケット名は公開するドメイン名（例：
example.com）に合わせると便利 - 「ブロックパブリックアクセス」は無効にする必要がある
- リージョンは任意（東京リージョンなど）
バケット作成後、S3コンソールの「プロパティ」タブから「静的ウェブサイトホスティング」を有効にし、インデックスドキュメントにindex.html、エラードキュメントにerror.htmlなどを設定します。
3. HTMLファイルのアップロードとパーミッション設定
次に、HTML・CSS・画像ファイルなどをS3バケットにアップロードします。アップロード後、それらのファイルをパブリックに公開する必要があります。
具体的には、バケットポリシーを設定して、全員に閲覧権限を与えるJSONを貼り付けます。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your-bucket-name/*"
}
]
}
your-bucket-nameの部分は実際のバケット名に変更しましょう。
4. ウェブサイトURLでアクセス確認
設定が完了すると、S3の「静的ウェブサイトホスティング」の欄にエンドポイントURLが表示されます。そこにアクセスすると、アップロードしたindex.htmlが表示されて、公開されたことを確認できます。
例：http://your-bucket-name.s3-website-ap-northeast-1.amazonaws.com
ただし、このURLはHTTPSに対応していません。HTTPS対応を行うには、次のステップでCloudFrontを利用します。
5. HTTPS対応するには？CloudFrontとの連携
静的ウェブサイトをHTTPS対応させるには、Amazon CloudFrontを使ってS3バケットのコンテンツを配信する仕組みを作ります。
CloudFrontディストリビューションを作成し、オリジンドメインにS3バケットのURLを指定します。
- オリジンタイプ：「カスタムオリジン」
- オリジンドメイン名：S3の静的ホスティング用URL
- ビューアプロトコルポリシー：「Redirect HTTP to HTTPS」推奨
また、HTTPS対応のためにACM（AWS Certificate Manager）でSSL証明書を作成し、CloudFrontに紐付けます。
6. 独自ドメインとHTTPSを同時に設定する手順
独自ドメインを使ってS3の静的サイトを公開し、HTTPS対応したい場合は、以下の手順を踏みます：
- Route 53でドメインを管理する
- ACMでSSL証明書を発行（バージニア北部リージョンで）
- CloudFrontでオリジンにS3バケットを指定し、SSL証明書を設定
- Route 53でAレコードをCloudFrontに向ける
これにより、https://example.com の形式で安全なアクセスができるようになります。
7. エラーページやリダイレクト設定も可能
S3の静的ウェブサイトホスティングでは、404ページや403ページのカスタマイズも可能です。「エラードキュメント」に指定したHTMLが表示されるようになります。
また、リダイレクト設定を活用することで、ドメインの統一（wwwなしにリダイレクトなど）も可能です。
<meta http-equiv="refresh" content="0;url=https://www.example.com/" />
上記のようにindex.htmlに書けば自動リダイレクトされます。
8. デプロイを効率化するには？CI/CDやCLI活用術
頻繁にHTMLを更新するようなウェブサイトでは、AWS CLIやCI/CD（GitHub Actionsなど）を使うと便利です。
例えば、CLIで一括アップロードするコマンドは次の通りです：
aws s3 sync ./public s3://your-bucket-name --delete
このコマンドはローカルの./publicディレクトリ内のファイルを、S3バケットと同期させます。
