Hono + Cloudflare Workersで爆速APIを爆誕させる！導入から完全無料でCloudにWeb APIを公開するまで徹底解説！

はじめに

記事の目的:

wranglerコマンドでHonoプロジェクトを立ち上げ、最終的にCloudflare Workersにデプロイするまでの全工程を解説すること。

対象読者:

• HonoやCloudflare Workersに興味がある方
• 高速なAPIを簡単にデプロイしたい方
• ローカルでの開発からデプロイまでの一連の流れを知りたい方
• 完全無料で個人開発のスタートを切りたい人

この記事で学ぶこと:

• Honoプロジェクトの初期設定
• 基本的なAPIの作成
• GitとGitHubでのバージョン管理
• Cloudflare Workersへのデプロイ

1. プロジェクトの初期設定

wranglerをインストール

npm install -g wrangler

honoをインストール

npx create-hono@latest

wrangler init でプロジェクト作成

wrangler init <プロジェクト名>

下記質問に答えて進めていきます。

• What would you like to start with?
  • Framework Starterを選択
• Which development framework do you want to use?
  • Honoを選択
• Do you want to use git for version control?
  • Yesを選択

ローカルで動作確認

wrangler dev
あるいは
npm run dev

http://localhost:8787をブラウザで開いて 「Hello Hono!」 が表示されることを確認しましょう。

2. GitHubでのバージョン管理

まずは以下の手順でリポジトリを作成しておきます。

• GitHubにログイン
• 右上の「+」アイコンをクリックし、「New repository」を選択
• リポジトリ名を「sample-api」など、わかりやすい名前に設定
• （任意）「Description」に説明を入力
• 「Public」または「Private」を選択
• 「Add a README file」や「Add .gitignore」はチェックしない
• 「Create repository」をクリック

作成後の画面に表示される以下のコマンドをプロジェクトディレクトリに移動して実行します。

...or push an existing repository from the command line
git remote add origin https://github.com/<YOUR_USERNAME>/<YOUR_REPOSITORY_NAME>.git
git branch -M main
git push -u origin main

今回はsample-apiというリポジトリでGitHubに登録しました。

3.Cloudflare Workersへのデプロイ

Cloudflareアカウントの準備

まずは下記サイトへサクセスしてログインしておきましょう。
Googleアカウントで簡単にログインできます。
https://dash.cloudflare.com/login

Wranglerの認証

下記のコマンドを実行すると認証用URLが表示されますので、Cloudflareへログインしているブラウザで開いて認証画面を表示してください。

npx wrangler login

※認証URLなので部分的に塗りつぶしてます。

認証画面

規定時間内にAllowボタンを押下すれば認証完了です。

Cloudflare Workersへデプロイ

Cloudflareダッシュボードを使っても、GUIベースでGitHubと連携し、数クリックで簡単にデプロイすることも可能ですが、今回はCLIで簡単にデプロイする方法を説明します。

npx wrangler deploy
あるいは
npm run deploy

数秒でデプロイが完了します

Cloudflareダッシュボードから「コンピューティング Workers & Pages」を開くとsample-apiがデプロイされていることが確認できました。

APIのURL（エンドポイント）は独自ドメインを使わない場合、https://<プロジェクト名>.<Cloudflareアカウント名>.workers.devという形式になります。先ほどCLIからデプロイした際に最後から2行目に表示されていたURLです。

ローカルで確認したときと同じく 「Hello Hono!」 が表示されていれば大成功です。

Gitリポジトリへ接続

自動ビルドとデプロイのためにGitリポジトリへ接続しておくことをお勧めします。
Cloudflareダッシュボードから「コンピューティング Workers & Pages」を開き、対象のWorkerを開きます。設定タブへ移動してビルド＞自動ビルドとデプロイのために Worker を Git リポジトリに接続しますのメニューからGitリポジトリへ接続できます。

まとめ

個人開発を始める際に、開発にかかる費用を自腹で負担するのには正直抵抗がありましたが、色々と調べる中でCloudflareのサービス群を利用する方法が最もコスパよく個人開発のスタートが切れると思いました。
個人開発では何を作るかも重要ですが、どう作るかも結構重要なポイントだと思っています。
今回ご紹介したHonoとCloudflare Workersの組み合わせのメリットは高速性、スケーラビリティ、開発のしやすさなどがあげられると思います。
次のステップとしてはD1などの他のCloudflareサービスと連携し、より具体的なサービスを作ることだと思いますので、また別の記事で紹介できればと思います。
最後まで読んでいただきありがとうございました。