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.7k
Nuxt.jsのベストプラクティスを考えてみる.pdf
tanaka-yui
August 26, 2019
Tweet
Share
More Decks by tanaka-yui
See All by tanaka-yui
パラレルワーカーという働き方
tanakayui
1
1.4k
フルスタックエンジニアとしてゼロからサービスを作る時に考えていること
tanakayui
3
1.2k
Other Decks in Programming
See All in Programming
CSC509 Lecture 02
javiergs
PRO
0
400
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
890
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
310
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.1k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
360
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
110
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
Learn CPU architecture with Assembly
akkeylab
1
1.3k
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
960
Serena MCPのすすめ
wadakatu
4
860
XP, Testing and ninja testing ZOZ5
m_seki
2
240
Featured
See All Featured
Context Engineering - Making Every Token Count
addyosmani
4
170
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Statistics for Hackers
jakevdp
799
220k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Building Adaptive Systems
keathley
43
2.8k
A Modern Web Designer's Workflow
chriscoyier
697
190k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to Think Like a Performance Engineer
csswizardry
27
2k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
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 まで、お問い合わせいただければ!
ご静聴ありがとうございました。