kindのチートシートサイトにNuxt.jsのFull Static Generationを導入してみた
※本記事はブログからの移行記事のため、一部内容が古くなっている場合があります(また時間があるときに改稿するかもしれません)
つい先日、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を試してみました。
こちらは、Docker上でKubernetesクラスターを簡単に構築できる kind というツールのチートシートサイトで、
コマンド例やyamlのサンプル例などを載せています。
個々のコマンドサンプルは、microCMS という国産のHeadless CMSでコンテンツ管理しており、
TOPページを開く度にコンテンツ取得のためのAPIリクエストが走っている状態でした。
よって今回は、Full Static Generationによって、事前に動的コンテンツ部分を静的化するのが目標となります。
実際にやってみた
- Nuxt.jsのリリースノートを確認
今回v2.13.0が最新リリースとなることを念のため確認しました。
- 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なサイトを作りたい方には特におすすめです！
参考
Author And Source
この問題について(kindのチートシートサイトにNuxt.jsのFull Static Generationを導入してみた), 我々は、より多くの情報をここで見つけました https://zenn.dev/gosarami/articles/31fea1805b3872133378著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol