Open2023/10/13にコメント追加4

Hono + htmx + Cloudflare

まずは
https://github.com/yusukebe/hono-htmx

をcloneして動かしてみる

そのままnpm installしたら動かなかったのでpackage.jsonを変更

{
  "scripts": {
    "dev": "wrangler dev --live-reload src/index.tsx",
    "deploy": "wrangler deploy --minify src/index.tsx"
  },
  "dependencies": {
    "@hono/zod-validator": "^0.1.9",
    "hono": "^3.7.2",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20231002.0",
    "wrangler": "^3.9.0"
  }
}

npm installしたらinstallされたが
そのあと、3.8.0-rc.2でないとjsxrendrer使えないので元に戻してもう一回npm install

その後 DB環境設定

wrangler d1 create todo

出来たパラメータをwrangler.sample.tomlに書き込み、wrangler.tomlにリネーム

wrangler d1 execute todo --local --file=todo.sql

本番環境にもテーブル作る

wrangler d1 execute todo --file=todo.sql

npm run dev

動いたのでデプロイ

npm run deploy

動いた

itaosan

やりたいこと
blogにする
github actionでpushしたらデプロイ
Datadogくっつける
Sentryくっつける
Hubspotくっつける

itaosan

ブログサイトを作る

かわいいトイプードルが頑張って作ります！

テーブル作成

下記を blog.sqlにして保存

-- ブログポストテーブル
CREATE TABLE IF NOT EXISTS posts (
    id TEXT PRIMARY KEY,
    title TEXT NOT NULL,
    content TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

-- コメントテーブル
CREATE TABLE IF NOT EXISTS comments (
    id TEXT PRIMARY KEY,
    post_id TEXT,
    content TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (post_id) REFERENCES posts(id)
);

-- カテゴリテーブル
CREATE TABLE IF NOT EXISTS categories (
    id TEXT PRIMARY KEY,
    name TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

-- ポストとカテゴリのリレーションテーブル
CREATE TABLE IF NOT EXISTS post_categories (
    id TEXT PRIMARY KEY,
    post_id TEXT,
    category_id TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (post_id) REFERENCES posts(id),
    FOREIGN KEY (category_id) REFERENCES categories(id)
);

ローカルに流す

wrangler d1 execute todo --local --file=blog.sql

itaosan

htmxについて
hx-post： postしたときに呼ばれるURL
hx-target ：更新後に反映されるDIV