Help us understand the problem. What is going on with this article?

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 の設定を有効化

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

結果

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

image.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:

この記事の英訳

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした