Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

最初に

これまで個人用テストサーバーを海外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でメールフォーム作る
hanuman6
猫と暮すフロントエンドエンジニア
https://hanuman6.work/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away