Zenn
🔥

kindのチートシートサイトにNuxt.jsのFull Static Generationを導入してみた

2020/11/21に公開
Nuxt
kind
tech

※本記事はブログからの移行記事のため、一部内容が古くなっている場合があります(また時間があるときに改稿するかもしれません)

つい先日、Nuxt.jsのv2.13がリリースされました。

今バージョンでいくつか機能追加や改修が行われていますが、 Full Static Generation という機能が目玉となっています。

Full Static Generationとは

簡潔に言えば、ビルド時に外部APIにリクエストを送り、事前に静的データとして生成しておくことができる機能です。

通常、ページアクセス時に都度asyncDataやfetchから外部APIが叩かれますが、
こちらの機能を使うと事前に必要なデータをprefetchできるので、

  • バックエンドのインフラコストの低減
  • 可用性向上
    • 外部APIの影響を受けにくくなる
  • セキュリティ向上
    • APIリクエストに必要なクレデンシャルをクライアントに渡す必要なし

といった効果が期待できます。

Reactをお使いの方には、いち早くNext.js v9.3で導入されたgetStaticPropsと類似した機能であると考えると、わかりやすいかもしれません。

今回の題材

今回は、先日公開した以下のサイトで元々Nuxt.jsを利用していたので、
そこでFull Static Generationを試してみました。

https://kind-cheat.now.sh

こちらは、Docker上でKubernetesクラスターを簡単に構築できる kind というツールのチートシートサイトで、
コマンド例やyamlのサンプル例などを載せています。

個々のコマンドサンプルは、microCMS という国産のHeadless CMSでコンテンツ管理しており、
TOPページを開く度にコンテンツ取得のためのAPIリクエストが走っている状態でした。
よって今回は、Full Static Generationによって、事前に動的コンテンツ部分を静的化するのが目標となります。

実際にやってみた

  • Nuxt.jsのリリースノートを確認

今回v2.13.0が最新リリースとなることを念のため確認しました。

https://ja.nuxtjs.org/guide/release-notes

  • package.jsonでNuxt.jsのバージョンを編集

先ほど確認したバージョンに変更します。

-    "nuxt": "^2.0.0",
+   "nuxt": "2.13.0",
  • yarn.lock削除
$ rm -v yarn.lock
  • node_modules削除
$ rm -rf node_modules
  • 再インストール
$ yarn
  • Nuxt.jsのバージョン確認
$ ./node_modules/nuxt/bin/nuxt.js --version
@nuxt/cli v2.13.0
  • nuxt.config.js編集
export default {
(省略)
+  target: 'static'
}
  • package.jsonでnpm scripts追加

今回Full Static Generationの導入によって追加されたnuxt exportのaliasを貼ります。

+    "export": "nuxt export",
  • Full Static Generation

nuxt exportする前に事前にnuxt buildしておく必要があるので、以下のように実行します。

$ yarn build && yarn export
yarn run v1.22.4
$ nuxt build
ℹ Production build                                                                        20:31:15
ℹ Bundling for server and client side                                                     20:31:15
ℹ Target: full static                                                                     20:31:15
✔ Builder initialized                                                                     20:31:15
✔ Nuxt files generated                                                                    20:31:15

...
# nuxt exportの準備が整った旨のログが出る
ℹ Ready to run nuxt export                                                                20:31:31
✨  Done in 17.63s.
$ nuxt export
ℹ Generating output directory: dist/                                                      20:31:33
ℹ Full static mode activated                                                              20:31:33
ℹ Generating pages                                                                        20:31:33

...

✔ Generated route "/"                                                                     20:31:34
✔ Client-side fallback created: 200.html                                                  20:31:34
ℹ Ready to run nuxt serve or deploy dist/ directory                                       20:31:34
✨  Done in 2.99s.
  • 中身を確認

dist/_nuxt/static/<buildした時間のunix time>/payload.jsに以下のようなJSONがエクスポートされていることが確認できたらOKです。
今回は、microCMSから取得したコンテンツの一部分(コマンド例など)が正常に取得されていることが事前に確認できます。

dist/_nuxt/static/1592652692/payload.js:1:__NUXT_JSONP__("/", (function(a,b,c,d){return {data:[{cards:[{id:"5it_gh5eg",createdAt:"2020-05-27T15:39:16.845Z",updatedAt:"2020-05-30T17:22:36.659Z",title:"シングルノードクラスターを構築",code:"kind create cluster --config - \u003C\u003CEOF\nkind: Cluster\napiVersion: kind.x-k8s.io\u002Fv1alpha4\nnodes:\n- role: control-plane\nEOF",version:a},
...
  • デプロイ

ホスティングとしてVercelを利用しているので、BUILD COMMANDを以下のように変更した後、masterにマージしてデプロイしました。

$ npm run build && npm run export

  • 最終確認

ページアクセス時にAPIへのXHRリクエスト が走っていないことを念のため確認したら完了です。

感想

フロントエンド若葉マークな自分でも非常に簡単に導入できました。
コンテンツ自体の内容があまり変わらないブログのようなものを運営している方や、
Jamstackなサイトを作りたい方には特におすすめです！

参考

https://ja.nuxtjs.org/blog/going-full-static

Discussion