Nuxt.jsのベストプラクティスを考えてみる.pdf

Transcript

1. Nuxt.js+TypeScriptの ベストプラクティスを考えてみる
2. 自己紹介 名前：田中　友彩（たなか　ゆい） Twitter: @yuit1552　 所属：株式会社サイバーエージェント　アドテク本部 職種：フルスタックエンジニア 　（商談からはじめ、インフラ、バックエンド、 Webフロント、Android、iOSまで 　一気通貫です） 最近よく使う技術： 　Nuxt.js, Typescript, Golang, Kotlin, AWS, GCP, Terraform, Datadog, ML系 座右の名：成せば（大抵なんとか）なる
3. Nuxt.js + TypeScript でのAPIの利用について 考えます。 今回は
4. サードパーティクッキーの扱いが厳しく なったり、CORSが面倒だったり、別ドメイン のAPIを叩くケースが結構厳しくなってきた 感じがします。 近年の事情
5. そういった関係で、同一ドメインでAPIを 持った方が何かと扱いやすいケースが多い ですね。
6. APIを用意する手段として、いくつかの方法が あるかと思うので今回は、API周りのベスト プラクティスを考えて見ようとおもいます。
7. ・@nuxtjs/proxyで、バックエンドのAPIをproxyする ・nginx等でAPIサーバーにproxyする ・express等でapi作る ・Nuxt.jsのserverMiddlewareを使う 等々 考えられる方法としては
8. 用途としては ・クロスオリジン問題を回避したい ・http-onlyにしたクッキーを扱いたい ・クライアントから何本も叩いてるAPIを一本にまとめたい ・フロント仕様でレスポンスを加工したい 等々
9. Proxyとかでもいいですが、やっぱりNuxt.jsで Backends For Frontends（BFF）のAPI つくってしまったほうが効率がよく、
10. ・バックエンドエンジニアにお願いする手間 　が省ける ・画面に依存した仕様などをサクッとフロント 　側でできる。
11. など、メリットがおおいと思うので、 Nuxt.jsでBFF APIを持つ場合の持ちかたを 考えてみます。
12. 手段を考える　１つめ create-nuxt-app の、Use a custom server frameworkで express等を選んで使う
13. こんな感じのが生成 されますが、
14. あれ？importじゃない。。。 packageの nuxt.jsが 2.0.0。。。
15. しょうがない、 バージョン上げてimport使えるように設定 いじろう。
16. ts でexpressからNuxt動作させる場合、 ts-nodeを使います。
17. ts-nodeでimportを使う場合tsconfigの moduleを、commonjsにする必要ありますが、 変更してしまうと、vueまわりでエラーに。。。
18. ts-node用にtsconfig分けるのもなぁ。。。
19. 煩雑になりそうだから、 expressから、nuxtを呼ぶのやめよう！
20. 手段を考える　２つめ serverMiddleware を使う
21. 公式だと (nuxt.config.js) これか
22. これ
23. と書いてありました。nuxt.config.jsにapiや ミドルウェアのパスを書くのは嫌だったので カスタムミドルウェアを使ってみよう！ と思いました。
24. Nuxtのdocsには connectというライブラリのdocsを参照と 書いており、 connectはhttpサーバーっぽかったのですが、
25. ソースコードを読むと 老舗のexpressほど機能はなさそうでした。 さらに、 Nuxt.jsのconnectを呼んでる箇所みると
26. お？
27. 渡したmiddlewareを そのまま読み込んでくれる感じになってる！
28. expressには慣れていたこともあり、expressの routerを使えると綺麗にapiを整理できそう！
29. あと、connectのgitみると https://github.com/senchalabs/connect#appusefn These middleware and libraries are officially supported by the Connect/Express team: expressのミドルウェアサポートされてる！
30. ということで、こんな感じで実装します
31. nuxt.config.ts server/index.ts server/api/index.ts expressのRouter も使えます！
32. @nuxt/typescript (2.9.xからの新しいやつ) 起動スクリプト
33. 補足ですが nuxt 2.9のnuxt-tsコマンドは、ここでcommonjs設定 してるから、importがつかえる
34. 定番のミドルウェア含めNuxtの serverMiddlewareで、expressのRouterを 使ってAPIが動作しました！ なんかベストプラクティスっぽい！
35. 気がしますが、もう一つ気になる ことが。。。 私はIntelliJを使ってるのですが
36. ん？？？ts-nodeはtsconfigのpaths普通は 使えませんよ？？？
37. IntelliJさんの言う通りに変更してみると。。。
38. Cannot find module '~/utils/stringUtils'
39. そりゃそうですね、ts-nodeそのままじゃ 対応してないから。。。
40. そこで、エイリアスを使うために tsconfig-pathsを使いたい。 これ使うと、pathsが使えるのですが、 nuxt-tsは普通は -r オプション 対応してない。。。ですが
41. 先週、私のQiitaの記事にも書いたんですが
42. こうすると、nuxt-tsコマンドでtsconfig-paths が使えますー
43. これでpathsも使えるし、綺麗にAPIが動いた！ APIの仕組みはベストっぽい！
44. だけど、起動コマンドが美しくない。。。
45. 綺麗にするには、nuxtの対応が必要。。。 そこで、勇気を振り絞って
46. nuxt-tsコマンド持ってる @nuxt/typescript-runtimeリポジトリに PRしてみました＾＾
47. 結果は。。。
48. こんにちは！コアcliフックがサポートされるま で、このPRを保留する必要があると思いま す。
49. おしいw
50. まだマージされなかですが、core cli対応すれば 行けそうなので、core cliに向けてPR出す 予定です！
51. NuxtのserverMiddlewareで、 express-router等を読み込んでAPI作って nuxt-tsコマンド使うのが一番良さそう。 まとめ
52. BFF APIをNuxtで持っておくと、 何かと便利なので是非serverMiddleware 活用してみてください！
53. 最後に
54. 私のチームでは - フルスタックエンジニア or - フルスタックになりたいエンジニア （今使ってる言語は何でもいいです） を募集しています！
55. ご興味ある方はお声がけください＾＾ 後日の場合 twitter：@yuit1552 まで、お問い合わせいただければ！
56. ご静聴ありがとうございました。