福岡拠点の野田です。
サーバーサイドでレンダリングする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は、マイクロサービスをつなげる糊の役割をしているフレームワークだと思います。これからもっと深く使っていきたいと思います。