Cloudflare Workers + Honoの環境構築からデプロイまでが簡単すぎた

はじめに

こんにちは、エンジニアのクロ(@kro96_xr)です。

先日他社のエンジニアの方と話す機会があったのですが、そこでHono(炎)というフレームワークを知りました。

元々はCloudflare Workersに特化したWebアプリを作るために作られたものとのことで、ちょうどCloudflare Workersも触ってみたかったので試してみました。
その結果、あまりにも爆速で環境構築とデプロイが完了し、タイトルの感想を抱きましたのでご紹介します。

Honoの特徴などは開発者の方の記事にて詳しく書かれておりますのでそちらもご覧ください。

zenn.dev

yusukebe.com

サインアップからデプロイまで

Cloudflareのアカウント作成

以下のページからサインアップを行います。ここで登録した認証情報を後ほど使います。

Cloudflare Workers | サーバーレスアプリケーションを構築 | Cloudflare

プロジェクトの作成

Cloudflare Workersのプロジェクト作成のためにはWranglerというコマンドラインツールを使います。

npm install -g wrangler

バージョン3.34.2がインストールされました。

wrangler --version
 ⛅️ wrangler 3.34.2
-------------------

CLIからCloudflareにログインします。以下を実行するとブラウザで認証画面が表示されます。

wrangler login

プロジェクトを作成します。

wrangler init {プロジェクト名}

コマンドを実行すると不足しているパッケージのインストール可否が聞かれたのち、アプリケーション作成のためにいくつか質問されます。

今回はwebアプリをHonoで実装して…

╭ Create an application with Cloudflare Step 1 of 3
│ 
├ In which directory do you want to create your application?
│ dir ./{プロジェクト名}
│
├ What type of application do you want to create?
│ type Website or web app
│
├ Which development framework do you want to use?
│ framework Hono
│
├ Continue with Hono via `npx create-hono@0.5.0 {プロジェクト名} --template cloudflare-workers`
│ 

Need to install the following packages:
create-hono@0.5.0
Ok to proceed? (y) y

create-hono version 0.5.0

npmでパッケージ管理して、git管理もして…

Configuring your application for Cloudflare Step 2 of 3
│ 
├ Installing @cloudflare/workers-types 
│ installed via npm
│ 
├ Adding latest types to `tsconfig.json` 
│ added @cloudflare/workers-types/2023-07-01
│ 
├ Do you want to use git for version control?
│ yes git
│
├ Committing new files 
│ git commit
│ 
╰ Application configured

Cloudflareにデプロイをします。

╭ Deploy with Cloudflare Step 3 of 3
│ 
├ Do you want to deploy your application?
│ yes deploy via `npm run deploy`
│
├ Logging into Cloudflare checking authentication status 
│ logged in
│ 
├ Selecting Cloudflare account retrieving accounts 
│ account {アカウント名} Account
│ 
├ Deploying your application 
│ deployed via `npm run deploy`
│ 
├  SUCCESS  View your deployed application at https://{プロジェクト名}.{アカウント名}.workers.dev
│ 
│ Navigate to the new directory cd {プロジェクト名}
│ Run the development server npm run dev
│ Deploy your application npm run deploy
│ Read the documentation https://developers.cloudflare.com/workers
│ Stuck? Join us at https://discord.gg/cloudflaredev
│ 
├ Waiting for DNS to propagate 
│ DNS propagation complete.
│ 
├ Waiting for deployment to become available 
│ deployment is ready at: https://{プロジェクト名}.{アカウント名}.workers.dev
│ 
├ Opening browser
│ 
╰ See you again soon!

これでプロジェクト作成とHello Worldのデプロイが終わりました。コマンドラインに表示されたURLにアクセスするとHello Hono!と返ってきます。

流石に爆速すぎますね。

Honoで実装されているコードも見てみます。
デフォルトのindex.tsは以下のようになっています。シンプルですね。

import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

export default app

適当にコードを修正して再デプロイしてみます。

import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello World!')
})

export default app

デプロイはnpm run deployを叩くだけです。
プロジェクト作成時にpackage.jsonを更新してくれていますね。

{
  "scripts": {
    "dev": "wrangler dev src/index.ts",
    "deploy": "wrangler deploy --minify src/index.ts"
  },
  "dependencies": {
    "hono": "^4.1.0"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20240314.0",
    "wrangler": "^3.32.0"
  }
}