読者です 読者をやめる 読者になる 読者になる

Carpe Diem

備忘録。https://github.com/jun06t

S3 + CloudFrontにした時にハマったこと

概要

静的Webサイトを用意して、HTTPSでアクセスできるようCloudFrontを前に用意したのですがそこでハマったことをまとめます。

ERR_SSL_VERSION_OR_CIPHER_MISMATCH

問題

SSL証明書を設定したのにERR_SSL_VERSION_OR_CIPHER_MISMATCHというエラーがでてページが見れませんでした。

  1. CloudFrontの設定でSSL証明書を指定
  2. Route53でCloudFrontにCNAMEを設定

としたのにうまく行きません。

解決方法

実はCloudFront側でCNAMEの設定を入れる必要がありました。

f:id:quoll00:20170210010225p:plain

XMLで表示される

問題

SSLの問題が解決できたので意気揚々と

https://www.mysite.com/

にアクセスしたところ、index.htmlのページは表示されずS3のバケット一覧がXMLで表示されました。

解決方法

CloudFrontの設定でDefault Root Objectに読ませたいオブジェクトを指定します。

f:id:quoll00:20170210011539p:plain

※ただしこれはS3バケット指定だから起きるエラーで、次のようにstatic websiteでインデックスドキュメントを指定するとDefault Root Objectを指定しなくても大丈夫です。

ルート以外のURLパスで403エラー

問題

https://www.mysite.com/

にはアクセスできるのですが、

https://www.mysite.com/login

だと403エラーが出てしまいました。

解決方法

CloudFrontのOriginに、S3のバケットではなくstatic websiteのエンドポイントを指定することで解決できます。

S3側でエンドポイントを取得し、

f:id:quoll00:20170210011029p:plain

CFのオリジンに指定します。

f:id:quoll00:20170210011040p:plain

ただし、注意としてよくあるCloudFrontだけアクセスできるバケットポリシーみたいな設定はできません。
全オブジェクトに読み取り許可をする必要があります。

stackoverflow.com

ソース