HonoをCloudfrareにデプロイしてみる

Honoを初めて触りました。設定が少なく、プロジェクトの作成からデプロイまでのステップも少なく、ビルドまでが楽でした。これだけで、全世界のCDNエッジにデプロイされるのは素晴らしいです😭

今回は、初めてのHonoのアプリをデプロイするまでを書いていきます。

手順

プロジェクトの作成

以下のコマンドでテンプレートを作成してみます。

npm create hono@latest

テンプレートが色々と選べるようですが、ひとまずcloudflare-pagesにしてみます。

以下のようなテンプレートが作成されました。

viteをビルドで使用するようです。wranglerはcloudflareのCLIライブラリです。プレビューやデプロイを行うときに使うようです。
package.jsonのdeployは$npm_execpathはnpmに書き換えておきます。

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.0.5"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20240208.0",
    "@hono/vite-cloudflare-pages": "^0.2.4",
    "@hono/vite-dev-server": "^0.5.0",
    "vite": "^5.0.12",
    "wrangler": "^3.25.0"
  }
}

プレビューする

以下のコマンドでビルドします。

npm run build

以下のコマンドでプレビューをします。

npm run preview

デプロイ

以下のコマンドでデプロイします。

npm run deploy

新しくプロジェクトを作るか選択をするかを選びます。

選択すれば、デプロイが実行され、完了します😊

感想

Honoのデプロイができました。Cloudflareには他にも便利なサービスがあるようなので、他のサービスと一緒に使う方法を試していきたいと思います。