最初に
これまで個人用テストサーバーを海外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とかでも一緒かと思う。
ポイントとしては
- Route53の設定のためにバケット名は当てたいドメイン名にする。
- wwwありなしを統一させるためにバケットはwwwありなし、2つ用意して片方にリダイレクトを設定する。
- Route53はバケット名とドメイン名が一緒だと自動でAlias Targetに出てくれて簡単
ここまででhttpでの独自ドメインでS3の運用ができた。
AWS Certificate Managerで証明書を取得
手順に従って取得する。
メール認証かDNS認証かあるが、メール認証だとwhoisに記載のメアドにメールが飛んでくれず詰まったので、DNS認証を使用した。 Route53でドメインを設定していれば「Route53でのレコードの作成」というボタンがあるので、それを押すのがてっとり早かった。
注意点としては証明書のドメインはワイルドカードが使えるとあるが、*.hogehoge.comとするとhogehoge.com自体は証明書エラーになるという落とし穴があったため、ワイルドカードじゃないドメインも追加で入れなければならない。
CloudFrontの設定
こちらの記事が参考になった。
ポイントとしては
- 設定を変更したあとのin progressが鬼長い。
- 静的ホスティングとして使う場合、キャッシュのコントロールが難しい。。
結果
追記
CloudFrontでキャッシュされないようにする(本末転倒感)
- Allowed HTTP Methodsをすべてに（GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE）
- Object CachingでMinimum TTL, Maximum TTL, Default TTLをすべて０（秒）に
- 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でメールフォーム作る