概要
react/reduxのプロジェクト向けに、redux-pluto というボイラープレートを利用しているので、(redux-plutoほど多機能で考えられたものではないが)同様のnuxt版ボイラープレートを作った。
基本的な機能だけを簡単に実装しているので大したことはしてないが、nuxtのプロジェクトを開発する際のスターターキット的なものとして参考になればと思ってる。
ただそもそもvueやnuxtのプロジェクトを書いたことがあるわけではなく、vue/nuxtの勉強も兼ねて作っているので、多少間違っている書き方もあるかもしれない。
API直接呼び出しはしたくなかったので、BFFにAPIミドルウェアを自前でexpressに追加して開発している。
(デザインにもう少し気を遣った方がいいかもな...)
機能説明
画面や機能的にはredx-plutoとほとんど同じように作っているつもりだが、手を抜いているところもしばしばあるので今後改善予定。
SSR
デフォルトでSSRモードになってはいるが、明示的に指定するのであれば、nuxt.config.js
で mode: "universal"
を指定する。
ちなみにSSRしないSPAモードもある( mode: "spa"
)。
ステート管理とAPI呼びだし
vuexを利用して、Flux的にステート管理する。
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.
デフォルトレイアウトとルーティング
デフォルトレイアウトはlayouts
のdefault.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を利用すればもう少し賢く書けるのかも。
また、store
のindex.js
でnuxtServerInit
を定義すると、SSR時に呼び出してくれるのでアクセス時にsessionが残っていたらログイン状態にする処理はここでやるようにした。
ファイルアップロード
画像ファイルのアップロードができるサンプルも作っている。 multerでファイルは一時的に保管するようにしたが、作ってみたけどあまりnuxtやvueならではのところはないかも。
静的ページ生成
nuxtでは nuxt generate
で静的ページ生成が可能だが、generateされたhtmlではBFFが存在しなくなるので今回のものだと動かなかった。BFFを自前で用意しない単なるSPAだったら生成できたんだろうけど、今後調査する予定。BFFで機能を持たせるとこういう面倒なところがあるんですね。。。
まとめ
大したものではないが、簡単なnuxtプロジェクトのボイラープレートを作った。今後もnuxtやvueで気になった機能があれば、サンドボックス的に追加していきたいと思う。