このサイトを AWS に置きました

このサイト(amegeta.com)は Astro で作った静的サイトで、AWS の S3 と CloudFront で配信しています。最初のコミットが 11月8日 23:57、公開が 11月9日 0:39 で、置くまではおよそ40分でした。

AWS にした理由

静的サイトなので置き場所はいろいろありますが、保育園予報・家電の買い時予報・WildRifter がすでに AWS で動いているので、同じところにまとめました。見る管理画面と請求を増やさないためです。

構成

  • S3(外から直接は見えない)と CloudFront。設定は CDK(TypeScript)で書いています
  • www 付きのアドレスや、/notes のように末尾のスラッシュがない URL は、CloudFront Functions で正しい URL に 301 で転送します
  • 存在しないページには、404 のステータスで専用のページを返します
  • Lambda は使っていません。CloudFront の証明書は us-east-1 に置く決まりがあり、CDK でリージョンをまたいで受け渡すと裏で Lambda が作られるので、証明書の ARN を設定ファイルに書いて渡すだけにしました

公開はコマンド1つ

npm run deploy で、ビルド → S3 へのアップロード → キャッシュの削除 → 公開後の確認(トップが 200、www が 301、ないページが 404 になるか)まで流れます。コミットしていない変更があると止まるので、手元だけの変更がうっかり公開されることはありません。公開に使う鍵は、このサイトのファイルの置き場所とキャッシュの削除にしか触れない専用のものです。

一緒に入れたもの

  • サイトマップと robots.txt
  • SNS でシェアされたときに出る画像(OGP)。HTML でデザインを組んで、スクリーンショットを撮って作っています
  • Search Console の所有権の確認に使う DNS レコードも、CDK で作っています
  • アクセス解析は、Google タグマネージャー経由の GA4
  • ロゴ・ファビコン・トップの絵を新しい SVG に差し替えました。トップの絵の雨と波紋は SVG の中で動いていて、OS の「動きを減らす」設定をオンにしている人には止まって見えます
← ノート一覧へ