Honoで実現するバックエンド開発のイマ

Slide 1

Slide 1 text

Honoで実現するバックエンド開発のイマ 2024/10/22 Express/NextJS/Hono運用者に聞くバックエンドTSのイマ @sugar235711

Slide 2

Slide 2 text

2 sugar cat(@sugar235711) 社会人3年生 SREもどきパフォーマンスとセキュリティが好き [登壇] Hono Conference 2024 ・Using Hono in B2B SaaS [ブログ] Honoを使い倒したい2024 HonoとCasbinで認可制御を実装する登壇者情報 @sugar235711 @sugar-cat7

Slide 3

Slide 3 text

3 Agenda 1. バックエンドTS特有の難しさ 2. HonoとTypeScriptバックエンド開発 3. まとめ

Slide 4

Slide 4 text

4 この発表の対象者・紆余曲折を経てバックエンドTSをやっていき！な方・Honoが気になる方・Hono×TSの運用周りで気をつけたいポイントを知りたい方はじめに

Slide 5

Slide 5 text

5 他言語出身者がバックエンドTSを始める上での大きな参入障壁　広大なエコシステム 1. バックエンドTS特有の難しさ

Slide 6

Slide 6 text

6 他言語出身者がバックエンドTSを始める上での大きな参入障壁ランタイム/バンドラ/パッケージマネージャー/Linter/Formatter….etc　広大なエコシステム 1. バックエンドTS特有の難しさ

Slide 7

Slide 7 text

7 他言語出身者がバックエンドTSを始める上での大きな参入障壁ランタイム/バンドラ/パッケージマネージャー/Linter/Formatter….etc　デファクトっぽいものがたくさんある。何を選んで良いのかわからない。広大なエコシステム 1. バックエンドTS特有の難しさ

Slide 8

Slide 8 text

8 他言語出身者がバックエンドTSを始める上での大きな参入障壁ランタイム/バンドラ/パッケージマネージャー/Linter/Formatter….etc　デファクトっぽいものがたくさんある。何を選んで良いのかわからない。広大なエコシステム 1. バックエンドTS特有の難しさ

Slide 9

Slide 9 text

9 他言語出身者がバックエンドTSを始める上での大きな参入障壁ランタイム/バンドラ/パッケージマネージャー/Linter/Formatter….etc　デファクトっぽいものがたくさんある。何を選んで良いのかわからない。広大なエコシステム 1. バックエンド TS特有の難しさ何を基準に選べば良い？🤔 一般的なAPIを作る前提で考えてみる

Slide 10

Slide 10 text

10 他言語出身者がバックエンドTSを始める上での大きな参入障壁ランタイム/バンドラ/パッケージマネージャー/Linter/Formatter….etc　デファクトっぽいものがたくさんある。何を選んで良いのかわからない。広大なエコシステム 1. バックエンド TS特有の難しさ Cloud Providerは？・AWS/Google Cloud…etc 作りたいサービスにあったインフラを選定

Slide 11

Slide 11 text

11 他言語出身者がバックエンドTSを始める上での大きな参入障壁ランタイム/バンドラ/パッケージマネージャー/Linter/Formatter….etc　デファクトっぽいものがたくさんある。何を選んで良いのかわからない。広大なエコシステム 1. バックエンド TS特有の難しさホスティングするサービスは? ・Container Base ・EKS/ECS… ・Serverless Function ・Lambda… Cloud Providerは？・AWS/Google Cloud…etc 使用予定のサービスでのランタイム対応状況・distroless等の軽量なイメージで動くのか・Node以外のランタイムは対応しているのか、バージョンはどうか

Slide 12

Slide 12 text

12 他言語出身者がバックエンドTSを始める上での大きな参入障壁ランタイム/バンドラ/パッケージマネージャー/Linter/Formatter….etc　デファクトっぽいものがたくさんある。何を選んで良いのかわからない。広大なエコシステム 1. バックエンド TS特有の難しさホスティングするサービスは? ・Container Base ・EKS/ECS… ・Serverless Function ・Lambda… Cloud Providerは？・AWS/Google Cloud…etc ・SDK経由?Integrationは必要？公式SDKやサービスをシームレスに使えるのがベスト

Slide 13

Slide 13 text

13 他言語出身者がバックエンドTSを始める上での大きな参入障壁ランタイム/バンドラ/パッケージマネージャー/Linter/Formatter….etc　デファクトっぽいものがたくさんある。何を選んで良いのかわからない。広大なエコシステム 1. バックエンド TS特有の難しさホスティングするサービスは? ・Container Base ・EKS/ECS… ・Serverless Function ・Lambda… Cloud Providerは？・AWS/Google Cloud…etc ・SDK経由?Integrationは必要？開発者体験を優先したい？・特殊な実装WebSocketやSSE の実装を楽したい・OpenAPIやtRPCを使ってスキーマ駆動の開発がしたい他チームとの共同をし易く、かつ負債になり得る実装は極力自前で実装しない

Slide 14

Slide 14 text

14 他言語出身者がバックエンドTSを始める上での大きな参入障壁ランタイム/バンドラ/パッケージマネージャー/Linter/Formatter….etc　デファクトっぽいものがたくさんある。何を選んで良いのかわからない。広大なエコシステム 1. バックエンド TS特有の難しさそんなことが実現できる?

Slide 15

Slide 15 text

15 1. バックエンド TS特有の難しさ

Slide 16

Slide 16 text

16 Web標準に基づき、軽量で、高速に、どんなJavaScriptランタイムでも動く Webフレームワーク ● 特徴 ○ 実行環境の差分を吸収できるAdapter ○ 組み込みでWeb標準のAPIを扱い易くしたHelper ○ Webアプリケーション開発で必要になる便利機能を詰め込んだ Middleware ○ 型システムを生かした開発ができるRPC Modeのサポート Hono概要 1. バックエンドTS特有の難しさ

Slide 17

Slide 17 text

17 Web標準に基づき、軽量で、高速に、どんなJavaScriptランタイムでも動く Webフレームワーク ● 特徴 ○ 実行環境の差分を吸収できるAdapter ○ 組み込みでWeb標準のAPIを扱い易くしたHelper ○ Webアプリケーション開発で必要になる便利機能を詰め込んだ Middleware ○ 型システムを生かした開発ができるRPC Modeのサポート Hono概要 1. バックエンドTS特有の難しさ

Slide 18

Slide 18 text

18 他言語出身者がバックエンドTSを始める上での大きな参入障壁ランタイム/バンドラ/パッケージマネージャー/Linter/Formatter….etc　デファクトっぽいものがたくさんある。何を選んで良いのかわからない。広大なエコシステム 1. バックエンド TS特有の難しさホスティングするサービスは? ・Container Base ・EKS/ECS… ・Serverless Function ・Lambda… Cloud Providerは？・AWS/Google Cloud…etc Honoなら.... ・Web標準にしたがっているので (基本)どのランタイムでも動く →Node/Deno/Bun/Workerd関係ない、 Adapterからランタイム固有のAPIも簡単に使用できる

Slide 19

Slide 19 text

19 他言語出身者がバックエンドTSを始める上での大きな参入障壁ランタイム/バンドラ/パッケージマネージャー/Linter/Formatter….etc　デファクトっぽいものがたくさんある。何を選んで良いのかわからない。広大なエコシステム 1. バックエンド TS特有の難しさホスティングするサービスは? ・Container Base ・EKS/ECS… ・Serverless Function ・Lambda… Cloud Providerは？・AWS/Google Cloud…etc ・SDK経由?Integrationは必要？ Honoなら.... ・Adapterで実行環境の差異を吸収し、Mountで様々なフレームワークと統合が可能

Slide 20

Slide 20 text

20 他言語出身者がバックエンドTSを始める上での大きな参入障壁ランタイム/バンドラ/パッケージマネージャー/Linter/Formatter….etc　デファクトっぽいものがたくさんある。何を選んで良いのかわからない。広大なエコシステム 1. バックエンド TS特有の難しさホスティングするサービスは? ・Container Base ・EKS/ECS… ・Serverless Function ・Lambda… Cloud Providerは？・AWS/Google Cloud…etc ・SDK経由?Integrationは必要？開発者体験を優先したい？・特殊な実装WebSocketやSSE の実装を楽したい・OpenAPIやtRPCを使ってスキーマ駆動の開発がしたい Honoなら.... ・ミドルウェアが充実(一般的な Web開発で必要なものは大体ある) ・Helperを使用してStreamや WebSocketを扱える

Slide 21

Slide 21 text

21 Honoの構成要素 1. バックエンドTS特有の難しさ Middeware [Built in] ・CORS ・Authentication ・Cache [Third Party] ・Zod OpenAPI ・GraphQL Server ・OAuth Providers Adapter ・node ・bun ・deno ・workerd ・edge-light ・fastly ・env Helper ・JWT ・Streaming ・WebSocket ・html ・SSG ・Testing

Slide 22

Slide 22 text

22 よくありそうなWebアプリケーションの構成 Honoとバックエンドの実装パターン 2. HonoとTypeScriptバックエンド開発

Slide 23

Slide 23 text

23 BFFでHonoを使う Honoとバックエンドの実装パターン1: BFF 2. HonoとTypeScriptバックエンド開発

Slide 24

Slide 24 text

24 昨今のBFF: Next.js(Pages RouterのAPI Routes/ AppRouterのRSC)/GraphQL Server…etc Honoとバックエンドの実装パターン1: BFF 2. HonoとTypeScriptバックエンド開発

Slide 25

Slide 25 text

25 Next.jsにはAPI RoutesやAppRouterのRSC等のBFF相当の機能を実装できる(略) HonoとBFFの例: Next.js×Hono 2. HonoとTypeScriptバックエンド開発

Slide 26

Slide 26 text

26 Next.jsにはAPI RoutesやAppRouterのRSC等のBFF相当の機能を実装できる(略) VercelのAdapterでHonoとAPI Routeを統合しBFFを開発可能 HonoとBFFの例: Next.js×Hono 2. HonoとTypeScriptバックエンド開発

Slide 27

Slide 27 text

27 Next.jsにはAPI RoutesやAppRouterのRSC等のBFF相当の機能を実装できる(略) VercelのAdapterでHonoとAPI Routeを統合しBFFを開発可能 HonoとBFFの例: Next.js×Hono 2. HonoとTypeScriptバックエンド開発 Pages Router ・pages/api/[[...route]].ts

Slide 28

Slide 28 text

28 Next.jsにはAPI RoutesやAppRouterのRSC等のBFF相当の機能を実装できる(略) VercelのAdapterでHonoとAPI Routeを統合しBFFを開発可能 HonoとBFFの例: Next.js×Hono 2. HonoとTypeScriptバックエンド開発 Pages Router ・pages/api/[[...route]].ts AppRouter ・app/api/[[...route]]/route.ts

Slide 29

Slide 29 text

29 バックエンドサーバーでHonoを使う Honoとバックエンドの実装パターン 2. HonoとTypeScriptバックエンド開発

Slide 30

Slide 30 text

30 1.マイクロサービス間の1つのバックエンドサービスとしてのAPI(異なる言語のサーバーから利用される) ・Zod OpenAPIベースのREST API 2.クライアント(Browser)、サーバー間でのAPI ・素のHonoだけでREST API ・Zod OpenAPIベースのREST API ・Hono RPC Honoとバックエンドの実装パターン 2. HonoとTypeScriptバックエンド開発

Slide 31

Slide 31 text

31 1.マイクロサービス間の1つのバックエンドサービスとしてのAPI(異なる言語のサーバーから利用される) ・Zod OpenAPIベースのREST API 2.クライアント(Browser)、サーバー間でのAPI ・素のHonoだけでREST API ・Zod OpenAPIベースのREST API ・Hono RPC Honoとバックエンドの実装パターン 2. HonoとTypeScriptバックエンド開発

Slide 32

Slide 32 text

32 Third Party Middlewareの@hono/zod-openapi+@hono/swagger-uiでZod OpenAPIベースのスキーマでRequestのValidationからSwagger UIまで自動生成 Zod OpenAPIベースのREST API 2. HonoとTypeScriptバックエンド開発

Slide 33

Slide 33 text

33 Third Party Middlewareの@hono/zod-openapi+@hono/swagger-uiでZod OpenAPIベースのスキーマでRequestのValidationからSwagger UIまで自動生成 Zod OpenAPIベースのREST API 2. HonoとTypeScriptバックエンド開発 ZodベースでRequest/Response のSchemaを定義

Slide 34

Slide 34 text

34 Third Party Middlewareの@hono/zod-openapi+@hono/swagger-uiでZod OpenAPIベースのスキーマでRequestのValidationからSwagger UIまで自動生成 Zod OpenAPIベースのREST API 2. HonoとTypeScriptバックエンド開発 OpenAPIHonoのインスタンスを作成し、routeに紐づく処理を実装

Slide 35

Slide 35 text

35 Third Party Middlewareの@hono/zod-openapi+@hono/swagger-uiでZod OpenAPIベースのスキーマでRequestのValidationからSwagger UIまで自動生成 Zod OpenAPIベースのREST API 2. HonoとTypeScriptバックエンド開発 Routeの定義からjsonを作成し、 jsonを元にSwaggerUIを生成

Slide 36

Slide 36 text

36 いわゆるtRPC相当のことができる機能普通のREST APIを書き、Routeの型をhono/clientに渡すことで、型補完の恩恵を受けることができる、もちろんZod OpenAPIのREST APIとも併用可能 Hono RPC 2. HonoとTypeScriptバックエンド開発

Slide 37

Slide 37 text

37 いわゆるtRPC相当のことができる機能普通のREST APIを書き、Routeの型をhono/clientに渡すことで、型補完の恩恵を受けることができる、もちろんZod OpenAPIのREST APIとも併用可能 Hono RPC 2. HonoとTypeScriptバックエンド開発 hcをベースにAPIリクエストやレスポンスを型安全に扱える。 built inの機能なので内部はfetch のラッパー。どこでも動く。

Slide 38

Slide 38 text

38 サービスを効率よく開発して終わり...ではない。ユーザーに使用してもらい改善のサイクルを回せるようになってからが本番運用で気を付けること 3. 運用について

Slide 39

Slide 39 text

39 サービスを効率よく開発して終わり...ではない。ユーザーに使用してもらい改善のサイクルを回せるようになってからが本番運用では何を気を付ける？🤔 運用で気を付けること 3. 運用について

Slide 40

Slide 40 text

40 一般的にサービスが機能するために開発者が持続的にSLI/SLOに沿った監視を行い、サービスの健全性を保証できている状態にすることが理想運用で気を付けること 3. 運用について SRE サイトリライアビリティエンジニアリング図III -1 サービスの信頼性の階層  

Slide 41

Slide 41 text

41 一般的にサービスが機能するために開発者が持続的にSLI/SLOに沿った監視を行い、サービスの健全性を保証できている状態にすることが理想運用で気を付けること 3. 運用について SRE サイトリライアビリティエンジニアリング図III -1 サービスの信頼性の階層  

Slide 42

Slide 42 text

42 指標となるメトリクスやトレースを収集し、システムの状態を把握できるようにモニタリングを行うモニタリング 3. 運用について SRE サイトリライアビリティエンジニアリング図III -1 サービスの信頼性の階層  

Slide 43

Slide 43 text

43 指標となるメトリクスやトレースを収集し、システムの状態を把握できるようにモニタリングを行うモニタリング 3. 運用について SRE サイトリライアビリティエンジニアリング図III -1 サービスの信頼性の階層   何の指標を集める？・APIごとのリクエスト数・CPU/Memory使用率・API ごとのエラー率

Slide 44

Slide 44 text

44 指標となるメトリクスやトレースを収集し、システムの状態を把握できるようにモニタリングを行うモニタリング 3. 運用について SRE サイトリライアビリティエンジニアリング図III -1 サービスの信頼性の階層   何の指標を集める？・APIごとのリクエスト数・CPU/Memory使用率・API ごとのエラー率使用する監視ツールは？・DatadogやNewRelicの監視 Saas ・各クラウドプロバイダーの監視ツール

Slide 45

Slide 45 text

45 指標となるメトリクスやトレースを収集し、システムの状態を把握できるようにモニタリングを行うモニタリング 3. 運用について SRE サイトリライアビリティエンジニアリング図III -1 サービスの信頼性の階層   何の指標を集める？・APIごとのリクエスト数・CPU/Memory使用率・API ごとのエラー率使用する監視ツールは？・DatadogやNewRelicの監視 Saas ・各クラウドプロバイダーの監視ツールアプリケーションの改修は必要？・エラースキーマやハンドリングは適切か・構造化ログはとっているか・トレースやプロファイリングをしているか

Slide 46

Slide 46 text

46 指標となるメトリクスやトレースを収集し、システムの状態を把握できるようにモニタリングを行うモニタリング 3. 運用について SRE サイトリライアビリティエンジニアリング図III -1 サービスの信頼性の階層   何の指標を集める？・APIごとのリクエスト数・CPU/Memory使用率・API ごとのエラー率使用する監視ツールは？・DatadogやNewRelicの監視 Saas ・各クラウドプロバイダーの監視ツールアプリケーションの改修は必要？・エラースキーマやハンドリングは適切か・構造化ログはとっているか・トレースやプロファイリングをしているか Hono×TypeScriptでどうする？

Slide 47

Slide 47 text

47 Honoにはエラーハンドリングの仕組みが提供されているエラースキーマとエラーハンドリング 3. 運用について

Slide 48

Slide 48 text

48 Honoにはエラーハンドリングの仕組みが提供されているエラースキーマとエラーハンドリング 3. 運用についてトップレベルのonErrorメソッドでエラーをキャッチできる

Slide 49

Slide 49 text

49 Honoにはエラーハンドリングの仕組みが提供されているエラースキーマとエラーハンドリング 3. 運用について認証時のエラーなどのHTTPステータスコードを指定してエラーをスローする

Slide 50

Slide 50 text

50 HonoではContextがリクエスト単位で生成されるオブジェクトになる。 LoggerやRequestID等リクエストごと一意に扱いたい値はContextで伝搬させる。構造化ロギング 3. 運用について

Slide 51

Slide 51 text

51 HonoではContextがリクエスト単位で生成されるオブジェクトになる。 LoggerやRequestID等リクエストごと一意に扱いたい値はContextで伝搬させる。構造化ロギング 3. 運用について ContextにLoggerをセット

Slide 52

Slide 52 text

52 HonoではContextがリクエスト単位で生成されるオブジェクトになる。 LoggerやRequestID等リクエストごと一意に扱いたい値はContextで伝搬させる。構造化ロギング 3. 運用について RequestId Middlewareで ContextにRequestIDをセット

Slide 53

Slide 53 text

53 HonoではContextがリクエスト単位で生成されるオブジェクトになる。 LoggerやRequestID等リクエストごと一意に扱いたい値はContextで伝搬させる。構造化ロギング 3. 運用について ContextStorage Middlewareでグローバルに扱えるようにする (AsyncLocalStorage)

Slide 54

Slide 54 text

54 HonoではContextがリクエスト単位で生成されるオブジェクトになる。 LoggerやRequestID等リクエストごと一意に扱いたい値はContextで伝搬させる。構造化ロギング 3. 運用について Contextは型付けして、 Injection 対象を安全に扱う

Slide 55

Slide 55 text

55 今までは指標となるメトリクスやトレースの取得のためのInterfaceは各監視ベンダーの実装に依存していた。メトリクス・トレース 3. 運用について

Slide 56

Slide 56 text

56 今までは指標となるメトリクスやトレースの取得のためのInterfaceは各監視ベンダーの実装に依存していた。 →昨今ではベンダーフリーな実装を行うためにOTLPベースのテレメトリデータを取得できるOpenTelemetryが主流になっているメトリクス・トレース 3. 運用について

Slide 57

Slide 57 text

57 ロガー同様Context経由でTracerを伝搬させる Hono×OpenTelemetry 3. 運用について

Slide 58

Slide 58 text

58 ロガー同様Context経由でTracerを伝搬させる Hono×OpenTelemetry 3. 運用について Context内に保持するオブジェクトに型付け

Slide 59

Slide 59 text

59 ロガー同様Context経由でTracerを伝搬させる Hono×OpenTelemetry 3. 運用について Contextから型安全にオブジェクトを取り出し

Slide 60

Slide 60 text

60 ロガー同様Context経由でTracerを伝搬させる Hono×OpenTelemetry 3. 運用についてビジネスロジックに計装をする

Slide 61

Slide 61 text

61 AgentやIntegrationを活用して監視Saasと連携し、アプリケーションに計装を行うことで、システムの内部を可視化できる監視SaaSでモニタリングする 3. 運用について

Slide 62

Slide 62 text

62 Hono×TypeScriptで最高の開発者体験を得よう！まとめあらゆる環境に対応する・Node ・Bun ・Deno 型安全に開発する・RPC Mode ・Zod/OpenAPI Context経由で計装する・Binding ・ContextStorage