コマンド

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 モードでコマンドを実行します。
  • --unix-socket または -n: UNIX ソケットへのパスを明記します。

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 を書いておくと良いでしょう。

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

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

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

npm run generate

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

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

npm run generate --fail-on-page-error

// または

yarn generate --fail-on-page-error

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

nuxt generate でウェブアプリケーションを生成するときは、asyncData に渡される contextfetchreq 及び 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 を使用することができます。

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

Platinum Sponsors

Storyblok
Support Us