Adaptor, Helmet, SSG

Hono Conference 2024 - Our first step でお話しした内容です。
https://hono.connpass.com/event/319062/

Transcript

1. Hono Conference 2024 - Our first step Adaptor, Helmet, SSG 2024-06-22 #honoconf
2. Me Watanabe Yohei(watany) • NTT TechnoCross Corporation • AWS ◦ AWS Assosiate Ambassador 2024 ◦ Japan AWS Top Engineer 2023 ◦ JAWS-UG Tokyo https://jawsug.connpass.com/event/316
3. Latest Developments
4. Contents 1. Adaptor 2. Helmet 3. SSG
5. 1. Adaptor
6. Adaptor 󰢃'hono/adapter' https://hono.dev/docs/helpers/adapter
7. Adaptor 󰢏'github.com/hono/tree/main/src/adapter'
8. Adaptor Contributions • AWS Lambda • Lambda@Edge https://hono.dev/getting-started/
9. Why Contribute？
10. Why Contribute？ I’ｍ AWS CDK User & Contributor • Blog and Talks • Promotion → https://jawsug-cdk.connpass.com/event/317921/
11. Why Contribute？ "NodejsFunctions", you can directly build `.ts` files and deploy them along with AWS Lambda.
12. Why Contribute？ • Wanted a framework compatible with CDK (TypeScript)... • Hono looks great! https://qiita.com/watany/items/72dad3c4953238a16c9c
13. Adaptor - AWS Lambda
14. Adaptor - AWS Lambda Contributions • Events • Response Streaming
15. Adaptor - AWS Lambda(Events)
16. Adaptor - AWS Lambda(Events) v3.10: Supports only API Gateway in the diagram. https://github.com/awslabs/aws-lambda-web-adapter/blob/main/docs/images/lambda-adapter-overview.png
17. Adaptor - AWS Lambda(Events) v4.0 : Almost all HTTP-related services are supported. https://github.com/awslabs/aws-lambda-web-adapter/blob/main/docs/images/lambda-adapter-overview.png
18. Adaptor - AWS Lambda(Events) • This operation (or the opposite) in Request/Response https://github.com/awsdocs/aws-lambda-developer-guide/blob/main/sample-apps/nodejs-apig/event.json https://developer.mozilla.org/en-US/docs/Web/API/Request/Request
19. Adaptor - AWS Lambda(Events) https://x.com/astuyve/status/1791902700210102422
20. Appendix. vs Lambda Web Adapter AWS Lambda has an extension called "Lambda Web Adapter" Ref：Lambda Web Adapter でウェブアプリを (ほぼ) そのままサーバーレス化する https://aws.amazon.com/jp/builders-flash/202301/lambda-web-adapter/
21. Appendix. vs Lambda Web Adapter When using Hono, the built-in adapter is sufficient. • `hono/aws-lambda` ◦ Input Event→Request Obj→Response Obj→Response • Lambda Web Adaptor ◦ Input Event→HTTP Request→Request Obj→ Response Obj→Response ◦ Either way, an adapter for Node.js is needed. Using Lambda Web Adapter • For container operations and considering other frameworks.
22. Adaptor - AWS Lambda (Response Streaming)
23. Adaptor - AWS Lambda(Response Streaming) https://aws.amazon.com/jp/blogs/news/introducing-aws-lambda-response-streaming/
24. Adaptor - AWS Lambda(Response Streaming) https://aws.amazon.com/jp/blogs/news/introducing-aws-lambda-response-streaming/
25. Adaptor - AWS Lambda(Response Streaming) Impressive features • Wrap everything with the decorator `awslambda.streamifyResponse` embedded in Lambda's Node.js runtime. • Requires `NodeJS.WritableStream` for compatibility with Node.js 16 (!). ◦ Hono requires Node.js 18 or higher. It uses WritableStream. • No comprehensive documentation available (?!).
26. Adaptor - AWS Lambda(Response Streaming) Implemented "streamHandle" !! https://hono.dev/getting-started/aws-lambda#lambda-response-streaming
27. Appendix. "streamSSE" was created due to a misunderstanding of the Response Streaming. https://github.com/honojs/hono/pull/150
28. Adaptor - Lambda＠Edge
29. Adaptor - Lambda@Edge 2023/7 An "Impactful" Pull Request https://github.com/honojs/hono/pull/121
30. Adaptor - Lambda@Edge Q1. Why did you create this? A1. The Cloudflare Meet-up was exciting, and I wanted to join the fun. Q2. Why not use Cloudflare Workers? Q3. Is it used in production? https://cfm-cts.connpass.com/
31. Adaptor - Lambda@Edge Q1. Why did you create this? A1. The Cloudflare Meet-up was exciting, and I wanted to join the fun. Q2. Why not use Cloudflare Workers? A2. I'm known as the "AWS person" in my company, so I thought it would be fun to integrate Hono with Lambda@Edge. Q3. Is it used in production? https://cfm-cts.connpass.com/
32. Adaptor - Lambda@Edge Q1. Why did you create this? A1. The Cloudflare Meet-up was exciting, and I wanted to join the fun. Q2. Why not use Cloudflare Workers? A2. I'm known as the "AWS person" in my company, so I thought it would be fun to integrate Hono with Lambda@Edge. Q3. Is it used in production? A3. I implemented it, but due to its simplicity and execution cost, we opted for CloudFront Functions. https://cfm-cts.connpass.com/
33. Appendix. CloudFront Functions Adapter？ No plans to create an adaptor for CloudFront Functions at this time. • The size limit is 10KB. • Runtime environment is ES5.1 + custom extensions. • Execution time, including idle CPU time, is limited to 1 second.
34. Contents 1. Adaptor 2. Helmet 3. SSG
35. ２．Helmet
36. Sorry, time's up😂 Read this. https://zenn.dev/watany/articles/c25bb4fef78c3d
37. Contents 1. Adaptor 2. Helmet 3. SSG
38. 3．SSG
39. Hono/SSG was Released in v4. https://zenn.dev/yusukebe/articles/b20025ebda310a
40. Motivation • If Hono routes could be saved as files … ◦ Cloudflare Pages, GitHub Pages, or S3 ◦ Hono has built-in JSX and CSS. • Strange features suddenly created during the New Year's holidays. https://x.com/yusukebe/status/1742850872651206724
41. What Hono/SSG is doing 1. Passing a Hono instance to the helper function (toSSG) https://hono.dev/docs/helpers/ssg
42. What Hono/SSG is doing 2. Analyze the routes registered in the Hono instance • Remove middleware • Remove routes with methods other than ”GET” and ”ALL” • Use the ”app.fetch” and ”app.request” APIs to retrieve response data directed at localhost.
43. What Hono/SSG is doing 3. Writing the response Use the "fs" passed to toSSG for writing. • Hono is a multi-platform framework. • Custom “fs” implementations for Deno and Bun are also provided. https://hono.dev/docs/helpers/ssg
44. What Hono/SSG is doing That's not enough???? We continuously apply patches at a bi-daily pace... https://github.com/honojs/hono/graphs/contributors?from=2023-12-29&to=2024-02-09&type=c
45. Sorry🙇 • Dependent on Node.js APIs (fs/promises, Buffer.from…) • File extension generation breaks • Cannot output binaries • etc...
46. What Hono/SSG is doing As of version 4.4, with everyone's support, it has significantly improved. • Pipeline from route loading to writing • Support for Vite Plugin • Custom Hooks • Middleware like "generateStaticPaths" https://hono.dev/docs/helpers/ssg
47. Conclusion • I often develop features for use with AWS. • However, I believe that these features should benefit users beyond just AWS. • Developing such versatile features is challenging, but there's nothing more enjoyable.
48. Contents 1. Adaptor 2. Helmet 3. SSG 4. And More...
49. 4. And More ~2024 Roadmap~
50. 4. Load map? • GA for hono/ssg ◦ Finalize several specifications ◦ Create plugin functionality • 3rd Party Middleware `@hono/aws`
51. @hono/aws
52. @hono/aws/s3 S3 + SSG
53. @hono/aws/lambda Catch up with the "Lambda Web Adaptor" https://github.com/awslabs/aws-lambda-web-adapter
54. See you again 👋