コマンド

Nuxt.js は便利コマンドのセットを備えています。開発時に役立つものも、プロダクション用途のものもあります。

コマンド一覧

コマンド 説明
nuxt 開発サーバーを localhost:3000 で起動します。このサーバーはホットリローディングします
nuxt build アプリケーションを Webpack でビルドし、JS と CSS をプロダクション向けにミニファイします
nuxt start プロダクションモードでサーバーを起動します(nuxt build 後に実行してください)
nuxt generate アプリケーションをビルドして、ルートごとに HTML ファイルを生成します(静的ファイルのホスティングに用います)

引数

各コマンドに対して--helpを使うと詳細な使用方法を入手できます。共通の引数は下記の通りです:

  • --config-file または -c: nuxt.config.js ファイルへのパスを明記します。
  • --spa または -s: サーバサイドレンダリングモードを不可にすることにより、SPA でコマンドを実行します。

package.jsonで使用する

これらのコマンドを package.json に書いておくと良いでしょう:

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

そうすれば、npm run <command> 経由で Nuxt.js のコマンドを実行することができます(例: npm run dev

上級者用の Tips: npm コマンドへ引数を渡すためには -- スクリプト名を付ける必要があります(例: npm run dev -- --spa

開発環境

ホットリローディング有りの開発モードで Nuxt を起動するには:

nuxt
// または
npm run dev

プロダクションのデプロイ

Nuxt.js では 3つのモードからアプリケーションのデプロイを選択できます。サーバレンダリング、SPA、そして静的生成です。

サーバーサイドレンダリングモードのデプロイ

デプロイするために、nuxt コマンドを実行するのではなく、前もってビルドしておきたいと思われるでしょう。そのような理由から、ビルドコマンドとサーバー起動のコマンドは分かれています:

nuxt build
nuxt start

package.json では下記のように記述することが推奨されています:

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

メモ: .npmignore または .gitignore 内に .nuxt を書いておくと良いでしょう。

静的に生成されたファイルのデプロイ

Nuxt.js を使用すると、どの静的ホスティングサービスでもウェブアプリケーションをホストすることができます。

アプリケーションから静的ファイルを生成するには:

npm run generate

静的なホスティングサイトにデプロイする準備が整ったものが全て入った dist フォルダが作成されます。

プロジェクトで 動的なルーティング を使っている場合は、Nuxt.js に動的なルーティングを生成させるために generate 設定 に目を通してください。

nuxt generate でウェブアプリケーションを生成するときは、data()fetch() に渡される contextreq 及び res を持たなくなります。

シングルページアプリケーションデプロイ(SPA)

nuxt generate は、すべてのページをプレレンダリングし、高い SEO とページロードスコアを持つという利点を持つ一方で、ビルド/生成時には SSR エンジンを必要とします。 コンテンツはビルド時に生成されます。 たとえば、コンテンツが(少なくとも初回ロード時)ユーザ認証またはリアルタイムAPIに依存するようなアプリケーションでは使用できません。

SPAのアイデアは簡単です! mode: 'spa' または --spa フラグを使用して SPA モードを有効にし、ビルドを実行すると、ビルド後に自動的に生成が開始されます。 この生成には、共通のメタとリソースリンクが含まれますが、ページコンテンツは含まれません。

したがって、SPAのデプロイでは、以下の手順を行う必要があります:

  • nuxt.config.js 内の modespa に変更する
  • npm run build を実行する
  • 生成された dist/ フォルダを、surge、GitHub Pages、あるいは nginx のような静的ファイルのホスティングサービスにデプロイする

他に取り得る方法としては、spa モードの間、 Nuxt をフレームワークのミドルウェアとして使用することができます。 これによりサーバの負荷を軽減し、SSR が不可能なプロジェクトで Nuxt を使用することができます。

ポピュラーなホストへデプロイする例は Heroku へデプロイするには? を参照してください。
GitHub Pages へデプロイする方法についての詳細は GitHub Pages へデプロイするには? を参照してください。

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する