🔥

Hello Hono | Cloudflare Workers

2023/09/28に公開

TypeScript

このメモは、Hono で Web Application を実装した時にまとめたものです。

Hono で SSR を試します。

Topic は以下のとおりです。

Hono^[1]
Cloudflare Workers^[2]

さらに詳しく見たい方は読み続けてください。

2023年9月4回目です。

今回は、「超高速な Framework」で話題の Hono🔥 について学びます。

こういうものを作れるような Software Engineer になりたいです。尊敬。

現職の組織問題について愚痴ってる気持ちが晴れます。❤️‍🔥

今回作成したコードはこちらです。

開発環境

Visual Studio Code Dev Containers
Node.js: v20.5.0
Hono: 3.6.0

Project 構成

こちらを参考に実装しました。

Project Structure

.
├── package.json                  # edit
├── package-lock.json
├── public
├── README.md
├── src                           # add
│   ├── components                # add
│   │   └── Layout.tsx            # add
│   ├── index.tsx                 # add
│   └── pages
│       ├── articles.tsx          # add
│       ├── certificates.tsx      # add
│       ├── experience.tsx        # add
│       ├── footer.tsx            # add
│       ├── repositories.tsx      # add
│       └── top.tsx               # add
└── tsconfig.json                 # edit

Start the development server

npm run dev

node ➜ /workspaces/my-portfolio-hono-ts (main) $ npm run dev

> dev
> run-p dev:*


> dev:esbuild
> esbuild --bundle src/index.tsx --format=esm --watch --outfile=dist/_worker.js


> dev:wrangler
> wrangler dev src/index.tsx --live-reload

[watch] build finished, watching for changes...
 ⛅️ wrangler 3.9.1 (update available 3.10.0)
------------------------------------------------------
wrangler dev now uses local mode by default, powered by 🔥 Miniflare and 👷 workerd.
To run an edge preview session for your Worker, use wrangler dev --remote
⎔ Starting local server...
[mf:wrn] The latest compatibility date supported by the installed Cloudflare Workers Runtime is "2023-09-22",
but you've requested "2023-09-28". Falling back to "2023-09-22"...
[mf:inf] Ready on http://0.0.0.0:8787 
[mf:inf] - http://127.0.0.1:8787
[mf:inf] - http://172.17.0.2:8787
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ [b] open a browser, [d] open Devtools, [l] turn off local mode, [c] clear console, [x] to exit                                                                                          │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

Build

npm run build

node ➜ /workspaces/my-portfolio-hono-ts (main) $ npm run build

> build
> esbuild --bundle src/index.tsx --format=esm --outfile=dist/_worker.js


  dist/_worker.js  57.1kb

⚡ Done in 44ms
node ➜ /workspaces/my-portfolio-hono-ts (main) $

Deploy a Hono site

Cloudflare Workers^[2:1]
Deploy Step
1. Cloudflare に login
2. 「Workers & Pages」をクリック
3. 「アプリケーションの作成」をクリック
4. 「Workers」tab をクリック
5. 「ワーカーの作成」をクリック
6. 名前を入力。生成されるURL は、「入力した名前 + domain」
7. 「デプロイ」をクリック
8. 「クイック編集」をクリック
9. local で build した dist/_worker.js を貼り付け
10. 「保存してデプロイする」をクリック

環境変数

一番、悩んだ部分がここでした。
Workder には2つの書き方^[3] があります。Service Worker Module Worker
Module Worker mode を使用します。

But now, we recommend using Module Worker mode because such as that the binding variables are localized.

しかし現在では、バインディング変数がローカライズされるため、モジュール・ワーカー・モードの使用を推奨しています。

Summary

Hono について書きました。
Deploy するのに手間取りました。Workers での deploy に気付くまで1日程度悩みました。
Hono で色々試してみたい部分があるため、継続して学んでいきます。

この投稿をみて何か得られた方は、いいね ❤️ をお願いします。

それでは、また別の話でお会いしましょう。👋

脚注