Posted at

Nuxt で作ってるブログを netlify に移行してみた

More than 1 year has passed since last update.

成果物: https://macoshita.me

最近、 nuxt のみで 1 からブログを作っている。

今までは手元でビルドして GitHub Pages に push-dir でデプロイしていた。

しかし、手元ビルドがダルくなってきたのと、ちょっとした修正・追記は GitHub 上で直接 markdown いじりたいため CD を検討。

最初はベタに Circle CI とか考えたが、聞けば Netlify は無料で独自ドメインに対応して CD もできるということで、これでええやん感がハンパなかったので移行してみた。


プロジェクト概要

https://github.com/macoshita/macoshita.me

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 のキャッシュ設定

https://www.netlify.com/blog/2017/02/23/better-living-through-caching/

上記に細かく書いてあるけど 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 でキャッシュしてくれるからほとんど意味なかった

この記事の英訳