hono serveStatic設定方法メモ、public静的ファイルなど

概要

hono+ workersで、js/css等 静的ファイル読込の追加方法メモです

• 設定方法がよくわからず。苦戦した内容です
• 初期では、ファイル読み込めない
• serveStatic追加すると、指定フォルダ内ファイルが読める

環境

• cloudflare workers
• hono: 3.7.2
• node: 20

関連

• https://hono.dev/getting-started/cloudflare-workers#serve-static-files
• https://blog.chick-p.work/blog/cloudflare-workers-hono-trouble

作成したコード

https://github.com/kuc-arc-f/hono_jsx4

設定方法

• index.tsとかに、下記serveStatic 追加

import { Hono } from 'hono'
import { serveStatic } from 'hono/cloudflare-workers'

• URLパス指定,フォルダ名 の例

app.get('/static/*', serveStatic({ root: './' }))
app.get('/js/*', serveStatic({ root: './' }))

• wrangler.toml

[site]
bucket = "./public"

フォルダ作成

• ./public/static , 作成する

• file add

• tree 参考

$ cd public/
$ tree .
.
├── js
│   ├── csr
│   │   ├── csr1.js
│   │   └── csr2.js
│   ├── tasks
│   │   ├── create.js
│   │   └── index.js
│   └── test
│       ├── create.js
│       └── delete.js
└── static
    └── bb.js

設定の説明

• URL-path= /static/ の場合
• フォルダの、　./public/static/* が開けるようになる
• URL-path= https://hoge.com/js/test/create.js を、使用したい場合
• フォルダの、　./public/js/test/create.js を、設置する
• 設定した、wrangler.toml　の、bucket のフォルダ作成しない場合、サーバー起動できない状況になる