Skip to content
This repository was archived by the owner on Sep 3, 2024. It is now read-only.

Update ja/guide/commands.md #260

Merged
merged 1 commit into from
Sep 27, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 43 additions & 8 deletions ja/guide/commands.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,21 @@ description: Nuxt.js は便利コマンドのセットを備えています。

## コマンド一覧

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

Expand All @@ -27,6 +36,8 @@ description: Nuxt.js は便利コマンドのセットを備えています。

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

Nuxt.js ではアプリケーションをデプロイするための 2つのモードから選べます。サーバーサイドレンダリングするモードと、静的ファイルを生成するモードです。

## 開発環境

Nuxt.js をホットリローディングする開発モードで起動するには:
Expand All @@ -39,7 +50,7 @@ npm run dev

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

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

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

Expand Down Expand Up @@ -80,6 +91,30 @@ npm run generate

`dist` フォルダが作成され、その中に静的ファイルのホスティングサービスにデプロイされるべきものがすべて入ります。

プロジェクトで [動的なルーティング](/guide/routing#動的なルーティング) を使っている場合は、Nuxt.js に動的なルーティングを生成させるために [generate 設定](/api/configuration-generate) に目を通してください。
プロジェクトで [動的なルーティング](/guide/routing#%E5%8B%95%E7%9A%84%E3%81%AA%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0) を使っている場合は、Nuxt.js に動的なルーティングを生成させるために [generate 設定](/api/configuration-generate) に目を通してください。


<div class="Alert">`nuxt generate` でウェブアプリケーションを生成するときは、[data()](/guide/async-data#the-data-method) や [fetch()](/guide/vuex-store#the-fetch-method) に渡される [context](/api#context) は `req` 及び `res` を持たなくなります。</div>


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

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

SPA のアイデアは単純です! `mode: 'spa'` あるいは `--spa` フラグを使って spa モードを有効にしビルドを実行すると、
ビルド後に自動的に生成が開始します。しかしこの時にはページコンテンツはなく、共通のメタとリソースリンクだけがあります。

SPAデプロイ:
- `nuxt.config.js` の中の `mode` を `spa` に変更する
- `npm run build` を実行する
- 生成された`dist/` フォルダを、surge、github pages、あるいは nginx のような静的ファイルのホスティングサービスにデプロイする

もう1つ考えられるデプロイは、`spa` モードの間ずっと nuxt をフレームワークの中でミドルウェアとして使うことができるということです。
これはサーバ負荷を減らすことを助け、SSR が不可能なプロジェクトで nuxt を使うことに役立ちます。


<div class="Alert">ポピュラーな hosts にデプロイする例は [FAQ/Deployments](/faq/heroku-deployment)を見てください。</div>