Nuxtの開発環境を簡単構築 【create-nuxt-appでNuxt入門】
JavaScript Nuxt PROGRAMMING Vue
この記事では、Nuxtが初めての人や素早く簡単に始めたい人向けのNuxt環境構築方法をお伝えします。
この記事を読むことによって、Nuxtの基本的な環境構築ができるようになります。
この記事を書いている僕は、フロントエンドのプログラマー(フリーランス)として、これまで4年のWeb制作経験があり、Vue,React,Nuxtなどフロントエンドの開発を得意としています。
Nuxtは「cretate-nuxt-app」ツールを利用することによって、簡単に基礎環境を構築することが可能です。
「cretate-nuxt-app」実行時にオプションやTypeScriptなどの質問に答えるだけで、全ての依存関係が構築された状態で環境構築ができるため、簡単にNuxtを始めることができます。
Nuxtの特徴
NuxtはVueをベースにしているJavaScriptのフレームワークです。
Vueのvue-routerやVuexなどを初めから使いやすくしてくれており、webpack、Babel や PostCSSも最初からバンドルされています。
また以下のような強力な機能を備えています。
- SSR(Server Side Rendering)ができるよう想定して作られており、簡単にSSRできる
- SPA(Single Page Application)モードとして、SSRをしない設定も簡単
- SSG(Server Side Generate)で静的ファイルの配信がgenerateコマンドで簡単にでき、JAMStackなサイトを作るのも容易
- PWA機能を簡単に実装できる
特にVueのライフサイクルに加えてfetchやasyncDataなどのSSR用のライフサイクルが用意されており、SSR機能が強力です。細かいところだと他にもいろいろな便利な機能があり、個人的にはJavaScriptのフレームワークの中で一番好きなフレームワークです。
実際に僕も開発現場で複数プロジェクトをNuxtで開発した経験があり、とても素晴らしいフレームワークだと実感しています。
Nuxtの環境構築をする手順・方法
Nuxt環境の構築手順は、Node.jsのインストール、yarnで「create-nuxt-app」を使って環境構築で進めます。
1. Node.jsを使えるようにする
まずはNode.jsのインストールをします。既にインストールできていれば飛ばしてください。
今回はNodeのバージョン管理に、nodenvを使って解説しています。別のNode管理ツールでも問題ありません。
「Create React App」を利用する際に、Node.jsは8.10以上のバージョンを利用するようにして下さい。
nodenvの使い方については別記事の「nodenv を使って Node.js を簡単にバージョン管理する方法 【.node-versionファイルで簡単に切替】」があるので必要に応じて参考にしてみてください。
nodenvのセットアップ手順を順番にしていきます。（不要な場合は次の項まで飛ばしてください）
nodenvのインストール
$ git clone https://github.com/nodenv/nodenv.git ~/.nodenv
$ cd ~/.nodenv && src/configure && make -C src
$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(nodenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l
nodenvのプラグインなどをインストール
$ mkdir -p "$(nodenv root)"/plugins
$ git clone https://github.com/nodenv/nodenv-update.git "$(nodenv root)"/plugins/nodenv-update
$ nodenv update
$ git clone https://github.com/nodenv/node-build.git "$(nodenv root)"/plugins/node-build
nodenvでNode.jsをインストールします。今回は安定バージョンの12.18.3を使います。
$ nodenv install 12.18.3
※Vue-CLIではNode.js 8.9以上(8.11.0以上を推奨)としているので8.11.0以上を利用してください。
次に今回使うローカルのディレクトリ(ローカルで開発用の適当なディレクトリを用意してください)に移動します。
$ cd 【プロジェクトディレクトリ】
※例えばホームディレクトリのdevディレクトリ > vueディレクトリに作成するなら、「mkdir -p ~/dev/vue」でディレクトリ作成して「cd ~/dev/vue」で移動します。
バージョン12.18.3を指定します。（.node-versionというファイルができます）
$ nodenv local 12.18.3
これでNode.jsを使う環境が整いました。
2. yarnをインストールする
Node.jsでは標準のパッケージ管理システムのnpm(Node Package Manager)が用意されていますが、今回はFacebookが開発したyarnを利用するために、yarnをインストールして使えるようにします。
(インストール済みなら不要です)
Macの場合ならHomebrewを使います。詳細は公式に記載があります。
$ brew install yarn
※npmでのyarnをインストールする方法は非推奨になっています
3. create-nuxt-app で環境構築する
Nuxtの環境は、「yarn create nuxt-app 【プロジェクト名】」で作成できるので実行します。
今回は仮で「my-project」という名前で作成します。プロジェクト名は任意で決めてください。
$ yarn create nuxt-app my-project
環境構築について、質問されるので、選択していきます。
? Project name: (my-project)プロジェクト名(package.jsonで後で変更できます)を入力します。
今回はとりあえず「my-procject」にします。
? Programming language: (Use arrow keys)
❯ JavaScript
TypeScript TypeScriptで書くか聞かれています。
今回は普通のJavaScriptを選択してEnterを押します。
? Package manager: (Use arrow keys)
❯ Yarn
Npm Yarn か Npm のどちらを使うか聞かれています。
今回は「Yarn」を選択してEnterを押します。
? UI framework: (Use arrow keys)
❯ None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Chakra UI
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuesax
Vuetify.js UIフレームワークを使うか聞かれています。
機能開発の時短になる場合もあるので、決まっている場合はここで選択するとよいと思います。後で追加も可能です。
今回はNone(なし)を選択してEnterを押します。
? Nuxt.js modules: (Press to select, to toggle all, to invert selection)
❯◯ Axios
◯ Progressive Web App (PWA)
◯ Content モジュールを追加するか聞かれています。スペースキーで複数選択ができ、決まったらEnterを押して進みます。
「Axios」は通信モジュールとして追加しておいてもよいかと思います。
今回はとりあえず選択せず、Enterで進みます。
? Linting tools: (Press to select, to toggle all, to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint Lint関連をスペースキーで複数選択できます。
「ESLint」(構文やルールのチェックツール)や「Prettier」(ルールに沿って自動的に整形してくれるツール)は入れておいてもよいかもしれません。
今回は何も選択せず、Enterで進みます。
? Testing framework: (Use arrow keys)
❯ None
Jest
AVA
WebdriverIO テストのフレームワークを選択できます。
今回は何も選択せず、Enterで進みます。
? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG)
Single Page AppUniversalモード（SSRかSSGを選択できる）か、Single Page Appモード(通常のVueと同じSPA)で動作させるかを選択できます。
今回は、「Universal (SSR / SSG) 」を選択します。(次の選択でSSRを選択します)
? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
Static (Static/JAMStack hosting)前回の選択でUniversalを選択したので、SSRかSSGを選択します。
「Server (Node.js hosting) 」 → SSR
「Static (Static/JAMStack hosting)」 → SSG
今回は、「Server (Node.js hosting) 」を選択します。
? Development tools: (Press to select, to toggle all, to invert selection)
❯◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
◯ Semantic Pull Requests 開発ツールをスペースキーで複数選択できます。
今回は何も選択せずEnterで進みます。
これで関連ツールのインストールが始まり、完了します。
$ yarn create nuxt-app my-project
yarn create v1.22.5
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-nuxt-app@3.2.0" with binaries:
- create-nuxt-app
create-nuxt-app v3.2.0
✨ Generating Nuxt.js project in my-project
? Project name: my-project
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press to select, to toggle all, to invert selection)
? Linting tools: (Press to select, to toggle all, to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press to select, to toggle all, to invert selection)
warning nuxt > @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
warning nuxt > @nuxt/cli > @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
warning nuxt > @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
warning nuxt > @nuxt/cli > @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
warning nuxt > @nuxt/webpack > @nuxt/babel-preset-app > core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to cho
kidar 3 with 15x less dependencies.
warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and
could be using insecure binaries. Upgrade to fsevents 2.
warning nuxt > @nuxt/webpack > webpack > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-
🎉 Successfully created project my-project
To get started:
cd my-project
yarn dev
To build & start for production:
cd my-project
yarn build
yarn start
✨ Done in 473.85s. ディレクトリを移動して「yarn dev」を実行すると開発環境が立ち上がります。
http://localhost:3000 にアクセスすると開発中の環境が表示されます。
$ cd my-project
$ yarn dev「yarn dev」の後に、 Nuxtの匿名のデータ収集に参加するかを質問されるので、選択します。
わからなければ「n (No)」でよいかと思いますが、データ収集に協力する場合は「y(Yes)」で進みます。
ℹ NuxtJS collects completely anonymous data about usage.
This will help us improving Nuxt developer experience over the time.
Read more on https://git.io/nuxt-telemetry
? Are you interested in participation? (Y/n) Nuxtが立ち上がります。
開発モードと本番モードの違い
package.jsonの「scripts」に記載がありますが、いくつかのコマンドがデフォルトで用意されています。
$ yarn dev
「.nuxt」ディレクトリが作成され、開発モードで起動します。開発中はこちらを使います。$ yarn build
本番用のビルドを作成できます。$ yarn start
「yarn build」で作成した本番ファイルで起動します$ yarn generate
SSGで動作するための静的ファイルが生成されます
▼package.json
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},開発中は「yarn dev」で起動して開発し、本番デプロイ時には「yarn build」でビルド後に「yarn start」でスタートするのが基本となります。
Nuxt環境のディレクトリ構成説明
Nuxtで構築した環境のディレクトリは以下のようになっています。
my-project
└ assets
└ componets
└ layouts
└ middleware
└ node_modules
└ pages
└ plugins
└ static
└ store
└ .editconfig
└ .gitignore
└ nuxt.config.js
└ package.json
└ yarn.lock- assets Nuxtでビルドに含める画像などの静的ファイルを設置します
- componets Vueのコンポーネントを配置します
- layouts ベースとなるレイアウトのテンプレートとなるVueを配置します
- middleware dmiddlewareを使う時にここに設置します
- node_modules nodeパッケージの格納場所でコードには関係ありません
- pages 各ページのファイルを設置します。ページのルーティングがここの構成通りにされます。router機能を使うとその限りではありません。
- plugins プラグインの設定をここに置きます
- static 静的に設置する画像ファイルなどをここに配置します
- store VuexのStoreファイルをここに置きます
- .editconfig エディタ設定です
- nuxt.config.js 基本設定がここに書かれる重要ファイルです。webpack設定に関連することなどもここに書かれています。
- package.json 依存するパッケージ設定などが書かれています
- yarn.lock 依存関係があるパッケージのバージョンを管理しています
※ディレクトリ構成については公式に詳しく載っているので必要に応じて参照ください。
基本動作の説明
トップページの表示について、今回の例で説明します。
localhost:3000にアクセスしたとき、「pages/index.vue」が参照されます。
この時特にlayout指定はないので、layouts/default.vue が適用され、「<Nuxt />」に「pages/index.vue」が差し込まれます。
▼layouts/default.vue
<template>
<div>
<Nuxt />
</div>
</template>
<style>
【中略】
</style>もし、「localhost:3000/contact」というページを作成したければ、「page/contact/index.vue」のファイルを作成すれば自動で作成可能です。
まとめ
Nuxtの基本的な環境構築について、記載しました。
NuxtはJavaScriptフレームワークの中でも開発とバージョンアップが盛んで、機能がどんどん追加されるので、開発中でもNuxt本体のバージョンアップはよく行うことになると思います。その際にドキュメントをよく読まずに変更していくと、環境が壊れてビルドが通らなくなることもあるので注意が必要です。
NuxtはSSRやSSG、PWA対応が簡単にできたりといろいろな開発環境に適用できます。
特にVueをベースにSSRしたい時は、VueのSSR機能を使うよりもNuxtのSSRを使う方がライフサイクルも用意されており簡単です。またJAMStackな構成にするときもSSGで簡単に構築できるのでよく使われている印象があります。
NuxtではTypeScriptを使った開発もよく行われていると思います。
今回の環境構築をしたサンプルのGitHubリポジトリ
https://github.com/it-web-life/nuxt_environment_setup
ご参考になれば幸いです。
※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています