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
540
Remix で middleware
Remix で middleware を作る方法とハマリどころ
ONDA, Takashi
November 20, 2024
Tweet
Share
More Decks by ONDA, Takashi
See All by ONDA, Takashi
React への依存を最小にするフロントエンド設計
takonda
26
23k
TSKaigi Kansai 2024 - 構造的部分型と serialize 境界
takonda
2
1.4k
Remix Way を外れる自由
takonda
1
550
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
takonda
14
8.3k
Other Decks in Programming
See All in Programming
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
880
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
VS Code Update for GitHub Copilot
74th
2
650
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Building Applications with DynamoDB
mza
95
6.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Adopting Sorbet at Scale
ufuk
77
9.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Faster Mobile Websites
deanohume
307
31k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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 エンジニア募集中! 一休では、よりよいサービスを届ける仲間を募集しています。