1. macoshita

    Posted

    macoshita
Changes in title
+Nuxt で作ってるブログを netlify に移行してみた
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,55 @@
+成果物: https://macoshita.me
+
+最近、 [nuxt](https://nuxtjs.org/) のみで 1 からブログを作っている。
+今までは手元でビルドして GitHub Pages に [push-dir](https://www.npmjs.com/package/push-dir) でデプロイしていた。
+しかし、手元ビルドがダルくなってきたのと、ちょっとした修正・追記は GitHub 上で直接 markdown いじりたいため CD を検討。
+最初はベタに Circle CI とか考えたが、聞けば [Netlify](https://www.netlify.com/) は無料で独自ドメインに対応して 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 の設定を有効化
+
+以上。
+やろうと思えばスマホだけでできるくらい楽 :thumbsup:
+
+## 結果
+
+デプロイが自動化されて当初の目的が達成できた。
+
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/17722/d41d376f-85bd-a8c0-6f20-55e7f299762e.png)
+
+スコア的には 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 でキャッシュしてくれるからほとんど意味なかった :joy:
+
+[この記事の英訳](https://macoshita.me/blog/2018-04-18-move-netlify/)