成果物: https://macoshita.me

最近、 nuxt のみで 1 からブログを作っている。
今までは手元でビルドして GitHub Pages に push-dir でデプロイしていた。
しかし、手元ビルドがダルくなってきたのと、ちょっとした修正・追記は GitHub 上で直接 markdown いじりたいため CD を検討。
最初はベタに Circle CI とか考えたが、聞けば Netlify は無料で独自ドメインに対応して CD もできるということで、これでええやん感がハンパなかったので移行してみた。

プロジェクト概要

npm run generate を叩くと dist ディレクトリに静的ファイルが出力される。
dist をまるごとどこかに上げればただの nginx とかでも動く構成。

Netlify 管理画面での操作

上記リポジトリを選ぶ
ビルドコマンドと出力ディレクトリを入力
- netlify.toml で指定してる場合は不要
カスタムドメイン設定
- ドメイン購入
- netlify DNS の設定をポチポチ進めると 4 つの Nameservers ホスト名が作られるので、ドメインレジストラで設定
- 自分は Amazon Route 53 で買ったので Route 53 マネコンの Registered domains > (買ったドメイン) の Name servers の設定を書き換え
HTTPS 設定
- Verify DNS configuration 押すだけで Let's Encrypt の設定をしてくれる
  - が、上記の DNS 設定してから 1 時間ほどまたされるのでここで作業中断
- 上記がうまくいったら Force HTTPS の設定を有効化

以上。
やろうと思えばスマホだけでできるくらい楽

結果

デプロイが自動化されて当初の目的が達成できた。

スコア的には GitHub Pages の時と変わらず。 CSS をほとんど書いてないから当然っちゃ当然。

おまけ: Netlify のキャッシュ設定

上記に細かく書いてあるけど max-age=0, must-revalidate, public となっている。
must-revalidate は、キャッシュの有効期限が切れてたら必ずサーバに問合せて変更が無いか確認しろ、変更が無ければキャッシュを使って良いという directive 。
Netlify は自動で ETag を付けてくれて、さらに max-age=0 だから、
ざっくりいうと「常にサーバに問合せて更新がない限りはキャッシュを使え」という設定。

上のブログには「常に問合せて重くないの？」に対する答えも書いてあって、
「俺らの CDN が爆速で変化なしって返すし http/2 でリクエストも並列になるから一瞬だよ」
とのこと。

とはいえ Cache Busting 用にハッシュ付いた JS, CSS はもったいなくないかと思って Cache-Controll いじってみたけど、 https://macoshita.me については service worker でキャッシュしてくれるからほとんど意味なかった

この記事の英訳