Nuxt.jsの学習（インストールからビルドまで）

はじめに

Nuxt.js（とVue.js）を使ってサイトを作る、を学習しました。
Nuxt.js初心者が、インストールからビルド、サーバーにアップするまでにしたこととその流れをまとめます。

前提

• 作業環境
  • PC：Mac（macOS Sierra）
  • エディタ：Atom
• 前提知識
  • Vue.js -> ほぼ整備済のVue.jsプロジェクトを触った程度
  • Wordpress -> サイトを作る一通りの知識がある
• 今回使用したツールのバージョン
  • Node.js -> 9.3.0
  • npm -> 5.6.0
  • Yarn -> 1.3.2
  • VCCW -> 3
  • Vue.js -> 2
  • Nuxt.js -> 1.0.0-rc11（学習の間にver.1.0.0が出ました🎉）
  • aws-cli -> 1.14.22
  • vue-cli -> 2.9.2
• 作業前に導入済のツール
  • Node.js
  • npm
  • Yarn
  • VirtualBox
  • Vagrant
  • VCCW（ローカル環境で動くWordpress）
  • aws-cli
  • vue-cli
• 端折ること
  • 👆の導入方法
  • Vue.jsに関する基本的な操作

Vue.jsとは

ex: https://jp.vuejs.org

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。

ref: はじめに — Vue.js

• JSによってDOMが描画される（=バーチャルDOM）
• JSとHTML・CSSのコードは分けて扱われる

Nuxt.jsとは

ex: https://ja.nuxtjs.org/

Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。

ref: はじめに - Nuxt.js

• Vue.jsを含んだ（Vue.jsベースの？）フレームワーク
• Vue.js以外にもルーターや状態管理など制作のうえで必要となる機能を全部盛りした状態
  • Vue.js
  • Vue-Router
  • Vuex
  • Vue Server Renderer（mode: 'spa' を利用しているときを除く)
  • Vue-Meta
  • Webpack
  • Babel
  • ESLint

---

1. 準備

Vue.jsとNuxt.js以外に知っておくこと👇

• npm
• Yarn
• EditorConfig (.editorconfig)
• ESlint (.eslintrc, .eslintignore)
• .babelrc
• vue-cli

npm

ex: https://www.npmjs.com/

Node Package Manager(npm)とはNode.jsのライブラリやパッケージを管理することができるツールです。
　（中略）
Node.jsのパッケージマネージャであるnpmは、Node.jsと一緒にインストールされています。 またnpmでインストールできるパッケージが登録されており、npmjs.orgからどのようなパッケージが管理できるかを確認することができます。

ref: STEP2-4.パッケージマネージャのnpmとは / チームラボ オンラインスキルアップ課題

• npm = Node Package Manager
• Node.jsのパッケージ管理ツール
• npm5から（shrinkwrap.jsonではない）依存パッケージを固定する機能がついた
  ref: npm v5 がリリースされた - from scratch

Yarn

ex: https://yarnpkg.com/ja/

Yarn はダウンロードしたパッケージをキャッシュするので、再ダウンロードは不要です。さらにリソースを最大限利用できるように処理を並列化するので、インストール時間はかつてないほど高速です。

• Facebook発のパッケージ管理ツール
• パッケージの並列インストールができる（npmはひとつずつインストール）
• パッケージがインストール済みの場合はオフラインで再インストールできる

ref: https://www.webprofessional.jp/yarn-vs-npm/

EditorConfig

ex: http://editorconfig.org/

• 様々なエディターで利用できる共通の書式設定ファイル
• 文字コード等の書式をそのディレクトリー以下のファイル編集時に固定できる
• 文字コード・改行コード・インデント等を指定できる
• 複数人での作業時に便利

ESlint

ex: https://eslint.org/

• JavaScriptとJSX向けの構文チェックツール
• Node.js バージョン4以上 / npm バージョン2以上で使える　

設定ファイル

.eslintrc.js

• ESLint自体の設定（環境・ルールなど）をここに書く
• プロジェクトルートに置く
• yamlファイル（.eslintrc.yml）やjsonファイル（.eslintrc.json）としてもOK
• package.jsonに書くこともできる

ref: https://eslint.org/docs/user-guide/configuring

// example
module.exports = {
  // .eslintrc.jsが置いてあるディレクトリをルートとするかどうか
  root: true,
  
  // 構文解析にどれを使うか
  parser: 'babel-eslint',
  
  // パーサーのオプション指定
  parserOptions: {
    sourceType: 'module'
  },
  
  // 環境の指定
  env: {
    browser: true,
    node   : true
  },
  
  // 追加で判定するコードがある場合はここで指定
  plugins: [
    'html'
  ],
  
  // グローバル変数がある場合はここに書く
  globals: {
    jQuery  : true
  },
  
  // カスタムルールの追加
  // ref: https://eslint.org/docs/rules/
  'rules': { ... }
}

.eslintignore

• チェックから除外するディレクトリ・ファイルをここに書く

ref: https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories

# example: .eslintignore

# Nuxtのビルドファイル
.nuxt/*.js

# `nuxt generate`時のディレクトリ
dist/*.js

# npmパッケージ
node_modules/*.js

# プラグインとして使用するファイル
plugins/*.js

vue-cli

• Vue.js（とNuxt.js）をインストールする時は、vue-cliを使うと開発するのに必要なファイルを用意してくれる
• vue-cliのインストール方法は👇を参照
  ex: https://github.com/vuejs/vue-cli#installation

2. インストール

# 1. 開発に必要なファイルをインストール
$ vue init nuxt-community/starter-template プロジェクト名

# 2. プロジェクトディレクトリに移動
$ cd プロジェクト名

# 3. 必要なパッケージをインストール
$ yarn install # またはnpm install

Nuxt.jsを使う場合はvue-cliのデフォルトにはないテンプレート（nuxt-community/starter-template）を指定する。
その他にも目的に応じたテンプレートがある👇
ex: https://github.com/nuxt-community/starter-template

3. 設定

ref: 設定 - Nuxt.js（全ての項目は英語ドキュメントを参照）

// example:
module.exports = {
  // アプリケーションのモード - SSRしない場合に指定する
  // ref: https://nuxtjs.org/api/configuration-mode#the-mode-property
  mode: 'spa',

  // 共通のCSSファイルを読み込む場合はここで指定
  // Tips: ~または@ = ソースディレクトリ
  css: ['~/assets/css/style.scss'],

  // ヘッダ情報
  // ページごとに設定することもできる
  // ref: https://nuxtjs.org/api/pages-head
  head: {
    title: 'nuxt-project',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', type: 'text/css', href: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900' }
    ]
  },

  // [TBD] デフォルトでついてるローディングバーの設定
  loading: false,

  // [TBD] ビルド設定
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },

  // 静的ファイルとしてビルド時の書き出し先（この場合は`/dist/app/`以下に書き出される）
  generate: {
    dir: 'dist/app'
  },

  // ルーティングのベースとなるパス
  // ルート以外のURL（下層ページなど）の場合に指定
  router: {
    base: '/app/'
  },

  // ソースファイルのディレクトリ
  // デフォルトからディレクトリ構成を変える場合は指定
  srcDir: 'src/'
}

4. 動かしてみる

# devサーバーを起動（`nuxt build` & `nuxt start`）
$ npm run dev

• npm run devすると/.nuxt/以下にファイルが生成される
• http://localhost:3000/で表示される
• ホットリロードあり

5. もっと動かしてみる

• 自分のサイトをNuxt化してみる
  • http://dev.lisverb.com/
  • スタイルはScssで書く
  • テキストなどはローカル環境のWordpressから投稿保存毎にjsonファイルを吐き出すかたち（端折ります）
  • とりあえずトップページのみ → 下層ページを作った
• 下層ページを作る
  • http://dev.lisverb.com/works/

TODO

1. テンプレート
2. Wordpressと併用する場合
3. SEOまわりの設定
4. [WIP] デプロイする
5. 疑問の解消

1. テンプレート

ビュー

• ビューにあたる部分は/components /layouts /pages となる
  • このディレクトリ名は変更不可
  • components：layoutsやpagesに使用できるコンポーネントファイル
  • layouts：pages内のVueファイルが表示される（デフォルト以外にも作れる）
  • pages：ページごとのVueファイル、ここで作ったディレクトリ通りにルーティングが作られる

/componentsファイルを/pagesファイルで読み込む場合

<!-- example: componentsファイル（/components/ExampleComponent.vue） -->

<template>
  <div>
    hogehoge...
  </div>
</template>

<script>
export default {
  // name: ExampleComponent は不要、つけるとエラーになった
}
</script>

<!-- example: pagesファイル（読み込み元のファイル） -->

<template>
  <div>
    <ExampleComponent/>
  </div>
</template>

<script>
import ExampleComponent from '~/components/ExampleComponent.vue'
export default {
  components: {
    ExampleComponent
  }
}
</script>

スタイル

• 共通スタイルのみ/assets/css以下に追加する
  • 余談：コンポーネントやレイアウトに依存するスタイルはVueファイル内に書くかたちとした

処理しないファイル

• ビルド時に何も処理しないファイルは/static以下に追加する
  • ex: favicon.icoなど

2. Wordpressと併用する場合

テキストなどはローカル環境のWordpressから投稿保存毎にjsonファイルを吐き出すかたち

とした際につまづいた。

ディレクトリ構造

npm run generateすると書き出し先ディレクトリのファイルが削除されるので、
VCCWなどでローカル環境にWordpressをインストールする場合は注意が必要。

NGな例：npm run generate時に/dist以下のファイルが削除される
書き出し先ディレクトリ：/dist
Wordpressディレクトリ：/dist

SAFEな例①：/dist以下はプロキシする（※）
書き出し先ディレクトリ：/dist
Wordpressディレクトリ：/wp

SAFEな例②：npm run generate時に削除されるのは/dist/app以下のファイルのみ
書き出し先ディレクトリ：/dist/app
Wordpressディレクトリ：/dist/wp

※ SAFEな例①でプロキシする方法：

• Nuxtの追加モジュールを使う
  （http-proxy-middlewareをnuxt.config.jsで設定できるようにしたもののよう）
  ex: https://github.com/nuxt-community/modules/tree/master/packages/proxy

# 1. bash - モジュールを追加
$ yarn add @nuxtjs/proxy # or $ npm install @nuxtjs/proxy

# 2. nuxt.config.js - 設定を追加
module.exports = {
  // モジュール追加
  modules: [
   '@nuxtjs/proxy'
  ],
  // プロキシ設定
  proxy: {
    '/api': 'http://example.com'
  }
}

Wordpress内でのパスの指定

• SAFEな例①の構成で、/dist以下のパスを指定したい
• VCCWでWordpressの環境を作った

の場合

<?php
  // 場所：テーマファイル内など
  // '/vagrant/' としても正しく指定できない
  // WPがインストールされた階層から`../`でプロジェクトルートまで戻ってみる（VCCW設定の`document_root`による）
  realpath(ABSPATH . '../../../vagrant/')
?>

• ABSPATH：WordPressのインストールされたパス名を返す
  ref: https://elearn.jp/wpman/variable/abspath.html
• realpath()：相対パスなどを解決して絶対パスに直す
  ref: http://php.net/manual/ja/function.realpath.php

3. SEOまわりの設定

OGタグの追加

• nuxt.config.jsに追加する
  ref: https://nuxtjs.org/api/configuration-head#the-head-property
• 使い方はvue-metaと同じ
• 子コンポーネント（下層ページ）のメタ情報を個別に設定する場合は、hidの値を揃える

// example: nuxt.config.js
module.exports = {
  head: {
    // title: 'site title',
    meta: [
      // { charset: 'utf-8' },
      // { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      // { hid: 'description', name: 'description', content: 'meta description' },
      { name: 'fb:admins', content: 'admin id' },
      { name: 'og:type', content: 'website' },
      { name: 'og:url', content: 'url' },
      { name: 'og:title', content: 'og page title' },
      { name: 'og:site_name', content: 'og site name' },
      { name: 'og:description', content: 'og description' },
      { name: 'og:image', content: 'og image' } // など...
    ],
    // link: [
    //  { rel: 'icon', type: 'image/x-icon', href: '/icon/favicon.ico' }
    // ]
  }
}

GAコードを追加する

2通り方法がありそう…？

1. モジュールを追加する

手順1：モジュールの追加

$ yarn add @nuxtjs/google-analytics # or $ npm install @nuxtjs/google-analytics

手順2：設定の追加

// nuxt.config.js
module.exports = {
  // モジュールを追加
  modules: [
    '@nuxtjs/google-analytics'
  ],
  // アナリティクス情報を追加
  'google-analytics': {
    id: 'UA-00000-0' // トラッキングID
  }
}

ref: https://github.com/nuxt-community/analytics-module

2. /pluginsにファイルを追加する

手順1：/plugins以下にコードを追加

[TBD] 👇の内容を追加する。
ex: https://ja.nuxtjs.org/faq/google-analytics/

手順2：設定の追加

// nuxt.config.js
module.exports = {
  plugins: [
    { src: '~plugins/ga.js', ssr: false } // サーバー側で処理しない
  ]
}

ref: https://ja.nuxtjs.org/faq/google-analytics/

Google Search Consoleでの確認

• 🙅トラッキングコードでの確認（コード自体は読み込みされるが<head>内に書かれていないため…？）
• 🙅メタタグでの確認（…？）
• 🙆ファイルのアップロードでの確認

[WIP] 4. デプロイする

前提

• AWS S3へnuxt generateしたファイルをアップしたい

aws-cliでアップする場合

手順1：Vagrantにaws-cliをインストール

※pip・pythonがインストールされている必要がある

# 0. SSHログイン
$ vagrant ssh

# 1. ルート権限になる
$ sudo su -

# 2. `pip`をダウンロード・インストール
root@xxx:~# curl "https://bootstrap.pypa.io/get-pip.py" -o "get-pip.py"
root@xxx:~# python get-pip.py

# 3. `aws-cli`インストール
root@xxx:~# pip install awscli

手順2：バケット情報設定

# vagrant ssh済の状態で
$ aws configure

aws configureの手順は👇を参照。
ref: https://github.com/aws/aws-cli#getting-started

手順3：アップロード

# vagrant ssh済の状態で
# S3へ該当ファイル・ディレクトリをアップロード
$ aws s3 sync --delete --exclude "PATH_TO_EXCLUDE_FILE_OR_DIRECTORY" --exact-timestamps --acl public-read PATH_TO_GENERATE_DIRECTORY s3://バケット名/

nuxt generate時にデプロイする（やりたいこと）

[WIP]

その他

その他にNetlifyでデプロイする方法も試しましたがとても簡単にできました。
ref: https://qiita.com/gupuru/items/e9746df176261afc3af2#netlify

5. 疑問の解消

Sass変数をVueコンポーネントファイルでも使えるようにする

• nuxt-sass-resources-loaderを使う
  • sass-resources-loaderのNuxtモジュール
  • 設定内容もsass-resources-loaderと同じ

# example: 
# 1. bash - モジュールの追加
$ yarn add nuxt-sass-resources-loader

// 2. nuxt.config.js - 設定の追加
module.exports = {
  // modules
  modules: [
    'nuxt-sass-resources-loader'
  ],

  // global variable
  // variable.scss = 変数をまとめたファイル
  // プロジェクトルートからの相対パス（Nuxtのソースディレクトリ指定`~`が使えなかった...）
  sassResources: './src/assets/css/variable.scss'
}

👆でNuxtでもコンポーネントごとにvariable.scssをインポートせず変数を使えるようになる。
ref: vue-loader/pre-processors.md at master · vuejs/vue-loader

6. ビルド

# `nuxt build`
# [TBD]
$ npm run build

# `nuxt generate`
# 静的ファイルとして書き出す
$ npm run generate

ビルド先の指定

• nuxt generate（npm run generate）のビルド先はnuxt.config.jsで変更できる

// example: nuxt.config.js
module.exports = {
  generate: {
    // プロジェクトルートからのパス（この場合は`/htdocs/`以下にビルドされる）
    dir: 'htdocs'
  }
}

ビルド時の疑問

• [TBD] nuxt buildとnuxt generateの違い

7. サーバーで

nuxt generate（npm run generate）でビルドされたファイルをサーバーに置く。
（/_nuxt/ディレクトリとindex.htmlがビルドされるはず）

8. その他

疑問

npm run generate時に書き出し先ディレクトリの中身を削除したくない

• ビルドファイルをルートに配置＆VCCWを併用する場合にnuxt generateするとWordpressファイルが消えてしまうため
• 多分ここらへんで削除している
  ref: https://github.com/nuxt/nuxt.js/blob/dev/lib/builder/generator.js#L105
• 考えられる対応？①：generate時にディレクトリの中身を削除しないようにする
• 考えられる対応？②：WPファイルは別ディレクトリに配置＆プロキシする

サブディレクトリで使う際のディレクトリ設定

• nuxt.config.jsのgenerateとrouterを変更する

// example:
// ブラウザでの表示はhttp://localhost:3000/subdirectory
module.exports = {
  generate: {
    dir: 'dist/subdirectory' // デフォルトは`dist`
  },
  
  router: {
    base: '/subdirectory/'   // デフォルトは`/`
  }
}

参考

• Nuxt.js
• Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 | HTML5Experts.jp