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
610
Remix で middleware
Remix で middleware を作る方法とハマリどころ
ONDA, Takashi
November 20, 2024
Tweet
Share
More Decks by ONDA, Takashi
See All by ONDA, Takashi
React への依存を最小にするフロントエンド設計
takonda
26
25k
TSKaigi Kansai 2024 - 構造的部分型と serialize 境界
takonda
2
1.4k
Remix Way を外れる自由
takonda
1
560
一休レストランで 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
はじめてのMaterial3 Expressive
ym223
2
290
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
140
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.4k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
180
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
260
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
270
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
690
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Deep Dive into Kotlin Flow
jmatsu
1
330
OSS開発者という働き方
andpad
5
1.7k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
440
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Navigating Team Friction
lara
189
15k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
A Tale of Four Properties
chriscoyier
160
23k
Faster Mobile Websites
deanohume
309
31k
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 エンジニア募集中! 一休では、よりよいサービスを届ける仲間を募集しています。