とろろこんぶろぐ

かけだしR&Dフロントエンジニアの小言

nuxtプロジェクト用のボイラープレートを作った

概要

react/reduxのプロジェクト向けに、redux-pluto というボイラープレートを利用しているので、(redux-plutoほど多機能で考えられたものではないが)同様のnuxt版ボイラープレートを作った。

github.com  

基本的な機能だけを簡単に実装しているので大したことはしてないが、nuxtのプロジェクトを開発する際のスターターキット的なものとして参考になればと思ってる。

ただそもそもvueやnuxtのプロジェクトを書いたことがあるわけではなく、vue/nuxtの勉強も兼ねて作っているので、多少間違っている書き方もあるかもしれない。

API直接呼び出しはしたくなかったので、BFFにAPIミドルウェアを自前でexpressに追加して開発している。

f:id:ka2jun8:20190115004856p:plain:w300

(デザインにもう少し気を遣った方がいいかもな...)

機能説明

画面や機能的にはredx-plutoとほとんど同じように作っているつもりだが、手を抜いているところもしばしばあるので今後改善予定。

SSR

nuxtではデフォルトでSSRレンダリングしてくれる。

デフォルトでSSRモードになってはいるが、明示的に指定するのであれば、nuxt.config.jsmode: "universal" を指定する。

ちなみにSSRしないSPAモードもある(  mode: "spa" )。

API: mode プロパティ - Nuxt.js

ステート管理とAPI呼びだし

vuexを利用して、Flux的にステート管理する。

Vuex ストア - Nuxt.js

actionsでBFFに対してリクエストを送り、BFF(services)からバックエンドにリクエストを送る。サーバへのレスポンスを中継して、クライアントに返してもらい、BFFからのレスポンスは、storeのmutationsで必要に応じて変換して持つイメージ。

nuxt-pluto/store at master · ka2jun8/nuxt-pluto · GitHub

storeフォルダでファイルごとにそのままstateの呼び出しのグルーピングができて、componentからは this.$store.state.${ファイル名}  でどこからでも読み出し可能。

ちなみにAPI Mockにはagreedを利用している。

GitHub - recruit-tech/agreed: agreed is Consumer Driven Contract tool with JSON mock server.

デフォルトレイアウトとルーティング

デフォルトレイアウトはlayoutsdefault.vueで持ち、コンポーネントcomponentsで定義しておく。 ルーティングというほどのルーティング設定はなく、pagesに置いておいた単一ファイル名がそのままpathになる。_id.vueなどのようにすると、idが変数になってidごとのページを作れる。

認証

単純にログインフォームから正しいユーザIDとパスワードが送られたらメモリ上のセッションに認証済みであることを書き出す。

Searchページは認証を必要としたページとして作っていて、middlewareで認証済みでないとloginにリダイレクトするようにしている。

nuxt-pluto/auth.js at master · ka2jun8/nuxt-pluto · GitHub

nuxt auth moduleを利用すればもう少し賢く書けるのかも。

Introduction - Auth Module

また、storeindex.jsnuxtServerInitを定義すると、SSR時に呼び出してくれるのでアクセス時にsessionが残っていたらログイン状態にする処理はここでやるようにした。

ファイルアップロード

画像ファイルのアップロードができるサンプルも作っている。 multerでファイルは一時的に保管するようにしたが、作ってみたけどあまりnuxtやvueならではのところはないかも。  

静的ページ生成

nuxtでは  nuxt generate で静的ページ生成が可能だが、generateされたhtmlではBFFが存在しなくなるので今回のものだと動かなかった。BFFを自前で用意しない単なるSPAだったら生成できたんだろうけど、今後調査する予定。BFFで機能を持たせるとこういう面倒なところがあるんですね。。。

まとめ

大したものではないが、簡単なnuxtプロジェクトのボイラープレートを作った。今後もnuxtやvueで気になった機能があれば、サンドボックス的に追加していきたいと思う。