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
630
Remix で middleware
Remix で middleware を作る方法とハマリどころ
ONDA, Takashi
November 20, 2024
Tweet
Share
More Decks by ONDA, Takashi
See All by ONDA, Takashi
React への依存を最小にするフロントエンド設計
takonda
27
26k
TSKaigi Kansai 2024 - 構造的部分型と serialize 境界
takonda
2
1.5k
Remix Way を外れる自由
takonda
1
570
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
takonda
14
8.4k
Other Decks in Programming
See All in Programming
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
560
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
360
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
All About Angular's New Signal Forms
manfredsteyer
PRO
0
160
Devvox Belgium - Agentic AI Patterns
kdubois
1
120
CSC305 Lecture 05
javiergs
PRO
0
210
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
360
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Building Adaptive Systems
keathley
44
2.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Become a Pro
speakerdeck
PRO
29
5.5k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Facilitating Awesome Meetings
lara
56
6.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Designing Experiences People Love
moore
142
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Raft: Consensus for Rubyists
vanstee
140
7.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Mobile First: as difficult as doing things right
swwweet
224
10k
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 エンジニア募集中! 一休では、よりよいサービスを届ける仲間を募集しています。