Netlify

Netlify は静的サイトのホスティングとサーバーレスバックエンドサービスを提供します。Edge Functions を使うと、Web ページを動的にできます。

Edge Functions は Deno と TypeScript での記述に対応しており、Netlify CLI で簡単にデプロイできます。Hono を使って Netlify Edge Functions 向けのアプリケーションを作成できます。

1. セットアップ

Netlify 向けのスターターテンプレートがあります。「create-hono」コマンドでプロジェクトを開始します。この例では netlify テンプレートを選択します。

npm create hono@latest my-app

yarn create hono my-app

pnpm create hono my-app

bun create hono@latest my-app

deno init --npm hono my-app

my-app に移動します。

2. Hello World

netlify/edge-functions/index.ts を編集します。

import { Hono } from 'jsr:@hono/hono'
import { handle } from 'jsr:@hono/netlify'

const app = new Hono()

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

export default handle(app)

3. 実行

Netlify CLI で開発サーバーを起動し、Web ブラウザーで http://localhost:8888 にアクセスします。

netlify dev

4. デプロイ

netlify deploy コマンドでデプロイできます。

netlify deploy --prod

`Context`

c.env を通じて Netlify の Context にアクセスできます。

import { Hono } from 'jsr:@hono/hono'
import { handle } from 'jsr:@hono/netlify'

// Import the type definition
import type { Context } from 'https://edge.netlify.com/'

export type Env = {
  Bindings: {
    context: Context
  }
}

const app = new Hono<Env>()

app.get('/country', (c) =>
  c.json({
    'You are in': c.env.context.geo.country?.name,
  })
)

export default handle(app)

Netlify ​

1. セットアップ ​

2. Hello World ​

3. 実行 ​

4. デプロイ ​

Context ​