Zenn
🐯

Nuxt の target と mode と ssr と各 npm コマンドについて

2021/01/26に公開
JavaScript
Nuxt
TypeScript
Vue.js
tech

targetプロパティ

nuxt.config.jsで指定する
設定可能な値はserverかstaticのどちらかで、デフォルトはserver

これから開発するアプリのデプロイ先によって、この値を判断する

  • サーバーホスティングの場合は、server
    • サーバー上で Nuxt を動かすとき
    • EC2、ECS、レンタルサーバーなど
  • 静的サイトホスティングの場合は、static
    • ホスティングサービスへブラウザがそのまま実行できる HTML や JS をデプロイするとき
    • S3+CloudFront、Netlify、Vercel、Firebase Hosting など

modeプロパティ

nuxt.config.jsで指定する
設定可能な値はspaかuniversalのどちらかで、デフォルトはuniversal

  • universal
    • SSR + SPA
  • spa
    • クライアントサイド（ブラウザ）で JS を実行し、HTML を生成する（CSR）
    • 現在、このspaを設定するのは非推奨らしい
      • よって、mode: universalになる
      • SPA のみにしたい場合は、ssrプロパティでfalseを設定する

spaが非推奨で、デフォルトuniversalなので、このmodeプロパティのことは考えなくてよさそう

Nuxt を使っていて、今の所、ssr: falseを指定したくなるケースに遭遇したことはない
でも、最初からシンプルな SPA 構成にすると決めていたら、使えるかも

  • SSR したい
    • Nuxt（ssr: true）
  • SPA のみだけど、Nuxt の規約に縛られたい
    • Nuxt（ssr: false）
  • SPA のみだけど、環境構築で楽したい
    • Nuxt（ssr: false）or Vue CLI
  • SPA のみで、上記に当てはまらない
    • Vue 単体

targetプロパティとmodeプロパティとssrプロパティのまとめ

  • targetプロパティは、デプロイ先によって設定値が決まる
    • サーバーホスティングの場合はserver、静的サイトホスティングの場合はstatic
  • targetプロパティの設定値によって、後述するが使うコマンドも変わる
  • modeプロパティは考えなくてよさそう
  • ssrプロパティは、SSR するかしないかを決める

targetプロパティとssrプロパティの組み合わせ

  • target: server and ssr: true
    • SSR になる
  • target: server and ssr: false
    • SPA になる
  • target: static and ssr: true
    • SSG（full static）になる
    • SSR された状態で、静的ファイルにビルドされる
  • target: static and ssr: false
    • SSG（static）になる
    • 静的ファイルにビルドされるが、ブラウザがindex.htmlを読み込んだ時に JS を実行して画面をレンダリングする（SPA）

コマンド

npx create-nuxt-app（TypeScript 利用）で環境構築すると以下のコマンドが使えるようになる

"scripts": {
  "dev": "nuxt-ts",
  "build": "nuxt-ts build",
  "start": "nuxt-ts start",
  "generate": "nuxt-ts generate"
}

また、@nuxt/typescript-runtimeパッケージがインストールされる
これは、ランタイムで TypeScript を実行できるようにするもので、技術的にはts-nodeが使われている
この辺の処理をラップしたのが、@nuxt/typescript-runtime/bin配下にいるnuxt-tsというバイナリである

各コマンドは前述したtargetプロパティによって、利用するコマンドが決まる

target: serverの場合

"scripts": {
  "dev": "nuxt-ts",
  "build": "nuxt-ts build",
  "start": "nuxt-ts start"
}

開発用

devコマンドを実行すると.nuxtディレクトリにビルド結果が出力される
同時にサーバーを立ち上げる
HMR で開発できる

本番用

buildコマンドを実行すると.nuxtディレクトリにビルド結果が出力される
buildコマンドの後にstartコマンドを実行し、サーバーを立ち上げる

target: staticの場合

"scripts": {
  "dev": "nuxt-ts",
  "generate": "nuxt-ts generate",
  "start": "nuxt-ts start"
}

開発用

target: staticでもdevコマンドが利用できる
仕様はtarget: serverとおそらく同じ

本番用

generateコマンドを実行すると静的ファイルにビルドされ、distディレクトリに結果が出力される
distディレクトリの中身をそのままホスティングサイトへデプロイして、ホスティングサイトで設定したドメインにアクセスすれば、ブラウザがそのまま読み取れる
もし、ホスティングサイトへデプロイする前に確認したい場合は、startコマンドを実行し、サーバーを立ち上げれば確認可能

普段の開発では、generate + startコマンドだと開発体験が非常に悪いので、HMR が使えるdevコマンドで開発し、デプロイする前にgenerate + startコマンドで確認するのがよさそう

コマンドまとめ

  • devコマンドはtargetの設定値に影響せず、たぶん同じ仕様
  • buildコマンドはtarget: server専用
  • generateコマンドはtarget: static専用
  • startコマンドはサーバーを立ち上げるが、targetの設定値によって、読み込むディレクトリが異なる

Discussion