はじめに
このブログはAmazon S3上に静的Webサイトとしてホスティングされています。
ただ、S3はそのままではHTTPSを使用できないため、HTTPSを使用するためにはAmazon CloudFrontを使用する必要があります。
ハマったこと
この設定を行う時にハマったことは、URLの末尾がスラッシュで終わると（index.htmlでアクセスしないと）ブラウザで画面が表示できず、ファイルのダウンロードとなってしまうことでした。
ルートディレクトリはスラッシュで終わっても正しく表示されるのですが、サブディレクトリ以下を指定すると同様の事象となります。
OK
https://4chr.ist/
NG
https://4chr.ist/post/
index.htmlでアクセスすると正しく表示されます。
OK
https://4chr.ist/post/index.html
HTTPヘッダのContent-Typeを見ると、index.htmlの場合はtext/htmlになるのに、末尾がスラッシュの場合、application/octet-stream となります。
原因
CloudFrontのオリジンとして設定していたS3のURLがウェブサイトホスティング用のエンドポイントではなく、バケットアクセス用のエンドポイントとなっていました。
S3にはエンドポイントがあることは知っていましたが、ウェブサイトホスティング用とバケットアクセス用で異なることを知りませんでした。
ウェブサイトエンドポイント
s3-website-ap-northeast-1.amazonaws.com
http://docs.aws.amazon.com/ja_jp/general/latest/gr/rande.html#s3_website_region_endpoints
バケットアクセス（REST API）エンドポイント
s3-ap-northeast-1.amazonaws.com
http://docs.aws.amazon.com/ja_jp/general/latest/gr/rande.html#s3_region
特に、CloudFrontでオリジンを指定する時にクリックすると自動表示されるエンドポイントがウェブサイトエンドポイントではなかったので見落としてしまいました。
解決
CloudFrontでオリジンとなるS3を設定する際にOrigin Domain Nameにウェブサイトエンドポイントを指定します。
まとめ
- S3のエンドポイントはバケットアクセス（REST API）用とウェブサイトホスティング用の二種類がある。
- ウェブサイトホスティングの場合はウェブサイトホスティング用のエンドポイント（URL中にwebsiteを含むもの）を使う。