HonoとAstroは仲良し〜Cloudflare Workersでの使い方紹介

バックエンド向けウェブフレームワーク「Hono」、フロントエンド向けのウェブフレームワーク「Astro」。実は仲良いですよ！
今回はCloudflare Workers上での、HonoとAstroの使い方を紹介します。単独で使う、Hono-in-Astro、Astro-in-Honoなど組み合わせ方が多いです！最後にAstro-in-Hono関連のライブラリも紹介します。

Transcript

1. HonoとAstroは仲良し〜 Cloudflare Workersでの使い方紹介 Cloudflare Meet-up Fukuoka Vol.3 イリドリシ愛民 (Amine Ilidrissi) Copyright © 3-shake, Inc. All Rights Reserved.
2. 自己紹介 イリドリシ　愛民（アミン） 株式会社スリーシェイク フルスタックエンジニア 最近LaravelとAstroにハマっている Cloudflare初心者 X: @realaminevg GitHub: @aminevg
3. We're Hiring! リードSREエンジニア SREを突き詰めたい方 SREエンジニア SREを始めてみたい方 フルスタックエンジニア モダンスタックでSREと開発も両方 やりたい欲張りな方 採用ページ
4. 背景 01 Copyright © 3-shake, Inc. All Rights Reserved.
5. HonoとAstro、仲良いよ
6. Honoとは • 公式ドキュメントより • 「Hono は小さく、シンプルで爆速な エッジ向けWebフレームワークです。」 • 何ができる？ ◦ 軽量なバックエンド開発 ◦ SSGなどウェブサイト開発 (HonoX) ◦ タイプセーフなAPI開発 (RPC)
7. Astroとは • 公式ドキュメントより • 「Astroは、コンテンツ駆動のウェブサ イトを作成するためのウェブフレーム ワークです。」 • 何ができる？ ◦ 軽量なフロントエンド開発 ◦ SSGなどウェブサイト開発 ◦ タイプセーフなAPI開発 (Actions)
8. Astroとは • 公式ドキュメントより • 「Astroは、コンテンツ駆動のウェブサ イトを作成するためのウェブフレーム ワークです。」 • 何ができる？ ◦ 軽量なフロントエンド開発 ◦ SSGなどウェブサイト開発 ◦ タイプセーフなAPI開発 (Actions)
9. Hono❤Astro • 組み合わせ方いろいろ • 🔰単独でHonoとAstroを使う ◦ フロントとバックを分離する ◦ RPC機能を使いバックを呼び出す • 📚Astro内にHonoを使う (Hono-in-Astro) ◦ Worker一つでAstroとHonoを使える ◦ フロントとバックを分離しなくて済む • 🌶Hono内でAstroを使う (Astro-in-Hono) ◦ Astroはレンダリングレイヤー ◦ Honoはサーバールーティング ❤
10. Hono❤Astro ❤
11. Hono❤Astro 今回紹介するコードはGitHubで確認できます！ https://github.com/aminevg/hono-and-astro-in-cloudflare
12. おさらい：Hono・Astroのデプロイ方法 02 Copyright © 3-shake, Inc. All Rights Reserved.
13. Honoのデプロイ方法
14. Honoのデプロイ方法（プロジェクト作成） • Honoプロジェクトを作成 • Cloudflare Workersテンプレートを選択 • 折角Workersを使っているし、D1も導入 ◦ CloudflareのSQLiteベースのRDBMS
15. Honoのデプロイ方法（データベース作成） • Wranglerでデータベース作成 • 作成後、ローカル環境と本番環境でデータ ベースを使えるようになる
16. Honoのデプロイ方法（テーブル作成） • Wranglerでテーブル作成 • ローカル環境でテーブルの中身をSELECT できるようになった • 本番環境は別途コマンド実行が必要
17. Honoのデプロイ方法（アプリケーションコード）
18. Honoのデプロイ方法（ローカル開発とデプロイ）
19. Honoのデプロイ方法（テスト）
20. Astroのデプロイ方法
21. Astroのデプロイ方法（プロジェクト作成） • Astroプロジェクトを作成
22. Astroのデプロイ方法（Workers用設定） • Workersにデプロイするよう設定 • 本番環境（Workers）にデプロイできるよ うになった • ローカル環境でCloudflare D1など Bindingsを使えるようになった
23. Astroのデプロイ方法（データベース作成） • Wranglerでデータベース作成 • Astro用設定 ◦ Node.js互換性を有効化（任意） ◦ mainファイル指定 ◦ アセットフォルダー指定
24. Astroのデプロイ方法（テーブル作成） • Wranglerでテーブル作成 • ローカル環境でテーブルの中身をSELECT できるようになった • 本番環境は別途コマンド実行が必要
25. Astroのデプロイ方法（アプリケーションコード）
26. Astroのデプロイ方法（ローカル開発とデプロイ）
27. Astroのデプロイ方法（テスト）
28. HonoとAstroを組み合わせて使ってみよう 03 Copyright © 3-shake, Inc. All Rights Reserved.
29. Hono❤Astro • 組み合わせ方いろいろ • 🔰単独でHonoとAstroを使う ◦ フロントとバックを分離する ◦ RPC機能を使いバックを呼び出す • 📚Astro内にHonoを使う (Hono-in-Astro) ◦ Worker一つでAstroとHonoを使える ◦ フロントとバックを分離しなくて済む • 🌶Hono内でAstroを使う (Astro-in-Hono) ◦ Astroはレンダリングレイヤー ◦ Honoはサーバールーティング ❤
30. Hono❤Astro • 組み合わせ方いろいろ • 🔰単独でHonoとAstroを使う ◦ フロントとバックを分離する ◦ RPC機能を使いバックを呼び出す • 📚Astro内にHonoを使う (Hono-in-Astro) ◦ Worker一つでAstroとHonoを使える ◦ フロントとバックを分離しなくて済む • 🌶Hono内でAstroを使う (Astro-in-Hono) ◦ Astroはレンダリングレイヤー ◦ Honoはサーバールーティング ❤
31. 📚Hono-in-Astro（構成）
32. 📚Hono-in-Astro（プロジェクト作成） • Astroプロジェクトを作成
33. 📚Hono-in-Astro（エンドポイント作成） • Astroのエンドポイントとは？ ◦ ページ以外のルートを定義する方法 ◦ APIルートを定義できる ◦ サーバーコードを実行できる • Astroのエンドポイントのデメリット ◦ ファイルベースルーティング ◦ 型安全ではない • Astroのエンドポイント上でHonoを使う ◦ ルートの定義はより楽に ◦ APIルートの型安全性を実現できる
34. 📚Hono-in-Astro（エンドポイント作成）
35. 📚Hono-in-Astro（エンドポイント作成） • Honoインスタンスを作成 • /api下にルートを定義するため、 basePathを使う • 普段通りにルートを定義 • RPC機能を使うのでルート定義を チェーンする ◦ 参考：Using RPC with larger applications
36. 📚Hono-in-Astro（エンドポイント作成） • Astroエンドポイントを作成 • ALLエンドポイントを定義 ◦ ALL == 全メソッド（GET, POST, PUT, DELETEなど） • エンドポイント内にHonoインスタ ンスを呼び出す • CloudflareのBindingsなど環境設定 (locals.runtime.env) を付与する
37. 📚Hono-in-Astro（エンドポイント作成） • Honoインスタンスの型をexport • RPC機能を使うため
38. 📚Hono-in-Astro（APIを使う） • 作成したエンドポイントを使う • APIを直接叩ける • 単独でデプロイしたHonoと同じ動き
39. 📚Hono-in-Astro（クライアントサイドで利用） • 作成したエンドポイントを使う • クライアントサイドで呼び出せる • Astroページのscriptタグなら ◦ node_modules内のモジュール をimportできる ◦ Typescriptを使える ◦ ➡楽にRPCを使える
40. Hono❤Astro • 組み合わせ方いろいろ • 🔰単独でHonoとAstroを使う ◦ フロントとバックを分離する ◦ RPC機能を使いバックを呼び出す • 📚Astro内にHonoを使う (Hono-in-Astro) ◦ Worker一つでAstroとHonoを使える ◦ フロントとバックを分離しなくて済む • 🌶Hono内でAstroを使う (Astro-in-Hono) ◦ Astroはレンダリングレイヤー ◦ Honoはサーバールーティング ❤
41. 🌶Astro-in-Hono（構成）
42. 🌶Astro-in-Hono（プロジェクト作成） • Hono + Astroプロジェクトを2つ作成
43. 🌶Astro-in-Hono（アプリケーションコード）
44. 🌶Astro-in-Hono（アプリケーションコード） • Astro Container APIを使う • Astro Container APIとは？ ◦ Astroが最近（2024年以降） 提供開始したレンダリングAPI ◦ Astroのコンポーネントをどこ でもレンダーできる ◦ 本来コンポーネントテスト用 に作られた
45. 🌶Astro-in-Hono（アプリケーションコード） • Honoのルート定義 • DBからデータを取得 ◦ 普段通り • Astroコンポーネントをレンダー ◦ renderToString関数を使う ◦ ReactやVueと同じような感じ
46. 🌶Astro-in-Hono（ローカル開発とデプロイ）
47. 🌶Astro-in-Hono（テスト）
48. 🌶Astro-in-Hono（テスト） ?
49. 🌶Astro-in-Hono（問題点） • Hono内にAstroコンポーネントをレンダー できた • ただし問題が盛りだくさん ◦ Astroコンポーネントのimportがやや こしい ◦ コンポーネントを変更するたびにビル ドが必要 (No HMR) ◦ CSSが反映されない • 現時点ではAstro-in-Honoはおすすめしづ らい
50. [個人PR] Astro-in-Honoを楽に！Mighty開発中 • Mightyを開発しています！ ◦ Astro Container APIを簡単に使えるラ イブラリ • 特徴 ◦ ややこしいコンポーネントimportなし ◦ HMR対応 ◦ CSS対応 • 年内にリリースを目指しています • （個人で開発しているもので、株式会社ス リーシェイクが開発しているものではない）
51. [個人PR] Astro-in-Honoを楽に！Mighty開発中
52. [個人PR] Astro-in-Honoを楽に！Mighty開発中 • 公式ドキュメント ◦ https://go-mighty.vercel.app ◦ WIP • Githubリポジトリ ◦ https://github.com/gomighty/mighty ◦ スター⭐お願いします！ • X ◦ @gogetmighty
53. Thank you! ご清聴ありがとうございます Copyright © 3-shake, Inc. All Rights Reserved.