Vue.js + SSR （Universal JavaScript）環境を、「NUXT.js」でサクッと構築する方法。
2017.10.09
この記事は最終更新日から1年以上が経過しています。
どもです。
先日はAngular4のSSR （Universal JavaScript）環境を構築する方法でしたが、今回は「Vue.js」となります。
なんだかんだで、「Vue.js」はやっぱり使いやすいですよねー。
当方もゲーム制作でガンガン利用しております。
という事で、今回は、今人気急上昇の「Vue.js」のSSR （Universal JavaScript）環境構築していくのですが、「NUXT.js」を利用することで、ホントに拍子抜けするぐらい簡単に用意できちゃいますので、そちらの手順を紹介させていただきますー。
NUXT js
NUXT Universal Vue.js Applications
Nuxt.jsはサーバーサイドレンダリングを用いたVue.jsアプリケーションを簡単容易に作成するためのフレームワークで、非同期データ、ミドルウェア、ルーティングなどを管理するために必要な設定のほとんどを抽象化されている模様です。
AngularのAngular Universalや、ReactのNext.jsなどと同様の位置づけかと思います。
また、Nuxt.jsはVue.js 2.0に加え、Vue-Router、Vue-Meta、Vuex（ストアオプションを使うときのみ）をインクルードしている様で、SSR環境を作るために個別に必要な各種ライブラリーを手作業でインクルードして設定するなんて手間もいらないようになっております。
便利ですね〜。
なにはともあれ、早速使って行きましょう。
vue-cli インストール
テンプレート生成の為「vue-cli」を用いて生成します。
github
$ npm install -g vue-cli
npmコマンドで、グローバルにインストールします。
この「vue-cli」は多機能で、様々な事が事が、今回は割愛させて頂きます。
（githubのREADME.mdに書かれていますので、そちらを見て頂ければと。）
テンプレート生成
「vue-cli」をインストールすると「vueコマンド」が使用出来ますので、「vueコマンド」でSSR環境を生成。
$ vue init nuxt/starter vue-ssr
すると、「Project name、Project description、Author」などが聞かれますが、とりあえず全部リターンで良いでしょう。
すると、完了して以下の様なHelpが出ますので、そのまま入力。
To get started:
cd vue-ssr
npm install # Or yarn
npm run dev
順番に実行。
$ cd vue-ssr
$ npm install
$ npm run dev
「npm run dev」コマンドを入力すると、ビルドとサーバーを立ち上げるプロセスとなり、「http://localhost:3000」をブラウザで開くと。
ジャーン。
上記の様に表示します。
これで、もうSSR環境が用意されていると言う。。
超簡単ですね！ ＞＜
拍子抜けしちゃいますよね。
Angularの回と同様にMetaを変更してみる
このままだとあれなので、
前回のAngular4をSSR化。同様に、Metaが変更するように修正していきたいと思います。
全ページで読み込むファイルとなる、layouts/default.vueを修正していきます。
こちらには簡易のナビゲーションリンクを追加します。
layouts/default.vue
<template>
<div>
<ul>
<li>
<nuxt-link active-class="is-active" to="/" exact>Home</nuxt-link>
</li>
<li>
<nuxt-link active-class="is-active" to="/about" exact>About</nuxt-link>
</li>
</ul>
<nuxt/>
</div>
</template>
続いて、pagesディレクトリに「about.vue」ファイルを追加します。
こちらの「pagesディレクトリ」は、NUXTの監視対象となっているため、ファイルを追加してサーバーを再度立ち上げる必要もありません。
pages/about.vue
<template>
<p>About Page</p>
</template>
<script>
export default {
head: {
title: 'About',
meta: [
{ hid: 'description', name: 'description', content: 'About Page' }
]
}
}
</script>
最低限の記述を行いました。
では、確認しましょう。
ナビゲーションの「About」をクリックで、Aboutページへ遷移し「title」「metaのdescription」も変更されているのが確認できます。
Angularと比較すると、非常に簡単に行えるのが分かりますね。
今回は、本当に最低限の事しか行っていないのですが、より詳細を知りたい方は、こちらのNUXTjs公式ガイドを参照して頂ければと思います。
NUXTjs公式ガイド
最後に
と、SSR環境を作ってきたのですが、UAもフロントで取得してPCとSPでcomponentを切り分けたいなぁ。と思ったのがキッカケで、そうなると、やはり「SSR（Universal、isomorphic javascript)」環境にしなければならなくて、まぁ半分致し方なしのところもありました。
まだ、生のJSで保守性にかける所もありますので
・TypeScript化（Vue Class Component化）
・UA判別 component切り分け
etc..
等を行って行こうかと思います。
全部が全部「SSRが良い。」って話にはならないかと思いますので、その時その時で、一番環境にあったアーキテクチャ、フレームワークを選定して使って頂ければと思います。
ではではぁ。
