このサイトは、只今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

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

ブラウザフィンガープリントは、Cookieの代用となるのか? JSライブラリ Fingerprintjs2など。

2019.02.03

Vue.jsでSPA、Vuex使用するなら Nuxt.jsが超絶便利な件。

2018.12.23

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

CATEGORY LIST

LATEST NEWS

Ubuntu 開発環境構築まとめ

ubuntu

2019.02.25

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

JavaScript

2019.02.21

HerokuでRailsをビルド buildpack、Rubyバージョンでエラー

エラー

2019.02.13

ブラウザフィンガープリントは、Cookieの代用となるのか? JSライブラリ Fingerprintjs2など。

JavaScript

2019.02.03

CPUの創りかた TD4 購入(必要)パーツ一覧

電子工作

2019.01.21

あけましておめでとうございます(かなり遅め)

イベント

2019.01.12

Vue.jsでSPA、Vuex使用するなら Nuxt.jsが超絶便利な件。

JavaScript

2018.12.23

2018年 Docker 使い方 まとめ その3

Docker

2018.12.17

2018年 Docker 使い方 まとめ その2

Docker

2018.12.16

2018年 Docker 使い方 まとめ その1

Docker

2018.12.15

macOS Mojaveにアップデート vagrantで、failed MSpanList_Insert 0x1e3000 0x170f8379be41 0x0 エラー発生 vagrantが起動しない件

エラー

2018.12.15

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

RaspberryPi

2018.12.07

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US