Hello Hono | Cloudflare Workers

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

Hono で SSR を試します。

Topic は以下のとおりです。

- Hono[^1]
- Cloudflare Workers[^2]

[^1]: https://hono.dev/

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

---

2023年9月4回目です。

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569971/0ad93862-0e11-0bfc-6125-23bd8a44d014.png)

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

https://github.com/danny-yamamoto/my-portfolio-hono-ts

https://my-portfolio-hono-ts.yamamoto-daisuke.workers.dev/

## 開発環境
- Visual Studio Code Dev Containers
- Node.js: `v20.5.0`
- Hono: `3.6.0`

## Project 構成

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

https://github.com/honojs/examples/tree/main/jsx-ssr

<details><summary>Project Structure</summary>

```bash
.
├── 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
```

</details>

## Start the development server

https://github.com/danny-yamamoto/my-portfolio-hono-ts/blob/bd3b9613d9ea65c72720d90be802ad3af2b3c330/package.json#L4-L6

<details><summary>npm run dev</summary>

```bash
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                                                                                          │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
```

</details>

## Build

https://github.com/danny-yamamoto/my-portfolio-hono-ts/blob/bd3b9613d9ea65c72720d90be802ad3af2b3c330/package.json#L7

<details><summary>npm run build</summary>

```bash
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) $ 
```

</details>

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569971/21443fb8-d9e6-f4e6-4052-a14078e1e5f0.png)

[^2]: https://developers.cloudflare.com/workers/

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

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

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