.nuxtignoreを使ってNuxt.jsをいい感じにビルドする

本記事は東京学芸大学 櫨山研究室 Advent Calendar 2020の18日目の記事になります．

はじめに

Nuxt.jsはVueのフレームワークで個人的にはかなり気に入っています．
Nuxt.js/Vue.jsでは基本的にコンポーネントに分割して開発を進めることになります．

今回の記事ではハッカソンでNuxt.jsを使っていた時に実施したビルドプロセスについてまとめました．

ハッカソンでは短期間で成果物を仕上げる必要があります．
そこで一つのNuxtプロジェクト上で管理者側の機能やページも開発しました．
これにより管理者側でもユーザー側のコンポーネントなどを共通して利用できるというメリットがあります．
一方で当然ながら管理者向けの機能やコンポーネントを本番環境には含めたくないですね．

そういったユースケースに対しNuxt.jsではignoreプロパティを使うことによって柔軟にビルドをすることができます．

Nuxt.jsのignoreプロパティ

Nuxt.jsでは.nuxtignoreファイルを使うことでビルド時にlayout,page, store, middlewareにおいて無視するファイルを指定することができます．
.nuxtignoreファイルの記述方法は.gitignoreと同様になります．

他にもignoreの設定方法はありますが詳細については公式のリファレンスを参照ください．

ignore プロパティ - NuxtJS, https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-ignore/

管理者向けのファイルを無視してビルドを行う

例えば同一プロジェクト内(同一SPA内)で管理者向けのページも開発していたとします．

ここでは以下のディレクトリ構成で開発を進めていたとします．

ディレクトリ構成

pages
├── admin // 管理者向けのpagesコンポーネント
│   └── index.vue
├── index.vue
└── inspire.vue

layouts
├── admin.vue // 管理者向けのレイアウトコンポーネント
├── default.vue
└── error.vue

store
├── admin.ts // 管理者向けの状態管理ファイル
└── index.ts

この状態でyarn buildを実行すると以下のようになります．

output

Built at: 2020/12/28 18:40:36
                         Asset       Size  Chunks                                Chunk Names
../server/client.manifest.json   14.2 KiB          [emitted]                     
                    0218a77.js  818 bytes       4  [emitted] [immutable]         pages/inspire
                    26ab95f.js    197 KiB       1  [emitted] [immutable]         commons/app
                    5bc8bc3.js    476 KiB       6  [emitted] [immutable]  [big]  vendors/app
                      LICENSES  450 bytes          [emitted]                     
                    a69ec92.js  302 bytes       2  [emitted] [immutable]         pages/admin/index
                    aaf0716.js   2.32 KiB       5  [emitted] [immutable]         runtime
                    cd7a169.js   21.6 KiB       3  [emitted] [immutable]         pages/index
                    e6c1fce.js   52.3 KiB       0  [emitted] [immutable]         app
 + 2 hidden assets
Entrypoint app = aaf0716.js 26ab95f.js 5bc8bc3.js e6c1fce.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  5bc8bc3.js (476 KiB)

Hash: bf389cb1c25fe76ffc61
Version: webpack 4.44.2
Time: 4221ms
Built at: 2020/12/28 18:40:40
               Asset       Size  Chunks             Chunk Names
pages/admin/index.js   1.15 KiB       1  [emitted]  pages/admin/index
      pages/index.js   37.2 KiB       2  [emitted]  pages/index
    pages/inspire.js   3.23 KiB       3  [emitted]  pages/inspire
           server.js    658 KiB       0  [emitted]  app
server.manifest.json  407 bytes          [emitted]  
 + 4 hidden assets
Entrypoint app = server.js server.js.map
ℹ Ready to run nuxt start                                                                                        18:40:40
✨  Done in 21.76s.

pages/admin/indexといった管理者向けのファイルを本番環境には公開したくないです．
そこで以下のような.nuxtignoreファイルをプロジェクトルートに用意します．

.nuxtignore

# admin 配下のページをすべて無視
pages/admin/*.vue

# admin.vue レイアウトを無視
layouts/admin.vue

# admin.ts ストアを無視
store/admin.ts

この状態でyarn buildを実行します．

output

Built at: 2020/12/28 19:33:54
                         Asset       Size  Chunks                                Chunk Names
../server/client.manifest.json     14 KiB          [emitted]                     
                    08995cc.js    476 KiB       5  [emitted] [immutable]  [big]  vendors/app
                    17767f4.js    2.3 KiB       4  [emitted] [immutable]         runtime
                    3b550d0.js  818 bytes       3  [emitted] [immutable]         pages/inspire
                    7938437.js   52.2 KiB       0  [emitted] [immutable]         app
                    8eff219.js    197 KiB       1  [emitted] [immutable]         commons/app
                      LICENSES  450 bytes          [emitted]                     
                    db064f0.js   21.6 KiB       2  [emitted] [immutable]         pages/index
 + 2 hidden assets
Entrypoint app = 17767f4.js 8eff219.js 08995cc.js 7938437.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  08995cc.js (476 KiB)

Hash: c4ab081e872b6bb72cce
Version: webpack 4.44.2
Time: 4512ms
Built at: 2020/12/28 19:33:59
               Asset       Size  Chunks             Chunk Names
      pages/index.js   37.2 KiB       1  [emitted]  pages/index
    pages/inspire.js   3.23 KiB       2  [emitted]  pages/inspire
           server.js    658 KiB       0  [emitted]  app
server.manifest.json  299 bytes          [emitted]  
 + 3 hidden assets
Entrypoint app = server.js server.js.map
ℹ Ready to run nuxt start                                                                                        19:33:59
✨  Done in 23.71s.

先ほどとは異なりpages/admin/indexなどが含まれていないことがわかります．

npm-scriptsで制御する

.nuxtignoreはできれば本番のビルド時にだけ適用したいのでnpm-scriptsで制御します．

まず先ほどの.nuxtignoreを**prod.nuxtignoreというファイル名**で用意します．

prod.nuxtignore

# admin 配下のページをすべて無視
pages/admin/*.vue

# admin.vue レイアウトを無視
layouts/admin.vue

# admin.ts ストアを無視
store/admin.ts

そしてpackage.jsonで**build:prod**というコマンドを登録します．

package.json

  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "build:prod": "cp prod.nuxtignore .nuxtignore && nuxt-ts build && rm .nuxtignore",
    "generate": "nuxt-ts generate",
    "start": "nuxt-ts start",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "test": "jest"
  },

これによりyarn buildとyarn build:prodというコマンドの使い分けで柔軟にビルドを行うことができます．

おわりに

本記事では.nuxtignoreを使ったNuxt.jsのビルドの制御について扱いました．

使う場面は少ないかもしれませんが何かの役に立てば幸いです．