AWS
S3
route53
CloudFront
AWSCertificateManager

Cloudfront+S3で静的ホスティング(SSL)

最初に

これまで個人用テストサーバーを海外VPSのVULTRにLAMP環境を立てて、Let's Encryptで証明書を入れていたけれど、Vue.jsやFirebaseとかPWAなどを試す機会がほとんどで、よくよく考えてみたらMySQLもPHPもまったく使ってなかった\(^o^)/。なのでAWSを使ってサーバレスに移行してみることにした。

構成

ムームードメインで取得したドメインをRoute53に設定。ファイルはS3に配置。ただS3だけではhttpsには出来ないみたいなので、CloudFrontを組み合わせる。証明書発行はAWS Certificate Managerで発行。(もちろん$600/月も払えないのでSNI SSLですw)

S3に独自ドメインを当てる

ほぼこの記事通りでうまくいった。
ムームードメインの場合だけど、お名前.comとかでも一緒かと思う。

ムームードメインで取得した独自ドメインをAmazon S3に適用する手順

ポイントとしては

  • Route53の設定のためにバケット名は当てたいドメイン名にする。
  • wwwありなしを統一させるためにバケットはwwwありなし、2つ用意して片方にリダイレクトを設定する。
  • Route53はバケット名とドメイン名が一緒だと自動でAlias Targetに出てくれて簡単

ここまででhttpでの独自ドメインでS3の運用ができた。

AWS Certificate Managerで証明書を取得

手順に従って取得する。
メール認証かDNS認証かあるが、メール認証だとwhoisに記載のメアドにメールが飛んでくれず詰まったので、DNS認証を使用した。 Route53でドメインを設定していれば「Route53でのレコードの作成」というボタンがあるので、それを押すのがてっとり早かった。

注意点としては証明書のドメインはワイルドカードが使えるとあるが、*.hogehoge.comとするとhogehoge.com自体は証明書エラーになるという落とし穴があったため、ワイルドカードじゃないドメインも追加で入れなければならない。

AWS Certificate Manager(ACM)でワイルドカード証明書を発行する際の注意事項

CloudFrontの設定

こちらの記事が参考になった。

CloudFront で S3 静的ウェブサイトホスティングを SSL/TLS に対応させる

ポイントとしては

  • 設定を変更したあとのin progressが鬼長い。
  • 静的ホスティングとして使う場合、キャッシュのコントロールが難しい。。

結果

sample.png

追記

CloudFrontでキャッシュされないようにする(本末転倒感)

  • Allowed HTTP Methodsをすべてに(GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE)
  • Object CachingでMinimum TTL, Maximum TTL, Default TTLをすべて0(秒)に
  • Query String Forwarding and CachingをForward all, cache based on allに
  • Error Pagesで主要HTTP Error CodeのTTLを1(秒)に

http => httpsリダイレクト

Cloudfrontの設定でViewer Protocol PolicyをRedirect HTTP to HTTPSにするとhttpでアクセスがあるとhttpsにリダイレクトしてくれる。

WWWあり・なしリダイレクト

WWWなしに統一したかったが、Cloudfrontをかませている場合、上記のS3のバケットをWWWあり・なし2つ用意するだけではリダイレクトしなかった。
Cloudfront側でもwwwありのDistributionsを追加する必要がある。

ただ、リダイレクト用のDistributionsはOrigin Domain Nameを設定するときに、自動で出るプルダウンから選ぶのではなく、S3のエンドポイント(www.hogehoge.com.s3-website-ap-northeast-1.amazonaws.com) を入れないといけない。ここハマった。。

もちろんRoute53のAレコード(Aliasを選択)にwwwありのCloudfront Distributionsを追加しておく。これでやっとwwwでアクセスするとwwwなしにリダイレクトされるようになった。

次回

  • API Gateway、DynamoDB、Lambdaと組み合わせてVue.jsのバックエンド作る
  • Simple Email ServiceとLambdaでメールフォーム作る