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
Remix で middleware
Search
ONDA, Takashi
November 20, 2024
Programming
0
190
Remix で middleware
Remix で middleware を作る方法とハマリどころ
ONDA, Takashi
November 20, 2024
Tweet
Share
More Decks by ONDA, Takashi
See All by ONDA, Takashi
React への依存を最小にするフロントエンド設計
takonda
22
14k
TSKaigi Kansai 2024 - 構造的部分型と serialize 境界
takonda
2
1.1k
Remix Way を外れる自由
takonda
1
460
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
takonda
14
8k
Other Decks in Programming
See All in Programming
ErdMap: Thinking about a map for Rails applications
makicamel
1
700
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
560
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
210
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
1.9k
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.4k
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
960
Scaling your build logic
antalmonori
1
110
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
300
선언형 UI에서의 상태관리
l2hyunwoo
0
270
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
630
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
430
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
110
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
19
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
How STYLIGHT went responsive
nonsquared
96
5.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Site-Speed That Sticks
csswizardry
3
280
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Speed Design
sergeychernyshev
25
740
Producing Creativity
orderedlist
PRO
343
39k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Typedesign – Prime Four
hannesfritz
40
2.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Transcript
Remix で middleware 株式会社一休 CTO 室 恩田 崇
2 自己紹介 株式会社一休 CTO 室 恩田 崇 1978 年生まれ、京都在住 フルスタック、なんでも屋
一休レストランのフロントエンドアーキテクト Next.js App Router を Remix に書き換えた フロントエンドは IE4/DHTML あたりから
3 TSKaigi Kansai にて TypeScript っぽい話をしたのに…
4 TSKaigi Kansai にて Remix 移行の話ばかりでした 🤣 懇親会その他で訊かれるのは…
5 本編 とある開発中の案件で認証関連の機能が必要に
6 本編 express だし middleware 使えばすぐ? 🤔 とある開発中の案件で認証関連の機能が必要に
7 middleware Remix は express アプリ const port = Number(process.env.PORT)
const buildPathArg = process.argv[2] const buildPath = path.resolve(buildPathArg) const build: ServerBuild = await import(url.pathToFileURL(buildPath).href) const app = express() app.disable('x-powered-by') app.use(compression()) // ここで middleware app.use(authMiddleware) app.use( build.publicPath, express.static(build.assetsBuildDirectory, { immutable: true, maxAge: '1y' }) ) app.all('*', remixHandler(build)) app.listen(port, onListen)
8 middleware Remix context に引き継げる function remixHandler(build: ServerBuild) { return
(req: Request, res: Response, next: NextFunction) => { const handler = createRequestHandler({ build, mode: process.env.NODE_ENV, getLoadContext() { return { authResult: (req as ReqWithAuth).authResult } }, }) handler(req, res, next) } }
9 ハマりどころ
10 ハマりどころ Node の native fetch でリクエストが詰まる問題に遭遇しました installGlobals を忘れずに `
` import { installGlobals } from '@remix-run/node' installGlobals() let { File: RemixFile, fetch: RemixFetch, FormData: RemixFormData, Headers: RemixHeaders, Request: RemixRequest, Response: RemixResponse, } = require("@remix-run/web-fetch"); global.File = RemixFile; global.Headers = RemixHeaders; global.Request = RemixRequest; global.Response = RemixResponse; global.fetch = RemixFetch; global.FormData = RemixFormData;
11 2024 年に express 書くの? 今日の特別ゲストは…
12 2024 年に express 書くの? 今日の特別ゲストは…
13 2024 年に express 書くの? demo hono-remix-adapter で動かしてみた
14 宣伝 土曜日の JSConf JP で登壇します
15 エンジニア募集中! 一休では、よりよいサービスを届ける仲間を募集しています。