Tweet
Tweet

Slide 1

Slide 1 text

Remix で middleware 株式会社一休 CTO 室 恩田 崇

Slide 2

Slide 2 text

2 自己紹介 株式会社一休 CTO 室 恩田 崇 1978 年生まれ、京都在住 フルスタック、なんでも屋 一休レストランのフロントエンドアーキテクト Next.js App Router を Remix に書き換えた フロントエンドは IE4/DHTML あたりから

Slide 3

Slide 3 text

3 TSKaigi Kansai にて TypeScript っぽい話をしたのに…

Slide 4

Slide 4 text

4 TSKaigi Kansai にて Remix 移行の話ばかりでした 🤣 懇親会その他で訊かれるのは…

Slide 5

Slide 5 text

5 本編 とある開発中の案件で認証関連の機能が必要に

Slide 6

Slide 6 text

6 本編 express だし middleware 使えばすぐ？ 🤔 とある開発中の案件で認証関連の機能が必要に

Slide 7

Slide 7 text

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)

Slide 8

Slide 8 text

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) } }

Slide 9

Slide 9 text

9 ハマりどころ

Slide 10

Slide 10 text

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;

Slide 11

Slide 11 text

11 2024 年に express 書くの？ 今日の特別ゲストは…

Slide 12

Slide 12 text

12 2024 年に express 書くの？ 今日の特別ゲストは…

Slide 13

Slide 13 text

13 2024 年に express 書くの？ demo hono-remix-adapter で動かしてみた

Slide 14

Slide 14 text

14 宣伝 土曜日の JSConf JP で登壇します

Slide 15

Slide 15 text

15 エンジニア募集中！ 一休では、よりよいサービスを届ける仲間を募集しています。