# Hono x microCMSブログ、Cloudflare Workers→Pagesへ置き換え記録 **公開日**: 2024-03-31T16:58:00+09:00Z **カテゴリー**: Diary **タグ**: プログラミング --- このブログはCloudflare Workersで動かしているが、デプロイ先をCloudflare Pagesに置き換えようと思った。 Hono開発者のゆーすけべーさんの記事によると、Workersでのフルスタックアプリケーションのデプロイは現在非推奨となっているらしい。そのため、今後のメンテナンス性や拡張性を考えて、移行作業をする。 [Honoの新しいCloudflare Pagesスターターについて](https://zenn.dev/yusukebe/articles/92fcb0ef03b151) 置き換えでつまづいた点も多く、かなりメモ的に作業記録を追っていく。 ## Viteベースへの置き換え まずはViteで開発サーバーが立ち上がる設定をする。 開発中のプロジェクトのnode_modulesを一旦削除し、package.jsonとtsconfig.jsonを以下のようにする。 // package.json { "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "wrangler pages dev dist", "deploy": "$npm_execpath run build && wrangler pages deploy dist" }, "dependencies": { "hono": "^4.1.5" }, "devDependencies": { "@cloudflare/workers-types": "^4.20240208.0", "@hono/vite-cloudflare-pages": "^0.2.4", "@hono/vite-dev-server": "^0.9.0", "vite": "^5.0.12", "wrangler": "^3.32.0" } } // tsconfig.json { "compilerOptions": { "target": "ESNext", "module": "ESNext", "moduleResolution": "Bundler", "strict": true, "lib": [ "ESNext" ], "types": [ "@cloudflare/workers-types", "vite/client" ], "jsx": "react-jsx", "jsxImportSource": "hono/jsx" }, }yarn installする。 yarn install開発に必要なライブラリを別途installする。 自分の場合はmicrocms-js-sdkとdayjsを使っている。 yarn add microcms-js-sdk dayjsルートディレクトリにvite.config.tsを作成する。 // vite.config.ts import build from '@hono/vite-cloudflare-pages' import devServer from '@hono/vite-dev-server' import adapter from '@hono/vite-dev-server/cloudflare' import { defineConfig } from 'vite' export default defineConfig({ plugins: [ build(), devServer({ adapter, entry: 'src/index.tsx' }) ] })この時点でyarn devをしてhttp://localhost:5173/にアクセスするとエラーになる。 require is not definedどうもmicrocms-js-sdkにasync-retryというpackageが使用されており、その中でViteで動かせないrequire文が利用されているのが原因っぽい。 Xでつぶやいているとゆーすけべーさんが解決策を教えてくれた。感謝です。 Hono microCMSブログをviteに移行したいんだけど、microcms-js-sdkをviteで動かすとrequire is not definedが起きる…？ — QLITRE (@kuri_tter) [March 30, 2024](https://twitter.com/kuri_tter/status/1774005882680143970?ref_src=twsrc%5Etfw) ![](https://images.microcms-assets.io/assets/c91d91814d4c435aac6eccfc4f87a846/96ab4aff3b984cdeaae0be3fb4206575/image.png) 提案されたissueの通りにvite.config.tsを以下のように修正する。 import build from '@hono/vite-cloudflare-pages' import devServer from '@hono/vite-dev-server' import adapter from '@hono/vite-dev-server/cloudflare' import { defineConfig } from 'vite' export default defineConfig({ ssr:{ external:['microcms-js-sdk','dayjs'] }, plugins: [ build(), devServer({ adapter, entry: 'src/index.tsx' }) ] }) 起動させると今度は違うエラーが出る。 Cannot find module '__STATIC_CONTENT_MANIFEST'Workersで静的ファイルを扱うにあたり以下のように__STATIC_CONTENT_MANIFESTを利用していた。 import { Hono } from 'hono' import { serveStatic } from 'hono/cloudflare-workers' import manifest from '__STATIC_CONTENT_MANIFEST' type Bindings = { API_KEY: string SERVICE_DOMAIN: string } const app = new Hono<{ Bindings: Bindings }>() app.use('/static/*', serveStatic({ root: './', manifest })) app.use('/sitemap.xml', serveStatic({ path: './sitemap.xml', manifest })) app.use('/favicon.ico', serveStatic({ path: './favicon.ico', manifest })) app.use('/ads.txt', serveStatic({ path: './ads.txt', manifest })) ...これがvite環境だと動かないらしく、以下のように設定を変更する。 ※Workersの際はassetsディレクトリに静的ファイルを置いていたが、publicディレクトリに移行する。 import { Hono } from 'hono' import { serveStatic } from 'hono/cloudflare-pages' // 変更 type Bindings = { API_KEY: string SERVICE_DOMAIN: string } const app = new Hono<{ Bindings: Bindings }>() const limit = BLOG_PER_PAGE app.use('/static/*', serveStatic()) app.use('/sitemap.xml', serveStatic()) app.use('/favicon.ico', serveStatic()) app.use('/ads.txt', serveStatic()) ここまででページが立ち上がることを確認する。 ![](https://images.microcms-assets.io/assets/c91d91814d4c435aac6eccfc4f87a846/af07978adcdc49f882b513f3f52c5573/image.png) ## ローカルビルドしてみる yarn buildする。 yarn build >>> yarn run v1.22.19 warning package.json: No license field $ vite build vite v5.2.7 building SSR bundle for production... ✓ 56 modules transformed. dist/_worker.js 47.76 kB ✓ built in 495ms Done in 1.70s.dist配下にビルドされていることを確認する。 ![](https://images.microcms-assets.io/assets/c91d91814d4c435aac6eccfc4f87a846/03990f2c3bf54fa58f342e95b8425a60/image.png) しかし小さくて驚く。47.76KBって…。 yarn previewして立ち上がっていることを確認したら終了。 ## デプロイ これもyarn deployするだけだが、windowsだとデフォルトで用意されているデプロイコマンドが失敗する。 warning package.json: No license field $ $npm_execpath run build && wrangler pages deploy dist '$npm_execpath' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.以下のように編集する。 { ... "scripts": { "deploy": "yarn build && wrangler pages deploy dist" }, ... }そうするとdeployが走る。 No project selected. Would you like to create one or use an existing project? > Create a new project Use an existing projectとりあえずCreate a new projectを選択。 Cloudflareのダッシュボードに行き、サイトURLを確認すると、500 Internal Server Errorが起きている。 ![](https://images.microcms-assets.io/assets/c91d91814d4c435aac6eccfc4f87a846/260538e544094c5b8b106997085467af/image.png) Workersの際はデプロイ時にwrangler.tomlに設定した環境変数も併せてデプロイしてくれるが、Pagesの方は自分で設定する必要があるらしい。 ダッシュボードのSettingsタブより環境変数を追加できる。 ![](https://images.microcms-assets.io/assets/c91d91814d4c435aac6eccfc4f87a846/26b3dda5e07e4f19a472739eea1afce6/image.png) 動作に必要な環境変数を設定してyarn deployし直す。 サイトが動いていることを確認できる。 ## ドメイン設定 Workersに向けているドメインをPagesに向け直す。 一旦サイトを削除してPagesからカスタムドメインを設定し直す。 以下の記事を参考に設定しました。 - [Cloudflare Pagesにカスタムドメインを設定する](https://qiita.com/akitkat/items/8aeaee639ba5f2bda141) - [Xserverドメインで取得した独自ドメインをCloudflare Pagesのカスタムドメインに設定する](https://kshida-blog.com/posts/set-my-domain-to-cloudflare-pages) ## ソースコード [https://github.com/qlitre/hono-qlitre-dialy](https://github.com/qlitre/hono-qlitre-dialy) ## おわりに ところどころつまづいたけど無事に移管ができてよかったです。 次回はSSGに挑戦してみようと思います。ではでは。