Want to take a look at our new docs? Our new docs are now in beta. Have fun!

コマンド

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

コマンド一覧

target に応じて異なるコマンドを実行することができます。

server

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

static

コマンド説明
nuxt dev開発サーバーを localhost:3000 で起動します。このサーバーはホットリローディングします。
nuxt startdist/ directory からプロダクションアプリケーションを提供します(Nuxt v2.13 以上)
nuxt generateアプリケーションをビルドして、ルートごとに HTML ファイルを生成します(Nuxt v2.12 以下で静的ファイルのホスティングに用います)

引数

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

  • --config-file または -c: nuxt.config.js ファイルへのパスを明記します。
  • --spa または -s: サーバサイドレンダリングモードを不可にし、 SPA モードでコマンドを実行します。
  • --unix-socket または -n: UNIX ソケットへのパスを明記します。

フック

フック目的
cli:buildError開発モードでビルドエラーをキャプチャし、読み込み画面に表示します。

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 つのモードからアプリケーションのデプロイを選択できます。 SSR 、SPA 、そして静的生成です。

サーバーサイドレンダリングモードのデプロイ(ユニバーサル SSR)

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

nuxt build
nuxt start

Nuxt.js を HTTPS モードで提供することを選択した場合、https.createServer に渡されるオプションと同じオプションを使って nuxt.config.jsserver.httpsを設定することもできます。nuxt.config.jsserver.socket オプションを設定(または CLI-n 引数を使用)すると、 Unix ソケットも利用できます。Unix ソケットを利用する場合は、host パラメータと port パラメータを設定しないでください。設定した場合、 socket パラメータは無視されます。

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

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

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

静的に生成されたファイルのデプロイ(Pre-rendered)

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

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

"scripts": {
  "generate": "nuxt generate"
}

nuxt.config ファイルに値が statictarget プロパティを追加してください(Nuxt v2.13 以上の場合)。

export default {
  target: 'static'
}
npm run generate

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

ページエラーが発生した際に 0 以外のステータスコードを返し、CI/CD によるデプロイまたはビルドを失敗させるには、 --fail-on-error 引数を使用することができます。

npm run generate --fail-on-error

// または

yarn generate --fail-on-error

Nuxt v2.13 ではリンクタグをクロールしルートを生成するクローラがインストールされています。nuxt build && nuxt export コマンドを使った際にこれらのリンクタグに基づいてルートを生成します。

警告: Nuxt v2.12 以下の場合、動的なルーティングは generate コマンドによって無視されます。generate 設定 を参照してください。

nuxt build && nuxt export または nuxt generate でウェブアプリケーションを生成するときは、asyncData に渡される contextfetchreq 及び res を持たなくなります。

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

nuxt build && nuxt export または 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 を使用することができます。

私たちの FAQ を読んで、ポピュラーなホストへデプロイするための気の利いた例を見つけてください。

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us