🔥

Hono✖️ClaudFlareWorkerの環境構築🔥

2025/03/18に公開

 はじめにフルスタック開発を勉強する一環として、最近流行りのHonoに手を出してみました！

この記事では、HonoとClaudFlareWorkerを使った環境構築の手順をまとめておきます

 HonoとはHonoは、ClaudFlareWorker/Pagesをはじめ、様々な環境で利用可能なJavaScript/TypeScrptのバックエンドフレームワークです
詳しいことは公式ドキュメントをご参照ください

https://hono.dev/

 プロジェクトの作成それでは早速、環境構築していきましょう🔥
Honoは、npmコマンドからさまざまなテンプレートを使用できます。今回は、前述の通りCloudFlareWorlerを選択しました。
npm create hono@latest

> npx
> create-hono

create-hono version 0.15.3
? Target directory backend
? Which template do you want to use? cloudflare-workers
? Do you want to install project dependencies? yes
? Which package manager do you want to use? npm
✔ Cloning the template
✔ Installing project dependencies
🎉 Copied project files
Get started with: cd backend
今回の場合だと、backendという名前で作っています。
デプロイする際に、Wranglerが必要になるので、ログインしておきましょう
npx wrangler login

 ⛅️ wrangler 3.114.2 (update available 4.1.0)
-------------------------------------------------------

▲ [WARNING] The version of Wrangler you are using is now out-of-date.

  Please update to the latest version to prevent critical errors.
  Run `npm install --save-dev wrangler@4` to update to the latest version.
  After installation, run Wrangler with `npx wrangler`.


Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/...
Successfully logged in.
どうやら、バージョンをアップデートしてくれと言われてしまったようです。書かれている通りに、以下のコマンドを実行しました
npm install --save-dev wrangler@latest
これで問題なさそうです。ローカルサーバーを立ち上げてみましょう
npm run dev
localhost:8787が立ち上がって、ブラウザ上で"Hello Hono!"という文字が確認できれば成功です！
これで環境構築は完成です！！🔥

 おわりに今回は、Hono✖️CloudFlareWorkerの環境構築をやってみました。アップデートしろと言われた時はいろいろミスって手間取ってしまったので、この記事が誰かを救えたなら何より嬉しいです
これからAPI作成について学んでいくので、もしまた機会があれば続きをあげようと思います🍵

はじめに

Honoとは

プロジェクトの作成

おわりに

Discussion