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
620
Remix で middleware
Remix で middleware を作る方法とハマリどころ
ONDA, Takashi
November 20, 2024
Tweet
Share
More Decks by ONDA, Takashi
See All by ONDA, Takashi
React への依存を最小にするフロントエンド設計
takonda
27
25k
TSKaigi Kansai 2024 - 構造的部分型と serialize 境界
takonda
2
1.4k
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
CSC509 Lecture 03
javiergs
PRO
0
320
dynamic!
moro
9
5.9k
Build your own WebP codec in Swift
kishikawakatsumi
2
890
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
120
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
970
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
740
Serena MCPのすすめ
wadakatu
4
870
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
490
クラシルを支える技術と組織
rakutek
0
190
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
660
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
開発生産性を上げるための生成AI活用術
starfish719
1
150
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Site-Speed That Sticks
csswizardry
11
870
Facilitating Awesome Meetings
lara
56
6.6k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Bash Introduction
62gerente
615
210k
Why Our Code Smells
bkeepers
PRO
339
57k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Typedesign – Prime Four
hannesfritz
42
2.8k
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 エンジニア募集中! 一休では、よりよいサービスを届ける仲間を募集しています。