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
350
Remix で middleware
Remix で middleware を作る方法とハマリどころ
ONDA, Takashi
November 20, 2024
Tweet
Share
More Decks by ONDA, Takashi
See All by ONDA, Takashi
React への依存を最小にするフロントエンド設計
takonda
26
18k
TSKaigi Kansai 2024 - 構造的部分型と serialize 境界
takonda
2
1.3k
Remix Way を外れる自由
takonda
1
500
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
takonda
14
8.2k
Other Decks in Programming
See All in Programming
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
560
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
820
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
180
List とは何か? / PHPerKaigi 2025
meihei3
0
550
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
7
3.7k
SLI/SLOの設定を進めるその前に アラート品質の改善に取り組んだ話
tanden
2
720
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
1
320
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
230
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
3k
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
140
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
120
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
12
3.5k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
610
Adopting Sorbet at Scale
ufuk
75
9.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Navigating Team Friction
lara
184
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Unsuck your backbone
ammeep
670
57k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
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 エンジニア募集中! 一休では、よりよいサービスを届ける仲間を募集しています。