honoが気になっていたので、Cloudflare Workerからはじめます

先週は、「フロントエンドの知識地図」の後半を読みました。今週は、最近気になっているhonoを、試してみようと思います。

honoを試したい

honoを使ってみたという話をちょいちょい目にしていて、「hono」ってどんなものなんだろう？手軽っていうけど、どれくらい手軽なんだろう？と気になっていました。

ところで、honoって何？

Webサービスを構築するためのフレームワークなのかな？と予想したものの、何もわからないので、そこから調べます。検索してみると、honoの開発者yusukebeさんのZennの記事「Hono[炎]っていうイケてる名前のフレームワークを作っている」がありました。そこに、開発の経緯が書かれていました。

だんだんとCloudflare Workersに特化した「Webアプリを作るためのフレームワーク」を作りたくなってきました。手段の目的化です。ということで作り始めました。「Hono[炎]」というイケてる名前のフレームワークです。

Hono[炎]っていうイケてる名前のフレームワークを作っている

「hono＝ほのお」なんですね。かっこいい。honoは、Cloudflare Workersに特化したフレームワークということもわかりました。ということは、Cloudflare Workersを使うということですね。Cloudflare Workersどころか、Cloudflareも使ったことがありません。どうやって使えばよいか、調べます。

まずCloudflare Workersが使えないといけない

Cloudflare Workersは、サーバーレスアプリケーションとJAMstack Webサイトのための開発プラットフォームで、気軽に安全なサーバレスWebアプリケーションが構築＆公開できるようです。公式サイトを見てみると、無料プランがあることがわかりました。これは、気軽に試せますね。

Cloudflare Workersの料金体系

Eggheadコースを修了すれば、独自のCloudflare Workersプロジェクトを試してみることができるそうなので、コースを受講することにします。

Workersを知る方法

「構築を開始する」をクリックすると、EggheadのCloudflare Workersの紹介ページに遷移するので、「Start Watching」をクリックして、1分41秒のサインアップ手順の紹介動画を視聴します。

EggheadのCloudflare Workersの紹介ページ

学習コンテンツは9種類、合計37分の動画で構成されています。

1　Create a Cloudflare Workers Account
2　Install and Configure the Cloudflare Workers CLI Wrangler
3　Generate New Cloudflare Workers Projects with Wrangler's generate Command
4　Write Your First Cloudflare Workers Serverless Function
5　Preview and Publish Your Cloudflare Workers Project
6　Render HTML Pages with Cloudflare Workers
7　Render Cloudflare Region Data for a Request Using request.cf
8　Use Location Personalization Features in Cloudflare Workers
9　Deploy to a Custom Domain with Cloudflare Wrangler Environments

Introduction to Cloudflare Workers

解説動画に従ってユーザー登録後にWranglerをインストールしたのですが、バージョン確認をしたところ「今のバージョンは非推奨なので最新バージョンに更新してください」という警告が表示されました。

非推奨バージョンなので更新を勧められた

メッセージにしたがって、Wranglerのバージョンを最新にします。

npm uninstall -g @cloudflare/wrangler && npm install -g wrangler

を実行したところ、ファイルとディレクトリのアクセス権が無いとエラー修了したので、sudoで実行しなおしました。

sudo npm uninstall -g @cloudflare/wrangler && sudo npm install -g wrangler

今度はアンインストールと、インストールができました。

$ wrangler --version

 ⛅️ wrangler 3.62.0
-------------------

動画に従って、'my-worker'を作成しました。

$ wrangler generate my-worker

 ⛅️ wrangler 3.62.0
-------------------

Using npm as package manager.

　　　　　　：
　　　　　　：
$ cd my-worker/
$ ls
node_modules  package-lock.json  package.json  src  tsconfig.json  wrangler.toml

TypeScriptのプロジェクトを選択したので、index.tsはこんなコードです。

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run `wrangler dev src/index.ts` in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run `wrangler deploy src/index.ts --name my-worker` to deploy your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export interface Env {
	// Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
	// MY_KV_NAMESPACE: KVNamespace;
	//
	// Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
	// MY_DURABLE_OBJECT: DurableObjectNamespace;
	//
	// Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
	// MY_BUCKET: R2Bucket;
	//
	// Example binding to a Service. Learn more at https://developers.cloudflare.com/workers/runtime-apis/service-bindings/
	// MY_SERVICE: Fetcher;
}

export default {
	async fetch(
		request: Request,
		env: Env,
		ctx: ExecutionContext
	): Promise<Response> {
		return new Response("Hello World!");
	},
};

初期プロジェクトを動画に従って実行しようとしたところ、wrangler previewではなく、wrangler devを実行するようにメッセージが表示されました。メッセージに従って、wrangler devを実行すると、成功したようです。

動画のコマンドではエラー、メッセージにしたがってコマンドを実行

動画に従って設定ファイル（）にaccount_idを追加して、公開してみます。

$ wrangler publish

 ⛅️ wrangler 3.62.0
-------------------

▲ [WARNING] `wrangler publish` is deprecated and will be removed in the next major version.

  Please use `wrangler deploy` instead, which accepts exactly the same arguments.


Total Upload: 0.19 KiB / gzip: 0.16 KiB
Uploaded my-worker (1.43 sec)
Published my-worker (3.83 sec)
  https://my-worker.hikeybow-cf.workers.dev

公開できましたが、wrangler deployを使うようにメッセージが表示されました。動画は、いろいろ情報が古いかもしれません。
改めて、wrangler deployを実行して、ブラウザで確認しました。

Hello World!

まとめ

9ステップ、合計37分の入門動画なのですが、動画を見ながら実際に確かめるので、結構時間がかかります。5本目の動画まで進んだところですが、今日はここまでにします。（来週こそ、honoの確認をしたい）