Remix で middleware

Remix で middleware を作る方法とハマリどころ

Transcript

1. Remix で middleware 株式会社一休 CTO 室 恩田 崇
2. 2 自己紹介 株式会社一休 CTO 室 恩田 崇 1978 年生まれ、京都在住 フルスタック、なんでも屋 一休レストランのフロントエンドアーキテクト Next.js App Router を Remix に書き換えた フロントエンドは IE4/DHTML あたりから
3. 3 TSKaigi Kansai にて TypeScript っぽい話をしたのに…
4. 4 TSKaigi Kansai にて Remix 移行の話ばかりでした 🤣 懇親会その他で訊かれるのは…
5. 5 本編 とある開発中の案件で認証関連の機能が必要に
6. 6 本編 express だし middleware 使えばすぐ？ 🤔 とある開発中の案件で認証関連の機能が必要に
7. 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. 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. 9 ハマりどころ
10. 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. 11 2024 年に express 書くの？ 今日の特別ゲストは…
12. 12 2024 年に express 書くの？ 今日の特別ゲストは…
13. 13 2024 年に express 書くの？ demo hono-remix-adapter で動かしてみた
14. 14 宣伝 土曜日の JSConf JP で登壇します
15. 15 エンジニア募集中！ 一休では、よりよいサービスを届ける仲間を募集しています。