Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.jsのベストプラクティスを考えてみる.pdf
Search
tanaka-yui
August 26, 2019
Programming
6
6.2k
Nuxt.jsのベストプラクティスを考えてみる.pdf
tanaka-yui
August 26, 2019
Tweet
Share
More Decks by tanaka-yui
See All by tanaka-yui
パラレルワーカーという働き方
tanakayui
1
920
フルスタックエンジニアとしてゼロからサービスを作る時に考えていること
tanakayui
3
1.1k
Other Decks in Programming
See All in Programming
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Kotlin 2.0 and Beyond
antonarhipov
2
150
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
実践!難読化ガイド
mitchan
0
200
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
800
オートマトン学習しろ / Do automata learning
makenowjust
3
130
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
Ruby Parser progress report 2024
yui_knk
2
230
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
Why Prism?
kddnewton
4
1.7k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Practical Orchestrator
shlominoach
185
10k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Rails Girls Zürich Keynote
gr2m
93
13k
Music & Morning Musume
bryan
46
6k
The World Runs on Bad Software
bkeepers
PRO
64
11k
Designing for humans not robots
tammielis
248
25k
A Tale of Four Properties
chriscoyier
155
22k
The Invisible Customer
myddelton
119
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
Transcript
Nuxt.js+TypeScriptの ベストプラクティスを考えてみる
自己紹介 名前:田中 友彩(たなか ゆい) Twitter: @yuit1552 所属:株式会社サイバーエージェント アドテク本部 職種:フルスタックエンジニア (商談からはじめ、インフラ、バックエンド、 Webフロント、Android、iOSまで 一気通貫です) 最近よく使う技術:
Nuxt.js, Typescript, Golang, Kotlin, AWS, GCP, Terraform, Datadog, ML系 座右の名:成せば(大抵なんとか)なる
Nuxt.js + TypeScript でのAPIの利用について 考えます。 今回は
サードパーティクッキーの扱いが厳しく なったり、CORSが面倒だったり、別ドメイン のAPIを叩くケースが結構厳しくなってきた 感じがします。 近年の事情
そういった関係で、同一ドメインでAPIを 持った方が何かと扱いやすいケースが多い ですね。
APIを用意する手段として、いくつかの方法が あるかと思うので今回は、API周りのベスト プラクティスを考えて見ようとおもいます。
・@nuxtjs/proxyで、バックエンドのAPIをproxyする ・nginx等でAPIサーバーにproxyする ・express等でapi作る ・Nuxt.jsのserverMiddlewareを使う 等々 考えられる方法としては
用途としては ・クロスオリジン問題を回避したい ・http-onlyにしたクッキーを扱いたい ・クライアントから何本も叩いてるAPIを一本にまとめたい ・フロント仕様でレスポンスを加工したい 等々
Proxyとかでもいいですが、やっぱりNuxt.jsで Backends For Frontends(BFF)のAPI つくってしまったほうが効率がよく、
・バックエンドエンジニアにお願いする手間 が省ける ・画面に依存した仕様などをサクッとフロント 側でできる。
など、メリットがおおいと思うので、 Nuxt.jsでBFF APIを持つ場合の持ちかたを 考えてみます。
手段を考える 1つめ create-nuxt-app の、Use a custom server frameworkで express等を選んで使う
こんな感じのが生成 されますが、
あれ?importじゃない。。。 packageの nuxt.jsが 2.0.0。。。
しょうがない、 バージョン上げてimport使えるように設定 いじろう。
ts でexpressからNuxt動作させる場合、 ts-nodeを使います。
ts-nodeでimportを使う場合tsconfigの moduleを、commonjsにする必要ありますが、 変更してしまうと、vueまわりでエラーに。。。
ts-node用にtsconfig分けるのもなぁ。。。
煩雑になりそうだから、 expressから、nuxtを呼ぶのやめよう!
手段を考える 2つめ serverMiddleware を使う
公式だと (nuxt.config.js) これか
これ
と書いてありました。nuxt.config.jsにapiや ミドルウェアのパスを書くのは嫌だったので カスタムミドルウェアを使ってみよう! と思いました。
Nuxtのdocsには connectというライブラリのdocsを参照と 書いており、 connectはhttpサーバーっぽかったのですが、
ソースコードを読むと 老舗のexpressほど機能はなさそうでした。 さらに、 Nuxt.jsのconnectを呼んでる箇所みると
お?
渡したmiddlewareを そのまま読み込んでくれる感じになってる!
expressには慣れていたこともあり、expressの routerを使えると綺麗にapiを整理できそう!
あと、connectのgitみると https://github.com/senchalabs/connect#appusefn These middleware and libraries are officially supported by
the Connect/Express team: expressのミドルウェアサポートされてる!
ということで、こんな感じで実装します
nuxt.config.ts server/index.ts server/api/index.ts expressのRouter も使えます!
@nuxt/typescript (2.9.xからの新しいやつ) 起動スクリプト
補足ですが nuxt 2.9のnuxt-tsコマンドは、ここでcommonjs設定 してるから、importがつかえる
定番のミドルウェア含めNuxtの serverMiddlewareで、expressのRouterを 使ってAPIが動作しました! なんかベストプラクティスっぽい!
気がしますが、もう一つ気になる ことが。。。 私はIntelliJを使ってるのですが
ん???ts-nodeはtsconfigのpaths普通は 使えませんよ???
IntelliJさんの言う通りに変更してみると。。。
Cannot find module '~/utils/stringUtils'
そりゃそうですね、ts-nodeそのままじゃ 対応してないから。。。
そこで、エイリアスを使うために tsconfig-pathsを使いたい。 これ使うと、pathsが使えるのですが、 nuxt-tsは普通は -r オプション 対応してない。。。ですが
先週、私のQiitaの記事にも書いたんですが
こうすると、nuxt-tsコマンドでtsconfig-paths が使えますー
これでpathsも使えるし、綺麗にAPIが動いた! APIの仕組みはベストっぽい!
だけど、起動コマンドが美しくない。。。
綺麗にするには、nuxtの対応が必要。。。 そこで、勇気を振り絞って
nuxt-tsコマンド持ってる @nuxt/typescript-runtimeリポジトリに PRしてみました^^
結果は。。。
こんにちは!コアcliフックがサポートされるま で、このPRを保留する必要があると思いま す。
おしいw
まだマージされなかですが、core cli対応すれば 行けそうなので、core cliに向けてPR出す 予定です!
NuxtのserverMiddlewareで、 express-router等を読み込んでAPI作って nuxt-tsコマンド使うのが一番良さそう。 まとめ
BFF APIをNuxtで持っておくと、 何かと便利なので是非serverMiddleware 活用してみてください!
最後に
私のチームでは - フルスタックエンジニア or - フルスタックになりたいエンジニア (今使ってる言語は何でもいいです) を募集しています!
ご興味ある方はお声がけください^^ 後日の場合 twitter:@yuit1552 まで、お問い合わせいただければ!
ご静聴ありがとうございました。