近年、エッジコンピューティング(ユーザーの近くのサーバーでプログラムを動かす技術)の進化により、バックエンド開発の常識が変わりつつあります。
前回の記事でバックエンド開発によく使うPython FastAPIとTypescript Honoの比較をしました。
今回は、世界中に展開するCloudflareのインフラ上で動く「Cloudflare Workers」と、前回比較した、今最も注目されている軽量・高速なWebフレームワーク「Hono(ホノ)」を組み合わせて、爆速でAPIを構築・デプロイする手順をわかりやすく解説します。
Cloudflare Workersとは?
Cloudflare Workersは、Cloudflareが提供するサーバーレスのコード実行環境(エッジランタイム)です。
従来のAWS Lambdaなどのサーバーレス環境と異なり、V8エンジン(Google Chromeなどで使われているJavaScript実行エンジン)をベースに構築されているため、「コールドスタート(起動時の遅延)がほぼゼロ」という驚異的な軽さを誇ります。
圧倒的に太っ腹な無料枠
個人開発やプログラミングの学習、ちょっとした副業のツール開発であれば、無料枠(Freeプラン)の範囲内で十分に運用可能です。
| 項目 | 無料枠の制限 |
| リクエスト数 | 1日あたり 100,000回(毎日UTC 00:00にリセット) |
| CPU実行時間 | 1リクエストあたり最大 10ms |
| データ転送量(エグレス) | 完全無料(他社クラウドで課金されがちな転送量がタダ) |
プロジェクトの作成
それでは、さっそく環境を構築していきましょう。まずはターミナルを開き、create-hono コマンドを使ってプロジェクトを作成します。
プロジェクトの初期化
npm create hono@latest my-hono-app<br>※コマンドを実行すると以下のような「どのテンプレートを使うか」聞かれるので、十字キーで cloudflare-workers を選択してEnterを押してください。
create-hono version 0.19.4
✔ Using target directory … my-hono-app
? Which template do you want to use?
❯ aws-lambda
bun
cloudflare-workers
cloudflare-workers+vite
deno
fastly
lambda-edge
(Use arrow keys to reveal more choices)プロジェクトの作成が完了したら、ディレクトリに移動して依存パッケージをインストールします。
cd my-hono-app
npm install📂 生成されるファイル、フォルダの役割
生成されたそれぞれのファイルやフォルダが「どんな役割を持っているのか」を整理しました。
node_modules
- 役割: インストールした外部パッケージ(ライブラリ)の実体が格納されるフォルダ。
- 解説: npm install を実行したときに、HonoやCloudflareのテストツールなどがこの中に自動でダウンロードされます。容量が大きく、自動生成されるため、Gitで管理(送信)する必要はありません。
src
- 役割: プログラムの「本体(ソースコード)」を入れる最重要フォルダ。
- 解説: この中に index.
tsというファイルが入っており、そこにAPIのルーティング(「/にアクセスされたらこの文字を返す」といった処理)を書いていきます。開発時は基本的にこの src フォルダの中身を編集します。
wrangler.jsonc(または wrangler.toml)
- 役割: Cloudflare Workers の設定ファイル。
- 解説: 開発元であるCloudflareのツール(Wrangler)が読み込む設定ファイルです。プロジェクト名、本番環境の各種設定、使用するデータベース(D1やKVなど)の紐付けなどをここに記述します。末尾の jsonc は「コメントが書けるJSONフォーマット」という意味です。
package.json
- 役割: プロジェクトの「説明書」兼「コマンド集」。
- 解説: プロジェクトの名前やバージョン、使っているパッケージのリスト(Honoなど)が記録されています。また、npm run dev(ローカル起動)や npm run deploy(デプロイ)といったショートカットコマンドもここに定義されています。
package-lock.json
- 役割: パッケージのバージョンを完全に固定するための記録ファイル。
- 解説: npm install したときに自動で生成・更新されます。「どのライブラリの、どのバージョンをインストールしたか」の正確な詳細マップが入っており、他のPCで再現した際にも全く同じバージョンがインストールされるようにする役割を持っています。直接手動で編集することはありません。
tsconfig.json
- 役割: TypeScriptの設定ファイル。
- 解説: Honoのプロジェクトは最初からTypeScript(JavaScriptをより安全・便利にした言語)で書かれています。このファイルは、TypeScriptのプログラムをJavaScriptに変換(コンパイル)する際の、細かいコンパイラのルールを記述しています。
README.md
- 役割: プロジェクトの説明書(メモ帳)。
- 解説: Markdown(マークダウン)形式で書かれたテキストファイルです。初期状態では、起動方法やデプロイ方法のコマンドが英語で記載されています。自分や他の開発者が後から見て、どう動かすかを思い出すためのメモ書きとして自由に使ってOKです。
.gitignore
- 役割: Git(バージョン管理)に含めないファイルを指定するリスト。
- 解説: 先ほどの node_modules や、公開してはいけない秘密の環境変数ファイル(.env)など、GitHubなどの共有スペースにアップロードしたくないファイル・フォルダのリストが書かれています。
Honoのサンプルコード
プロジェクトが生成されると、src/index.ts に以下のようなシンプルなHonoのコードが自動で用意されます。
import { Hono } from 'hono'
const app = new Hono()
// ルートパスへのGETリクエストに対する処理
app.get('/', (c) => {
return c.text('Hello Cloudflare Workers!')
})
// JSONを返すAPIの例
app.get('/api/user', (c) => {
return c.json({
name: 'hisao',
role: 'engineer',
status: 'active'
})
})
export default appHonoはコードが非常に直感的で、Expressなどのフレームワークに触れたことがある人なら一瞬で理解できるのが魅力です。
ローカル環境での動作確認
Cloudflare Workersの強力な開発ツールである Wrangler(ラングラー) を使用して、ローカル環境でコードの動作を確認します。すでに package.json にスクリプトが用意されているため、以下のコマンドを叩くだけです。
npm run devコマンドを実行すると、ローカルサーバーが立ち上がります。
ブラウザを開き、 http://localhost:8787 にアクセスしてみましょう。画面に「Hello Cloudflare Workers!」と表示されれば成功です!
先ほど追加した http://localhost:8787/api/user にアクセスすれば、きれいなJSONデータが返ってくることも確認できます。
リモート(Cloudflare)へのデプロイ
ローカルでの確認が終わったら、いよいよ世界中のエッジサーバーへデプロイします。こちらもコマンド一発で完了します。
npm run deploy初めてデプロイする場合:
コマンドを実行すると、ブラウザが自動的に開き「Cloudflareへのログイン・認証」を求められます。画面の指示に従ってログインし、アクセスを許可(Authorize)してください。認証が完了すると、ターミナル側で自動的にビルドとデプロイが再開されます。
デプロイが成功すると、ターミナルに以下のような公開URL(エンドポイント)が表示されます。
https://my-hono-app.<あなたのサブドメイン>.workers.dev5. 公開されたAPIへのアクセス確認
最後に、ターミナルに表示されたURLにブラウザやURL指定(curlなど)でアクセスしてみましょう。
- https://my-hono-app.<…>.workers.dev/ ── 「Hello Cloudflare Workers!」
- https://my-hono-app.<…>.workers.dev/api/user ── JSONデータ
世界中どこからアクセスしても、最寄りのCloudflareデータセンターから一瞬でレスポンスが返ってくる、爆速サーバーレスAPIの完成です!
まとめ
Cloudflare Workers と Hono の組み合わせは、開発の手軽さ、実行速度、そして無料枠の広さのどれをとっても現時点で最高の選択肢の一つです。
ぜひ皆さんも、独自のWebツールやAPIを作ってデプロイしてみてください!


コメント