自分はエンジニアではある。しかし、最近あまりコードが書けていない。 （厳密には、コードは書いているのだが主戦場のソレではないというか、Lua とか書いていたりする）
ブログの開発であれば、フロントエンドエンジニアである自分にはマッチしてそうだし、開発が止まっても誰にも迷惑をかけないし気楽にできそう。
最初に考えるべきはやっぱり要件かなと思う。 ブログの開発なんてしたことはないので想像することしかできないが、こんな使い勝手だといいな。というのを下記にまとめてみた。
まあ、それっぽくはなったかなと思う。サーバサイドはこれからもっとお勉強が必要そうだ。 せっかくブログをはじめたのだし、そういうのをどんどん残していきたい。
今となっては普通すぎる選択。特記事項なし。
ちなみに、自分は Vue やら Angular やらは触ったことがないので候補にすら入っていない。（Svelte は興味があるのでちらっと頭をよぎった）
UI ライブラリとしては Chakra を選択した。
最初は Mantine というライブラリを使っていたが、だんだんとテーマのカスタマイズ性能に不満を持つようになった。 特にブログ実装だと MDX のスタイリングをするのにそこそこ独自のカスタマイズが必要になるように思う。
他のライブラリを探すにあたって候補は MUI と Chakra だったが、結果的には Chakra を採用することにした。 Chakra は思想が一貫していて賛成できるし、コンポーネントの品質が高いように思う。
デプロイ先は AWS CloudFront にすることとした。
正直、あんまり他の静的サイトホスティングサービスに詳しくないのでなんともいえない。 会社の知り合いが Firebase Hosting を推していたりするし、見た感じ便利そうなのでいいなあと思いつつ AWS で構築してしまったのでこれでいく。別に不満もない。
まじかよ？って思ったが、そういうものらしい。 解決するには、自分でパスを書き換える CloudFront Functions を書かなければならないらしい。（ちょっと前まで Lambda@Edge でやってた模様） こちらをご参照ください。
とりあえず、いろんな作業をしてしまったので、必要だったことをすべて列挙することとする。 前提として、当たり前に HTTPS アクセスのみの状態を作ろうとしている。
この作業は SSL 証明書の発行のためにも、ブログの公開のためにも必要となる。 単純に Route53 でドメインを登録するだけでいい。
※ 安いけど、有料です。
先程作ったドメイン名を利用して DNS 検証で SSL 証明書を払い出す。 別の方法としてメールを利用した SSL 証明書の払い出しも可能だが、ドメイン名のほうが楽だと思う。
S3 にブログをアップロードするが、S3 バケット情報や AWS アカウント情報などの秘匿情報は環境変数化しておきたいし、 実行は npm scripts から行いたいため。
今回はそれを実現するために dotenv-run-script というツールを利用することにした。
{
"scripts": {
"deploy": "npm run deploy:s3 && npm run deploy:cf",
"deploy:s3": "dotenv-run-script .env.local -- deploy:s3:main",
"deploy:s3:main": "aws s3 sync --region ap-northeast-1 --delete ./out s3://${AWS_S3_BUCKET}",
"deploy:cf": "dotenv-run-script .env.local -- deploy:cf:main",
"deploy:cf:main": "aws cloudfront create-invalidation --region ap-northeast-1 --distribution-id ${AWS_CLOUD_FRONT_ID} --paths '/*'"
}
}
当然、オリジンに S3 バケットを指定する。 また、SSL 証明書も払い出されているので代替ドメイン名に、作成したドメイン名を指定して SSL 証明書を設定する。
※ 代替ドメイン名は CNAME レコードらしい、ALIAS レコードのほうが料金的にいいはずなんだけど、どうやるんだろ？ここでは関係ないのかな？