Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arafipro/todo-api-drizzle-yt
【Cloudflare Workers】Hono ＋ Cloudflare D1にDrizzle ORMを追加して30分でREST APIを作成
https://github.com/arafipro/todo-api-drizzle-yt
cloudflare cloudflare-d1 cloudflare-workers drizzle hono typescript youtube
Last synced: 27 days ago
JSON representation
【Cloudflare Workers】Hono ＋ Cloudflare D1にDrizzle ORMを追加して30分でREST APIを作成
- Host: GitHub
- URL: https://github.com/arafipro/todo-api-drizzle-yt
- Owner: arafipro
- Created: 2024-04-08T05:44:31.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-04-24T09:29:12.000Z (10 months ago)
- Last Synced: 2024-11-24T22:14:04.567Z (3 months ago)
- Topics: cloudflare, cloudflare-d1, cloudflare-workers, drizzle, hono, typescript, youtube
- Language: TypeScript
- Homepage: https://youtu.be/kCwHEXqoPsE
- Size: 43.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 【Cloudflare Workers】Hono ＋ Cloudflare D1にDrizzle ORMを追加して30分でREST APIを作成
## YouTube
[](https://youtu.be/kCwHEXqoPsE)
## 技術選定
- TypeScript
- Hono
- Drizzle
- Cloudflare D1
- Cloudflare Workers
## 初期設定
### NodeModule をインストール
```bash
npm install
```
### データベースを作成
```bash
npx wrangler d1 create todo-api-drizzle
```
### wrangler.toml に追記
```toml
[[d1_databases]]
binding = "DB"
database_name = "todo-api-drizzle"
database_id = ""
```
``はデータベースを作成したときに出力されるID
### テーブルのスキーマを作成
```bash
npm run generate
```
### ローカルデータベースにテーブルを作成
```bash
npm run migrate:local
```
### リモートデータベースにテーブルを作成
```bash
npm run migrate:remote
```
### ローカルデータベースのテーブルにダミーデータを登録
```bash
npm run migrate:local
```
### リモートデータベースのテーブルにダミーデータを登録
```bash
npm run migrate:remote
```
## APIに接続を許可するURLを指定(CORS)
`src/index.ts`のcorsのoriginに接続を許可するURLを指定する
配列で複数指定することも可能
接続を許可するURLを指定する場合は最後のスラッシュ（/）は不要
例）`http://localhost:8000（/は不要）`
### /todos
idを指定しないURLの場合
GETとPOSTでしか使わない
```ts:src/index.ts
app.use(
"/todos",
cors({
origin: ["{許可するURL1}", "{許可するURL2}"],
allowHeaders: [
"X-Custom-Header",
"Upgrade-Insecure-Requests",
"Content-Type",
],
allowMethods: ["GET", "POST", "OPTIONS"],
...
})
);
```
### /todos/*
idを指定したURLの場合
GETとPUTとDELETEでしか使わない
```ts:src/index.ts
app.use(
"/todos/*",
cors({
origin: ["{許可するURL1}", "{許可するURL2}"],
allowHeaders: [
"X-Custom-Header",
"Upgrade-Insecure-Requests",
"Content-Type",
],
allowMethods: ["GET", "PUT", "DELETE", "OPTIONS"],
...
})
);
```
### 参考資料
Honoドキュメント：
https://hono.dev/middleware/builtin/cors
参考サイト：
https://zenn.dev/camomile_cafe/articles/b11a3f9b8f2f1d
## テーブル
### テーブル名 todos
| No. | カラム名 | データ型 | 主キー | 初期値 | 備考 |
| --- | -------- | -------- | :----: | ------ | ------------ |
| 1 | id | integer | ○ | | ID |
| 2 | todo | text | | | TODO の内容 |
| 3 | score | integer | | 0 | 点数(達成率) |
| 4 | isDone | boolean | | false | 完了フラグ |
| 5 | createAt | text | | | 登録日時 |