Event Exhibition with Hono

This is the content presented at the Hono Conference 2024 - Our first step.

https://hono.connpass.com/event/319062/

Links in Slide

## Introduction
- HP: https://napochaan.com
- Twitter: https://x.com/naporin24690
- https://github.com/honojs/hono/graphs/contributors
- https://github.com/napolab/y-durableobjects
- https://x.com/naporin24690/status/1800083836438716769

### StudioGnu
- https://www.studiognu.org/

## Interactive Video System Introduction
- https://www.studiognu.org/works/Polyhedron_Mirror_surface

### Optimization with a reverse proxy
- https://hono.dev/docs/#ultrafast
- https://hono.dev/docs/api/routing#routing-with-hostname
- https://hono.dev/docs/api/routing#routing-with-host-header-value

### (Extra) Optimizating with Cloudflare Images
- https://next-demo.napochaan.dev/

Transcript

1. # Event Exhibition with Hono Hono Conference 2024 - Our first step 6/22 naporitan
2. ## Take Home Message • Using Cloudflare at the exhibition event was a success, thanks to Hono • Hono is highly recommended for real events like these • Remember Studio GNU – we are doing interesting things!
3. ## ToC 1. Introduction 2. Interactive Video System Introduction 3. Why Hono and Cloudflare? 4. Benefits of Choosing Hono 5. Secure and Type-Safe API Communication 6. Integrate a GPU machine into the system 7. Partial Optimization Using a Reverse Proxy 8. Conclusions
4. ## Introduction • Name: naporitan ◦ HP: https://napochaan.com ◦ Twitter: https://x.com/naporin24690 • Contribution: Occasionally Contributor to honojs ◦ https://github.com/honojs/hono/graphs/contributors • Focus: Enhancing frontend capabilities using Hono and Cloudflare ◦ https://github.com/napolab/y-durableobjects ◦ https://x.com/naporin24690/status/1800083836438716769
5. ### StudioGnu • StudioGnu is a conceptual collective led by Vocaloid producer Sheeno Mirin (椎乃味醂). • In addition to musicians, the collective includes engineers like myself, all working together to expand the possibilities of music through various activities. • As part of these efforts, we have exhibited a media art piece titled "Polyhedron, Mirror Surface" at the Osaka Kansai International Art Festival.
6. ### StudioGnu • StudioGnu is a conceptual collective led by Vocaloid producer Sheeno Mirin (椎乃味醂). • In addition to musicians, the collective includes engineers like myself, all working together to expand the possibilities of music through various activities. • As part of these efforts, we have exhibited a media art piece titled "Polyhedron, Mirror Surface" at the Osaka Kansai International Art Festival.
7. ## Interactive Video System Introduction Media Art "Polyhedron, Mirror surface"
8. System composed of Hono and Cloudflare
10. ## Why Hono and Cloudflare? • To minimize system costs ◦ Cloudflare provides cost-effective operations • Simple access restrictions for GPU servers ◦ Possible with Cloudflare Tunnel and Cloudflare Access • Need for database and storage ◦ Utilizes Cloudflare's D1 and R2
11. Everything you need with Cloudflare!
12. Using Cloudflare Workers? Hono is the way to go!
13. ## Benefits of Choosing Hono • Rich Middleware Options • Strong Typing Support • Ease of Adding Features Adaptively
14. ### Rich Middleware Options
15. ### Strong Typing Support Hono RPC
16. ### Ease of Adding Features Adaptively Like Dependency Injection
17. How were Hono and Cloudflare used?
19. ## Secure and Type-Safe API Communication • Short-term development • Uncertain requirements • Need for continuous operation with minimized errors
20. ### Using Hono RPC Use @hono/zod-validator
21. ### Using Hono RPC Use Hono RPC with Service Binding
23. ## Integrate a GPU machine into the system • Enable as an image generation API • Protect URLs to restrict users • Sync movie & image to storage
24. ### Implementing Secure Connections • Enable as an image generation API ◦ Solved with Cloudflare Tunnel • Protect URLs to restrict users ◦ Cloudflare Access is available ▪ Use Service Auth to access without authentication from Worker
25. ### Sync movie & image to storage • Directly upload generated content using rclone • Cloud storage accessible from Worker ◦ Used Cloudflare R2
27. ## Partial Optimization Using a Reverse Proxy • Generated images do not display in previews ◦ Due to large image sizes • Compress images without URL changes ◦ Fixes and deployments at night to avoid daytime disruption
28. Reverse proxy with Hono and Cloudflare Workers Routes!
29. ### Optimization with a reverse proxy • Set up a reverse proxy to any URL with Cloudflare Workers Routes • Create a reverse proxy with Hono ◦ Hono is fast ▪ Ultrafast ◦ Use getPath for cross-hostname routing ▪ Routing with hostname ▪ Routing with host Header value
30. ### Optimizing Image Delivery 1. Use getPath to add hostname to the route 2. Set up middleware for image transformation options and caching 3. Transform images using wasm-image-optimization
31. #### Use `getPath` to add hostname to the route Hono with getPath
32. #### Set up middleware Cache, QueryParams Validator settings
33. #### Transform images Writing an image conversion handler
34. ### Changes after image optimization Before after Images are now displayed.
35. ### (Extra) Optimizing with Cloudflare Images • Transform Images Now Available ◦ Supports a wide range of transformations ▪ resize, format, blur, and more. • Enables creation of next/image-like components. ◦ Cloudflare Image Transformer
36. ## Conclusions • Cloudflare offers all necessary products to build exhibits
 • Hono integrates and extends Cloudflare products, accelerating development
 • Reverse proxy with Cloudflare Worker Routes and Hono acts as AOP for URLs

37. End