Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@macoshita

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

成果物: 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 の設定を有効化

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

結果

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

image.png

スコア的には 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 でキャッシュしてくれるからほとんど意味なかった :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
7
Help us understand the problem. What are the problem?