福岡拠点の野田です。
サーバーサイドでレンダリングするSSR(Server Side Rendering)を次の案件で使うことにしました。API側は慣れ親しんだLaravel。
最初に悩むのが環境構築。
どうしようか、というところで参考にしたのが、次の記事。
LaravelとNuxt.jsを同一レポジトリで管理するときの構成https://www.wantedly.com/companies/roxx/post_articles/84615
client フォルダ以下に環境を作る例ですが、とても参考になりました。以下おっかけになりますが手順になります。
|
1 2 3 4 5 6 7 8 |
[crayon-6573ca26b805f976590178 ]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)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
[crayon-6573ca26b8065594207931 ]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', ] } |
起動シェル(再起動シェル)は以下のような感じで作ります。
|
1 2 3 4 5 6 7 8 9 10 11 |
[crayon-6573ca26b806b543983406 ]#!/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は、マイクロサービスをつなげる糊の役割をしているフレームワークだと思います。これからもっと深く使っていきたいと思います。