HonoとCloudflare Workersを使ったHello Worldを出力するwebアプリケーションを作成する手順

# 1. はじめに
最近では、手軽にスケーラブルなWebアプリケーションを構築するために、サーバーレスのサービスを活用するケースが増えています。その中でも Cloudflare Workers は、世界中に分散されたCloudflareのエッジネットワーク上でコードを実行できる、無料で使えるサーバーレスプラットフォームとして注目されています。

しかし、Cloudflare Workersでは通常の Node.js環境とは異なる制約があり、Node.jsに依存したフレームワークである Express を使うことができません。そのため、代替となる軽量なフレームワークとして [Hono](https://hono.dev/) を導入するのが最適だと思いました。

このブログでは、HonoとCloudflare Workersを使って簡単なWebアプリケーションを構築し、デプロイする方法を紹介します。
# 2. 事前準備
Cloudflare Workersを利用するには、Cloudflareアカウントが必要です。アカウントを持っていない場合は、こちらの[Cloudflare公式](https://dash.cloudflare.com/8e56cbdc2311b81f9a239d0a10a7e8d0)から無料で作成できます。
アカウント作成後、以下のコマンドを実行してCloudflareにログインします。
```
npx wrangler login
```

# 3. 環境構築
プロジェクトを初期化して必要なパッケージをインストールします。
```
# プロジェクトディレクトリを作成
mkdir hono-cloudflare-hello && cd hono-cloudflare-hello

# npmプロジェクトを初期化
npm init -y

# HonoとCloudflare Workers用のTypeScript型パッケージをインストール
npm install hono wrangler --save

# TypeScriptと型定義パッケージをインストール
npm install typescript @types/node --save-dev

```
自動ビルド＆デプロイをするため`package.json`ファイルの`scripts`に下記の記述を追加します。
```package.json
"scripts": {
  "build": "tsc",
  "deploy": "npm run build && npx wrangler deploy"
}
```
# 4. TypeScript設定ファイルの作成
`tsconfig.json`をプロジェクトのルートディレクトリに作成し、TypeScriptの設定を記述します。
```
touch tsconfig.json
```
```json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Node",
    "outDir": "./dist",
    "esModuleInterop": true,
    "strict": true
  },
  "include": ["src/**/*"]
}

```
# 5. Webアプリケーションの作成
プロジェクトに`src`フォルダを作成して、その中に`index.ts`ファイルを作成します。
```
mkdir src
touch src/index.ts
```
`src/index.ts`に以下のコードを記述します。
```src/index.ts
import { Hono } from 'hono';

const app = new Hono();

app.get('/', (c) => c.text('Hello World from Hono and Cloudflare Workers!'));

export default app;
```
# 6. Cloudflare Workersのエントリーポイントを作成
Cloudflareではエントリーポイントが必要です。
エントリーポイントとはWorkersがリクエストを受け取った時、最初に実行するコードのことです。
Cloudflare WorkersはHttpリクエストを受け取ると、エントリーポイントの`fetch`関数を呼び出します。この関数がリクエストを処理してレスポンスを返します。
`src/worker.ts`ファイルを作成し、以下のように記述します。
```src/worker.ts
import app from './index';

export default {
  fetch: app.fetch,
};
```

# 7. Wrangler設定ファイルの作成
プロジェクトのルートに`wrangler.toml`ファイルを作成します。
`wrangler.toml`ファイルとはCloudflare Workers のプロジェクト設定ファイルです。このファイルを使ってCloudflare Workers の動作やデプロイ先、環境変数などを設定します。
`wrangler.toml` ファイルを Cloudflare Workers 用の CLI ツールである Wrangler が読み取り、ビルドやデプロイを行います。
```
touch wrangler.toml
```

`wrangler.toml`に以下を記述します。
なお、`name`はCloudflare Workers上で一意である必要があります。自分のプロジェクトに合わせて変更してください。
`compatibility_date`についてはCloudflare WorkersのAPIの変更によって動作が変わらないように、この日付時点の互換性を保証するために記述します。
```wrangler.toml
name = "hono-cloudflare-hello" # 自分のプロジェクトに合わせてnameを変更
main = "dist/worker.js"  # ビルド後のエントリーポイント
compatibility_date = "2025-01-05"  # 今日の日付に変更
```

# 8. プロジェクトのデプロイ
アプリケーションをCloudflare Workersにデプロイします。
```
npm run deploy
```
![スクリーンショット 2025-01-05 13.30.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726580/66cd58a7-818e-45d2-c8b0-880cfeb1f05d.png)

# 9. プロジェクトをブラウザで立ち上げする
デプロイが完了したら、ターミナルに表示されたURLをクリックします。
下記のように画面に表示されたら成功です！
![スクリーンショット 2025-01-05 13.34.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726580/51b5981a-901e-cc1c-7f0e-79e49940f936.png)