vite hono cloudflareのデプロイメモ
c3
pnpm create cloudflare
framework react
現代でreact-scripts(create react app)使ってるの？
単にビルドした結果を./build等に置いて、
$ wrangler pages deploy ./build
してるだけだった
workersというかserver(edge)サイドも一緒にデプロイするのに楽な方法を知りたい
SPAをするということはstaticなファイル以外は任意パス*を指定のindex.htmlでレスポンスを返す必要がある
なので、Hono上でroutingをやる必要がある
たぶん、Pagesに「任意pathをindex.htmlに流す」をやるのは無い
いやそんなことはないか？
Honoからpages内のデプロイしたファイルを参照する方法は謎
honoのserveStaticでなんかやればよろしい？
別の手段として、honoのjsxで書いてしまうという手がある こっちの方が手軽
code:ts
/** @jsxImportSource hono/jsx */
app.get('/', (c) => {
return c.html(
<html>
<head>
{import.meta.env.PROD ? (
// ビルド後のclientのエントリポイントを指す
<script type='module' src='/static/client.js'></script>
) : (
// 開発時なのでそのまま指す
<script type='module' src='/src/client.ts'></script>
)}
</head>
<body>
<h1>Hello</h1>
</body>
</html>
)
})
hono用のtsconfigとclient用のtsconfigをよしなに設定するのは面倒
これで一応解決しそうなのだが、最新のviteのテンプレだとtsconfigの都合があってうまく行かない
tsconfig.json
code:tsconfig.json
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
},
]
}
tsconfig.app.json (client用)
tsconfig.node.json (vite.config.ts用)
こうなってる
で、これがなぜかmode=clientのビルド時にちゃんと動いて無くて、React is not defined的なエラーが出てる
ここらへんっぽい
ちょうど数日前にテンプレが変わってるな
コレ反映してもダメで、やっぱtsconfig.jsonをreferenceで分けるのやめておくか
普通にtsconfig.jsonにそのままclient用のものを書けば動く