前回のおさらい
前回は、Dockerを用いてNuxt.jsの開発を行うための環境を構築する所までご紹介しました。
関連記事
【Docker環境構築編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリングをしてみよう【Vue.js】
今回は実際にNuxt.jsプロジェクトを作成し、起動して動作確認する所までをご紹介して行こうと思います。
手順
vue-cliでプロジェクトを作成
まずはコンテナの/projectsディレクトリにて、以下のコマンドを実行してプロジェクトを作成しましょう。
{ディレクトリ名}
```
? Project name {プロジェクト名}
? Project description (Nuxt.js project) {説明}
? Author {作成者}
vue-cli · Generated "{ディレクトリ名}".
To get started:
cd {ディレクトリ名}
npm install # Or yarn
npm run dev
対話式でいろいろ求められるのでよしなに入力してください。
完了すると、以下のようなディレクトリ構造が生成されると思います。
|-- Dockerfile
|-- README.md
|-- docker-compose.yml
`-- sample
|-- .editorconfig
|-- .eslintrc.js
|-- .gitignore
|-- README.md
|-- assets
| `-- README.md
|-- components
| |-- AppLogo.vue
| `-- README.md
|-- layouts
| |-- README.md
| `-- default.vue
|-- middleware
| `-- README.md
|-- nuxt.config.js
|-- package.json
|-- pages
| |-- README.md
| `-- index.vue
|-- plugins
| `-- README.md
|-- static
| |-- README.md
| `-- favicon.ico
`-- store
`-- README.md
必要モジュールをインストール
次に、プロジェクトルートに移動し必要なモジュールをインストールしましょう。
今回はyarnを使おうと思っているので、yarn installと打ちましょう。
yarn install v1.16.0
info No lockfile found.
[1/4] Resolving packages...
warning nuxt > @nuxt/webpack > postcss-preset-env > postcss-color-functional-notation > postcss-values-parser > flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
warning eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
[2/4] Fetching packages...
info fsevents@2.0.7: The platform "linux" is incompatible with this module.
info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > eslint-loader@2.1.2" has unmet peer dependency "webpack@>=2.0.0 <5.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 131.50s.
Done in 131.50s.みたいなログが出ればインストール完了です。
起動
では、実際にサーバーを起動してみましょう。
yarn run v1.16.0
$ nuxt
╭─────────────────────────────────────────────╮
│ │
│ Nuxt.js v2.8.1 │
│ Running in development mode (universal) │
│ │
│ Listening on: http://172.20.0.2:3000/ │
│ │
╰─────────────────────────────────────────────╯
ℹ Preparing project for development 08:22:51
ℹ Initial build may take a while 08:22:51
✔ Builder initialized 08:22:51
✔ Nuxt files generated 08:22:51
✔ Client
Compiled successfully in 16.16s
✔ Server
Compiled successfully in 13.60s
ℹ Waiting for file changes 08:23:13
ℹ Memory usage: 177 MB (RSS: 246 MB) 08:23:13
こんなログが出れば起動完了です。
ブラウザでhttp://localhost:3000 にアクセスしてみましょう。
正常にページが表示されましたね♪
Nuxt.jsの便利機能
ホットリロード
今回作成したプロジェクトには、ホットリロード機能が搭載されています。
ホットリロードとは、コードやファイルを変更した際に、手動で再起動しなくても自動で再リロードをして適用してくれる機能になります。
これが地味に便利過ぎてとても助かります。
アジャイル開発をする上では必須の機能ですよね。
ルーティングの自動設定
こちらも、Nuxt.jsの強力な機能と言えるルーティングについてです。
Nuxt.jsでは、設定ファイルへのルーティング定義は不要です。
その代わりに、pagesディレクトリ配下のツリー構造によって自動でルーティングの定義が行われます。
Nuxt.js は pages ディレクトリ内の Vue ファイルの木構造に沿って、自動的に vue-router の設定を生成します。ルーティング - Nuxt.js
例えば、pagesディレクトリ配下に以下のようにchildディレクトリを作成してみます。
pages
├── README.md
├── child //追加
│ └── index.vue //追加
└── index.vue
そして、ブラウザでhttp://localhost:3000/child にアクセスすると追加したindex.vueの内容が表示されると思います。
設定と実ファイルを二十管理する必要が無いのは開発者としてスッキリしますね♪
便利なコマンドが用意されている
Nuxt.jsを使う利点として、最初から開発・本番それぞれに適したコマンドが用意されている点が言えます。
Nuxt.js は便利コマンドのセットを備えています。開発時に役立つものも、プロダクション用途のものもあります。コマンド - Nuxt.js
例えば、今回使ったyarn devコマンドは、内部的にnuxtコマンドを実行しています。
そして、本番デプロイ用にnuxt buildとnuxt startコマンドも用意されています。
また、静的ホスティング向けのnuxt generateという言うコマンドもあります。
それぞれのコマンドの意味は以下の通りです。
| コマンド | 役割 |
|---|---|
| nuxt | 開発サーバーを localhost:3000 で起動します。このサーバーはホットリローディングします |
| nuxt build | アプリケーションを Webpack でビルドし、JS と CSS をプロダクション向けにミニファイします |
| nuxt start | プロダクションモードでサーバーを起動します（nuxt build 後に実行してください） |
| nuxt generate | アプリケーションをビルドして、ルートごとに HTML ファイルを生成します（静的ファイルのホスティングに用います） |
ビルド用のスクリプトを組むことなく、用意されたコマンドを叩くだけでビルドとデプロイが出来るのはとてもありがたいですね。。。！
終わりに
以上のように、コマンドベースで簡単にプロジェクトを作成し、起動するところまで出来ました。
次回はプロジェクトへのsassの導入方法についてご紹介していこうと思います。