Zenn
Open5

Hono実装 Tips集🌟

Node.js
TypeScript
Hono
まさぴょんまさぴょん

HonoでのCORS設定

HonoでのCORS（Cross-Origin Resource Sharing）の設定方法について説明します。

手順

  1. CORSミドルウェアのインポート

    まず、hono/corsからCORSミドルウェアをインポートします。

    import { cors } from 'hono/cors'

  2. アプリケーションへのミドルウェアの適用

    Honoアプリケーションで、app.useを使用してCORSミドルウェアを適用します。

    app.use('*', cors())

    上記の例では、すべてのルートに対してCORS設定を適用しています。

  3. オプションの設定（必要に応じて）

    特定のオリジンやメソッドを許可したい場合は、オプションを指定できます。

    app.use('*', cors({
  origin: 'https://example.com',
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowHeaders: ['Content-Type', 'Authorization'],
  maxAge: 600,
}))
    • origin: 許可するオリジン（'*'で全てのオリジンを許可）
    • allowMethods: 許可するHTTPメソッドのリスト
    • allowHeaders: 許可するHTTPヘッダーのリスト
    • maxAge: プリフライトリクエストの結果をキャッシュする時間（秒）

フルコード例

import { Hono } from 'hono'
import { cors } from 'hono/cors'

const app = new Hono()

// CORSミドルウェアの適用
app.use('*', cors({
  origin: '*',
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowHeaders: ['Content-Type', 'Authorization'],
  maxAge: 600,
}))

// ルートハンドラー
app.get('/', (c) => c.text('Hello World!'))

export default app

補足

  • デフォルト設定: cors()をオプションなしで使用すると、デフォルトですべてのオリジンとメソッドが許可されます。
  • セキュリティ: 本番環境では、必要なオリジンとメソッドのみを許可するように設定することを推奨します。

まとめ

HonoでCORSを設定するには、hono/corsからミドルウェアをインポートし、app.useを使用してアプリケーションに適用します。必要に応じて、オプションで詳細な設定を行うことができます。

まさぴょんまさぴょん

Honoでの環境変数について

Q： Honoで wranglerを使用する場合、dotenvは使う必要がないですか？

GPT Answer：

HonoをCloudflare Workers上で使用する際、環境変数の管理にはwrangler.tomlファイルを利用します。このファイルの[vars]セクションで環境変数を定義し、アプリケーション内でc.envを通じてアクセスできます。

一方、dotenvは主にNode.js環境で.envファイルから環境変数を読み込むためのライブラリです。
Cloudflare Workersの開発環境では、dotenvを使用する代わりに、wrangler.tomlや.dev.varsファイルを用いて環境変数を設定します。

したがって、HonoをCloudflare Workers上で使用する場合、dotenvを使用する必要はありません。
開発環境でも本番環境でも、wrangler.tomlや.dev.varsを通じて環境変数を管理することが推奨されます。

wrangler.toml ✖️ Honoでの環境変数の取り扱いについて

wrangler.toml ファイルで定義した環境変数を Hono アプリケーション内で使用するには、以下の手順を行います。

  1. wrangler.toml で環境変数を定義する:
    wrangler.toml ファイルの [vars] セクションに環境変数を設定します。
   [vars]
   MY_VARIABLE = "your_value"

  1. Hono アプリケーションで環境変数を使用する:
    Hono のコンテキストオブジェクト c の env プロパティを通じて、環境変数にアクセスできます。

    import { Hono } from 'hono';

const app = new Hono();

app.get('/', (c) => {
 const myVariable = c.env.MY_VARIABLE;
 return c.text(`The value of MY_VARIABLE is: ${myVariable}`);
});

export default app;

このようにして、c.env.MY_VARIABLE を通じて wrangler.toml で定義した環境変数 MY_VARIABLE の値を取得できます。

詳細については、Hono の公式ドキュメントの「Bindings」セクションをご参照ください。

https://hono.dev/docs/getting-started/cloudflare-workers#bindings

まさぴょんまさぴょん

wrangler.tomlファイル の dev と prod 使い分けについて

Q： wrangler.tomlファイル の dev と prod 用のファイルの使い分けについて Best プラクティスを教えてください。

GPT Answer：

wrangler.toml ファイルで開発（dev）環境と本番（prod）環境を適切に使い分けるためのベストプラクティスは、環境ごとの設定を同一の wrangler.toml ファイル内で管理することです。これにより、設定の一元管理が可能となり、環境間の差異を明確に定義できます。

具体的な手順:

  1. 環境ごとのセクションを定義する:
    wrangler.toml 内で [env.{environment_name}] セクションを使用して、各環境固有の設定を記述します。

    name = "my-worker"
main = "src/index.js"
compatibility_date = "2024-11-03"

[env.dev]
name = "my-worker-dev"
route = { pattern = "dev.example.com/*", zone_name = "example.com" }
vars = { API_URL = "https://api.dev.example.com" }

[env.prod]
name = "my-worker-prod"
route = { pattern = "example.com/*", zone_name = "example.com" }
vars = { API_URL = "https://api.example.com" }

    このように、[env.dev] と [env.prod] セクションを定義し、各環境に応じた設定を記述します。

  2. 環境固有の変数を設定する:
    各環境セクション内で vars を使用して、環境固有の変数を定義します。

    [env.dev.vars]
API_KEY = "dev-api-key"

[env.prod.vars]
API_KEY = "prod-api-key"

    これにより、開発環境と本番環境で異なる API キーなどの変数を設定できます。

  3. デプロイ時に環境を指定する:
    wrangler コマンドの --env オプションを使用して、デプロイ先の環境を指定します。

    # 開発環境へのデプロイ
wrangler deploy --env dev

# 本番環境へのデプロイ
wrangler deploy --env prod

    このようにして、指定した環境の設定が適用されます。

注意点:

  • 環境ごとの設定を [env.{environment_name}] セクションで定義することで、設定の重複を避け、管理が容易になります。
  • 機密情報（例: API キー）は、wrangler secret コマンドを使用して安全に管理することが推奨されます。

この方法により、開発環境と本番環境の設定を一元的に管理し、環境間の切り替えをスムーズに行うことができます。

https://zenn.dev/kameoncloud/articles/fd06abaa115455

まさぴょんまさぴょん

Hono の env() で環境変数を使用する

このenv()関数は、Cloudflare Workers のバインディングを超えて、さまざまなランタイム間で環境変数を取得するのに役立ちます。
取得できる値は、env(c)ランタイムごとに異なる場合があります。

import { env } from 'hono/adapter'

app.get('/env', (c) => {
  // NAME is process.env.NAME on Node.js or Bun
  // NAME is the value written in `wrangler.toml` on Cloudflare
  const { NAME } = env<{ NAME: string }>(c)
  return c.text(NAME)
})

https://hono.dev/docs/helpers/adapter#env