Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Event Exhibition with Hono

Event Exhibition with Hono

naporitan

June 22, 2024
Tweet

Other Decks in Programming

Transcript

  1. ## 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!
  2. ## 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
  3. ## 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
  4. ### 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.
  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. ## 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
  7. ## Benefits of Choosing Hono • Rich Middleware Options •

    Strong Typing Support • Ease of Adding Features Adaptively
  8. ## Secure and Type-Safe API Communication • Short-term development •

    Uncertain requirements • Need for continuous operation with minimized errors
  9. ## Integrate a GPU machine into the system • Enable

    as an image generation API • Protect URLs to restrict users • Sync movie & image to storage
  10. ### 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
  11. ### Sync movie & image to storage • Directly upload

    generated content using rclone • Cloud storage accessible from Worker ◦ Used Cloudflare R2
  12. ## 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
  13. ### 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
  14. ### 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
  15. ### (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
  16. ## 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

  17. End