長年使ってきた miyakawa.me ドメインを整理することにした。
映画ブログとして運用していたサイトは閉鎖し、新しいサイト miyakawa.codes へ誘導する案内ページ1枚だけ残す構成にする。
問題は、そのページをどこに置くかだった。EC2 や Lightsail を使うほどでもない。そこで次の構成にすることにした。
Route53
↓
CloudFront
↓
S3 (Static Website)
いわゆる AWS の静的サイト構成である。
構成自体はシンプルだが、実際に設定してみるといくつかハマったポイントがあった。この記事ではそのメモを残しておく。
今回の構成
ネットワーク
Internet
│
Route53
│
CloudFront
│
S3
HTTPS
AWS Certificate Manager
↓
CloudFront
メール
Route53 (MX)
↓
Amazon WorkMail
↓
Amazon SES
S3 バケット
バケット名は miyakawa.me-static にした。miyakawa.codes 側は Lightsail で運用しているため、インフラを見た瞬間に区別できる名前にしたかったからである。
CloudFront
| 項目 | 値 |
|---|---|
| Distribution ID | E21H*********** |
| 名前 | miyakawa-me-site |
| CloudFront ドメイン | d***************.cloudfront.net |
ハマったポイント
1. S3 バケット名はグローバル
最初に S3 バケットを作ろうとして次のエラーが出た。
同じ名前のバケットがすでに存在しています
S3 バケット名は 世界で一意 なので、ドメイン名そのままだと誰かが使っている可能性がある。そのため miyakawa.me-static という名前に変更した。
2. CloudFront URL は動くのに独自ドメインが動かない
CloudFront の URL では問題なく表示された。
https://d***************.cloudfront.net
しかし https://miyakawa.me ではエラーになる。
原因は Alternate Domain Names の設定だった。CloudFront では「このディストリビューションが受けるドメイン」を明示的に設定する必要がある。ここに以下を追加することで解決した。
miyakawa.me
www.miyakawa.me
3. ACM 証明書のリージョン
CloudFront で HTTPS を使う場合、証明書は us-east-1 で作成する必要がある。
最初は東京リージョンで作ろうとしてしまい、CloudFront の証明書選択画面に出てこなくて少し迷った。これは AWS ではよくあるポイント。
4. DKIM レコードの末尾ドット
SES の DKIM 設定では以下のように 末尾にドットが付いた値 が表示される。
xxxx.dkim.amazonses.com.
Route53 では付けても問題なし。ただし DNS によっては扱いが違うことがあるので注意。
5. DNS 反映タイミング
設定が終わってもすぐには動かない。今回も以下の状態がしばらく続いた。
CloudFront URL → OK
独自ドメイン → NG
30分ほどで反映された。DNS 設定では 反映待ち の時間を見込んでおくとよい。
AWS CLI でのデプロイ
AWS CLI インストール
Homebrew の場合
brew install awscli
公式インストーラーの場合
curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"
sudo installer -pkg AWSCLIV2.pkg -target /
IAM ユーザー作成
CLI 用の IAM ユーザーを作成した。
- ユーザー名:
miyakawa-me-deploy - プログラムアクセス用のアクセスキーを発行
IAM ポリシー
管理者権限ではなく、必要な操作だけに絞ったポリシーにしている。
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:GetObject",
"s3:DeleteObject",
"s3:ListBucket"
],
"Resource": [
"arn:aws:s3:::miyakawa.me-static",
"arn:aws:s3:::miyakawa.me-static/*"
]
},
{
"Effect": "Allow",
"Action": [
"cloudfront:CreateInvalidation"
],
"Resource": "*"
}
]
}
デプロイコマンド
S3 アップロード
aws s3 sync dist/ s3://miyakawa.me-static --delete
CloudFront キャッシュ削除
aws cloudfront create-invalidation \
--distribution-id E21H*********** \
--paths "/*"
CloudFront 確認
aws cloudfront get-distribution \
--id E21H*********** \
--query 'Distribution.DistributionConfig.Origins.Items[0].DomainName' \
--output text
aws cloudfront list-distributions \
--query "DistributionList.Items[?Id=='E21H***********'].DomainName" \
--output text
S3 サイト確認
curl -I http://miyakawa.me-static.s3-website-ap-northeast-1.amazonaws.com/
まとめ
今回の構成で使ったサービスは以下の通り。
| サービス | 用途 |
|---|---|
| Route53 | DNS 管理 |
| CloudFront | CDN / HTTPS 終端 |
| S3 | 静的ファイルホスティング |
| Certificate Manager | SSL/TLS 証明書 |
| WorkMail | メール受信 |
| SES | メール送信 |
サーバを持たずに HTTPS・CDN・メール まで運用できる。小さなサイトなら、この構成はかなり便利だと思う。