このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

JavaScript

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アプリケーションを簡単容易に作成するためのフレームワークで、非同期データ、ミドルウェア、ルーティングなどを管理するために必要な設定のほとんどを抽象化されている模様です。

AngularAngular Universalや、ReactNext.jsなどと同様の位置づけかと思います。

また、Nuxt.jsはVue.js 2.0に加え、Vue-RouterVue-MetaVuex(ストアオプションを使うときのみ)をインクルードしている様で、SSR環境を作るために個別に必要な各種ライブラリーを手作業でインクルードして設定するなんて手間もいらないようになっております。

便利ですね〜。

なにはともあれ、早速使って行きましょう。

vue-cli インストール

テンプレート生成の為「vue-cli」を用いて生成します。

github

vue-cli

$ 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公式ガイド

https://ja.nuxtjs.org/guide

最後に

と、SSR環境を作ってきたのですが、UAもフロントで取得してPCとSPでcomponentを切り分けたいなぁ。と思ったのがキッカケで、そうなると、やはり「SSR(Universal、isomorphic javascript)」環境にしなければならなくて、まぁ半分致し方なしのところもありました。

まだ、生のJSで保守性にかける所もありますので

TypeScript化(Vue Class Component化)

UA判別 component切り分け

etc..

等を行って行こうかと思います。

全部が全部「SSRが良い。」って話にはならないかと思いますので、その時その時で、一番環境にあったアーキテクチャ、フレームワークを選定して使って頂ければと思います。

ではではぁ。

Comment

Related Article

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

2018.09.26

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

2016.07.31

【JS】フロントでレコメンドアルゴリズムを簡単実装できるJavaScriptライブラリ「RecommendJS」を公開しました。

2016.05.30

JavaScript ビット演算・ビットマスクについてまとめてみました。

2016.03.15

CATEGORY LIST

LATEST NEWS

まだ間に合う!!「RSコンポーネンツ」で、ラズベリーパイが 配送料無料で購入できるキャンペーン中!

RaspberryPi

2018.12.07

IntelliJ + Spring Initializr + Gradleで、サクッとSpring Boot環境を構築

Java

2018.11.24

Mavenを用いたアプリケーション作成方法

Java

2018.11.24

Gradleを用いたアプリケーション作成方法

Java

2018.11.23

Jenkins 認証情報「Jenkinsマスター上の~/.sshから」が表示しない

tool

2018.11.17

流れで、Raspberry Pi Zero WHを購入。気がつけばもうラズパイ4台。

RaspberryPi

2018.11.06

安く電子工作を始めるなら、電子パーツ購入は「aitendo」がおすすめ!

RaspberryPi

2018.11.06

ASUS Chromebook Flip C101PAに、Visual Studio Codeをインストール

Chromebook

2018.10.15

Chromebookに、Ubuntu (Xubuntu)をインストールしたあとの日本語入力設定

Chromebook

2018.10.14

ASUS Chromebook Flip C101PAに、Ubuntu (Linux)インストール手順

Chromebook

2018.10.10

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

JavaScript

2018.09.26

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US