Netlify

Netlifyは、静的サイトのホスティングとサーバーレスバックエンドサービスを提供しています。Edge Functions を使用すると、ウェブページを動的にすることができます。

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

bunx create-hono my-app

deno run -A npm:create-hono my-app

my-appディレクトリに移動します。

2. Hello World

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

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

const app = new Hono()

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

export default handle(app)

3. 実行

Netlify CLIを使用して開発サーバーを実行します。その後、Webブラウザでhttps://#:8888にアクセスします。

netlify dev

4. デプロイ

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

netlify deploy --prod

`Context`

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

import { Hono } from 'jsr:@hono/hono'
import { handle } from 'jsr:@hono/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 ​