nuxt.js環境を構築する

福岡拠点の野田です。

サーバーサイドでレンダリングするSSR(Server Side Rendering)を次の案件で使うことにしました。API側は慣れ親しんだLaravel。

最初に悩むのが環境構築。
どうしようか、というところで参考にしたのが、次の記事。

LaravelとNuxt.jsを同一レポジトリで管理するときの構成https://www.wantedly.com/companies/roxx/post_articles/84615

client フォルダ以下に環境を作る例ですが、とても参考になりました。以下おっかけになりますが手順になります。

install -d client/pages/.gitkeep
install -d client/assets/.gitkeep
install -d client/components/.gitkeep
install -d client/layouts/.gitkeep
install -d client/middleware/.gitkeep
install -d client/plugins/.gitkeep
install -d client/static/.gitkeep
install -d client/store/.gitkeep

nuxtは起動フォルダ配下に.nuxtという一時ファイルを作成します。このため設定ファイルをclient以下に配置して、このフォルダを起動フォルダとします。

設定ファイル (nuxt.config.js)

module.exports = {
    srcDir: '../client/',

    server: {
        port: 5000, // デフォルト: 3000
        host: 'localhost', // デフォルト: localhost,
        timing: false
    },
    css: [
        'bootstrap/dist/css/bootstrap.css',
        'bootstrap-vue/dist/bootstrap-vue.css',
    ],
    plugins: [
        '@/plugins/bootstrap',
    ]
}

起動シェル(再起動シェル)は以下のような感じで作ります。

#!/bin/bash

export nuxt_count=`grep -a "" /proc/*/cmdline | xargs -P1 -r -0 | grep -s nuxt.config.js | grep -v -E '(grep|\.sh)' | wc -l`
while [ $nuxt_count -gt 0 ]
do
    ps aux |grep nuxt.config.js | grep -v -E '(grep|\.sh)' | gawk '{print $2}' | xargs -r kill -9
    sleep 1
    export nuxt_count=`grep -a "" /proc/*/cmdline | xargs -P1 -r -0 | grep -s nuxt.config.js | grep -v -E '(grep|\.sh)' | wc -l`
done

echo "" | ../node_modules/.bin/nuxt -c ./nuxt.config.js &

ちなみにecho “” | はjenkinsから呼び出したとき、標準入力を要求されたので、それ対策で入れています。

このシェルを実行することでnuxt.jsサーバーが起動します。

nuxtは素のvueでやるよりも以下の点で優れていると思います。

  • 自動でルーティングしてくれる。
  • レイアウト機構を持っている。
  • API連携の仕組みも実装しやすい形で持っている。

VueやReactやAngularは、マイクロサービスをつなげる糊の役割をしているフレームワークだと思います。これからもっと深く使っていきたいと思います。

Vuexの値の更新を監視したい

福岡拠点の宮里です。

vueのコンポーネントからvuexの値の更新を監視して、vuexの値の更新があったときにローカルのデータを更新したい場合どうすればいいの?と調べることがあったので備忘録として記事を書きます。

まずは、vuexの日本語ドキュメントを読みました。
vuexのStoreインスタンスメソッド’watch’が良さそうです。

watch(fn: Function, callback: Function, options?: Object): Function

fnが返す値をリアクティブに監視し、値が変わった時にコールバックを呼びます。fnは最初の引数としてストアのステートを、2番目の引数としてゲッターを受け取ります。 Vue のvm.$watchメソッドと同じオプションをオプションのオブジェクトとして受け付けます。

監視を止める場合は、返された unwatch 関数を呼び出します。

(vuex.vuejs.orgより引用)

うーん、vue.jsに慣れてないので上記の説明を読んでもよくわかりません。
store.watch()で引数に関数を渡して、関数の引数に監視したいstateの値を指定するみたいです。

うーん、もう一声。

‘vuex store.watch’で検索するとそれっぽい参考になりそうなコードがいくつか。
イメージはつかめてきたものの、ただ今回は、複数に分割したストアのモジュールのローカルステートを監視したかったので、mapGettersやmapStateで実際どう書けばいいのと悩むこと数十分。

ありました、ありました!
vue.js開発者の方のブログに「Watch for Vuex State changes!」という記事が!!
探してたのこれこれ!ありがとうございます!と参考にさせていただきましたm(_ _)m

四苦八苦しつつもなんとかこのかたちに落ち着きました。
this.$store.watch()の第一引数にステート/ゲッター、どちらを渡してもうまくいきそうです。