Hono + htmx + Cloudflareでアプリケーションを実装してみる
はじめに
本記事は、@yusukebe 氏が提案する、「Hono + htmx + Cloudflareスタック」を使用したサーバレスアプリケーションを開発する流れを紹介します。
このスタックは、通常API開発に利用される Hono と Cloudflare に、JavaScript無しで動的なページを構築できる htmx を加えることで、CDNエッジで動作するマルチページアプリケーション(MPA)を作成可能にします。
対象読者は、Hono、htmx、Cloudflareに初めて触れるエンジニアです。
Cloudflareアカウントのセットアップ
Cloudflareのアカウントを持っていない方は、こちら から作成できます。
Freeプランでは、請求情報の入力が不要なため、すぐに利用を開始できるのも良いところです。
Wrangler CLIのセットアップ
Cloudflare Workersを利用するためのCLIである Wrangler をグローバルにインストールします。
npm i -g wrangler
次に、Wranglerに権限を与えるために、下記コマンドを実行してください。
npx wrangler login
ブラウザでCloudflareにログインできれば、Wranglerの設定は完了です。
環境構築
リポジトリのクローン
まずは、テンプレートリポジトリをクローンします。
git clone git@github.com:yusukebe/hono-htmx.git
このリポジトリをテンプレートとして、実装を進めていきます。
依存関係のインストール
次に、クローンしたプロジェクトの依存関係をインストールします。
npm install
D1の作成
データベースを作成します。データベースの設定は、wrangler.toml ファイルで定義します。テンプレートに含まれる wrangler.sample.toml ファイルを参考にして設定を行いましょう。
wrangler d1 create todo
上記コマンドを実行すると、 database_id が払い出されます。このIDを wrangler.toml ファイルの該当箇所に置き換えてください。
SQLの実行
次に、SQLを実行してデータベースを設定します。必要に応じて、 .sql ファイルを編集してください。
ローカルで実行する場合：
wrangler d1 execute todo --local --file=todo.sql
リモートで実行する場合：
wrangler d1 execute todo --remote --file=todo.sql
開発ビルド
開発環境を立ち上げるには、以下のコマンドを実行します。
npm run dev
デプロイ
アプリケーションをデプロイする際は、以下のコマンドでデプロイを行います。
npm run deploy
開発フロー
おわりに
開始からおよそ10分でデプロイまでたどり着けたのは驚きました。ただし、モーダルなどのインタラクティブなUIを作成したり、アップロードできるファイルサイズの対応など、工夫が必要そうだと感じました。軽くてシンプルなアプリケーションを開発する際には最適なスタックです！
Discussion