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
5.9k
Nuxt.jsのベストプラクティスを考えてみる.pdf
tanaka-yui
August 26, 2019
Tweet
Share
More Decks by tanaka-yui
See All by tanaka-yui
フルスタックエンジニアとしてゼロからサービスを作る時に考えていること
tanakayui
3
1k
Other Decks in Programming
See All in Programming
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
230
Semantic search with Django and pgvector
pauloxnet
0
240
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
200
見た目から始める生産性向上
ikumatadokoro
7
800
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
160
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
PHPはいつから死んでいるかの調査
chiroruxx
1
380
Code Reviews
bkuhlmann
4
890
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
190
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
Featured
See All Featured
Thoughts on Productivity
jonyablonski
58
3.8k
Producing Creativity
orderedlist
PRO
337
39k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Building Applications with DynamoDB
mza
88
5.6k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Atom: Resistance is Futile
akmur
259
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Teambox: Starting and Learning
jrom
128
8.4k
Web development in the modern age
philhawksworth
202
10k
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 まで、お問い合わせいただければ!
ご静聴ありがとうございました。