はじめに

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

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

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とは

1. 準備

npm

Yarn

EditorConfig

ESlint

設定ファイル

.eslintrc.js

.eslintignore

vue-cli

2. インストール

3. 設定

4. 動かしてみる

5. もっと動かしてみる

TODO

1. テンプレート

ビュー

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

スタイル

処理しないファイル

2. Wordpressと併用する場合

ディレクトリ構造

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

Wordpress内でのパスの指定

3. SEOまわりの設定

OGタグの追加

GAコードを追加する

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

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

手順2：設定の追加

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

手順2：設定の追加

Google Search Consoleでの確認

[WIP] 4. デプロイする

前提

aws-cliでアップする場合

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

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

手順3：アップロード

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

その他

5. 疑問の解消

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

6. ビルド

ビルド先の指定

ビルド時の疑問

7. サーバーで

8. その他

疑問

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

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

参考

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

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

`aws-cli`でアップする場合

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

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

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