Zenn
Open3

Cloudflareとか

Cloudflare
devcontainer
Hono
Cloudflare D1
Mt.SouthernMt.Southern

Honoを試す、で炎上するｗ

hono環境を作る。bunでやってみる。
前提としては、bun入りdevcontainer環境を事前に作成しているのでそちらから実行。

ターミナルコマンド
$ bun create hono
create-hono version 0.13.0
? Target directory hono-example
? Which template do you want to use? cloudflare-workers
? Do you want to install project dependencies? yes
? Which package manager do you want to use? bun
✔ Cloning the template
✔ Installing project dependencies
🎉 Copied project files
Get started with: cd hono-example

んで、動かしてみる。

ターミナル
$ cd hono-example
$ bun run dev

$ wrangler dev src/index.ts

 ⛅️ wrangler 3.75.0
-------------------

? Would you like to help improve Wrangler by sending usage metrics to Cloudflare? › (Y/n)╭─────────────────────────────────
⎔ Starting local server...
[wrangler:inf] Ready on http://localhost:8787
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ [b] open a browser, [d] open Devtools, [l] turn off local mode, [c] clear console, [x] to exit                          │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

こうなるんでブラウザから http://localhost:8787 へアクセスするもうまくいかず。。。

困ったらchat GPT大先生にヘルプ。

そしたら、wrangler.tomlファイルにdevの設定をしたらええそうで提案して貰った内容の

wrangler.toml
# ローカル開発時の設定
[dev]
port = 8787                 # ローカルで使用するポート
ip = "127.0.0.1"            # 開発用のIPアドレス (通常は127.0.0.1)

設定して保存したら、ターミナル側で勝手にリロードしてくれて表示が変わった。

ターミナル
wrangler.toml changed...
⎔ Reloading local server...
⎔ Reloading local server...
[wrangler:inf] Updated and ready on http://127.0.0.1:8787
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ [b] open a browser, [d] open Devtools, [l] turn off local mode, [c] clear console, [x] to exit                          │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

ほな、もっかい！ということでブラウザで再度、 http://localhost:8787 へアクセスしたら。。。

あかんやん！

Chat GPT大先生の嘘つき～。
ちゃんとdevcontainer環境で、ってプロンプトにも書いたのにぃ。

うーん、なんでや？
ちょっと悩んだ末、127.0.0.1 やとコンテナのローカル環境しかアクセスでけへん事に気づく。

ああ、そしたら全部受けたらええやん。

と言うことで設定を変更

wrangler.toml
# ローカル開発時の設定
[dev]
port = 8787                 # ローカルで使用するポート
ip = "0.0.0.0"            # 開発用のIPアドレス (コンテナへのアクセスは全部通すので0.0.0.0)

としたらまたまたターミナルに変化があった。

ターミナル
wrangler.toml changed...
⎔ Reloading local server...
⎔ Reloading local server...
[wrangler:inf] Updated and ready on http://0.0.0.0:8787

再々度、ブラウザから http://localhost:8787 にアクセスしてみると今度は
Hello Hono!
と表示された。

めでたしめでたし。

Mt.SouthernMt.Southern

Cloudflare D1 devcontainer環境で試し、燃え上がるｗ

CloudflareにD1と言う素敵なsqlite環境があるという事で試してみたら、炎上したｗ

環境としてはdevcontainerにbun実行環境(nodejs)なんやけど、チュートリアルとかそのまんま動かしてもうまくいかへんかった。
前提としてはHonoの時と一緒なので、

wrangler.toml
# ローカル開発時の設定
[dev]# ローカル開発時の設定
[dev]
port = 8787                 # ローカルで使用するポート
ip = "0.0.0.0"            # 開発用のIPアドレス (コンテナへのアクセスは全部通すので0.0.0.0)

も前提として入れとくこと。

ターミナル
$ bunx wrangler d1 create sample-db
 ⛅️ wrangler 3.78.2
-------------------

Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth?response_type=code&client_id=...中略...
▲ [WARNING] Failed to open


✘ [ERROR] Timed out waiting for authorization code, please try again.



✘ [ERROR] Did not login, quitting...


🪵  Logs were written to "/home/app/.config/.wrangler/logs/wrangler-2024-09-14_01-02-56_935.log"
error: "wrangler" exited with code 1

ってなるんで、リンクをコピーしてブラウザに貼り付けてログインして。。。ってやってもうまくいかへんし。。。
原因としては、OAuthの流れで行くと、リンク先はブラウザで開いて許可出したらコールバックでローカルのサーバで受けて、ってやるけど、devcontainer環境なんで受けられへん訳やね。。。

しゃーないから、再びChatGPT大先生にお出まし頂く。

ご宣託としては、APIトークンであんじょうやったったらええねんで、とのお達し。

つーことで、cloudflareのコンパネにGo!

  • 右上のヒト型アイコンからマイプロフィールを選ぶ。
  • 左のメニューからAPIトークンを選び、 トークンを作成するボタンでクリック。
  • 権限のテンプレートがあるので Cloudflare Workersを編集する の テンプレートを使用する ボタンをクリック。
  • 次の画面でアクセス許可にD1がないので +更に追加する として アカウントとD1 編集をドロップダウンから選ぶ
  • アカウントリソースで 含む 自分のアカウント名 をドロップダウンから選択
  • ゾーンリソースで 含む アカウントにある全てのゾーン 自分のアカウント名 をドロップダウンから選択
  • 概要に進むをクリックすると、確認画面へ遷移する

すると

確認画面
Cloudflare Workers を編集する API トークンの概要
この API トークンは、それぞれの権限とともに、以下のアカウントとゾーンに影響します


アカウント名's Account - Workers KV Storage:編集, Workers スクリプト:編集, アカウント設定:読み取り, Workers Tail:読み取り, Workers R2 Storage:編集, Cloudflare Pages:編集, D1:編集
すべてのゾーン - Workers ルート:編集
すべてのユーザー - ユーザーの詳細:読み取り, メンバーシップ:読み取り

と設定した内容の最終確認があるのでトークンを作成する をクリックするとトークンが作成される。

なお、トークン作成時の

  • クライアント IP アドレスフィルタリング
  • TTL

については本来設定すべきやけど、今回はテストなのでパス。

で、次の画面では作成されたAPIトークンが表示されるのできちんとコピーしてどっかに保存しとく。再度表示はでけへんからきちんとどっかにメモっとけ！って感じやなぁ。

で、次はそのAPIキーをdevcontainer環境上に環境変数として反映させる。

ターミナル
$ export CLOUDFLARE_API_TOKEN=[取得したAPIトークン文字列]

でも、このやり方、シェル起動毎に書くのもいややし、.bashrcとかに書くっていうのもプロジェクト異なる毎に書き換えになるんでいややなぁ。

てことで、プロジェクトフォルダ内の .envに書くことで解決することにした。

.env
CLOUDFLARE_API_TOKEN = "[取得したAPIトークン文字列]"

としてから、先ほど失敗したd1データベース作成のコマンドを再実行。

$ bun run wrangler d1 create sample-db
 ⛅️ wrangler 3.78.2
-------------------

✅ Successfully created DB 'sample-db' in region APAC
Created your new D1 database.

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "sample-db"
database_id = [ここに作成したデータベースのIDが表示される]

となるので、最後に表示されている内容をwrangler.tomlに追記。

wrangler.toml
[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "sample-db"
database_id = [ここに作成したデータベースのIDが表示される]

確認

ターミナル
$ bun run wrangler d1 list

 ⛅️ wrangler 3.78.2
-------------------

┌──────────────────────────────────────┬─────────┬────────────┬──────────────────────────┬───────────┬────────────┐
│ uuid                                 │ name    │ version    │ created_at               │ file_size │ num_tables │
├──────────────────────────────────────┼─────────┼────────────┼──────────────────────────┼───────────┼────────────┤
│ XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX │sample-db│ production │ 2024-09-15T05:03:10.024Z │           │            │
└──────────────────────────────────────┴─────────┴────────────┴──────────────────────────┴───────────┴────────────┘

よしよし、データベースで来てる。

これでテーブルCREATEのSQLを実行したらいけるはず。

と言うことで、sqlファイル

create_table_todos.sql
CREATE TABLE IF NOT EXISTS users (
    user_id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    user_name TEXT NOT NULL,
    user_email TEXT NOT NULL UNIQUE,
    user_phone_number TEXT NOT NULL,
    user_address TEXT,
    user_password TEXT NOT NULL,
    created_at  TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at  TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO users (user_name, user_email, user_phone_number, user_address, user_password)
VALUES
    ('Alice Cooper', 'alice@example.com', '03-1111-2222', 'Chuo-ku, Tokyo, Japan', 'abcdefg'),
    ('Bob Marley', 'bob@example.com', '03-2222-2222', 'Minato-ku, Tokyo, Japan', 'abcdefg'),
    ('Charlie Sheen', 'charlie@example.com', '03-3333-3333', 'Toshima-ku, Tokyo, Japan', 'abcdefg');

で、実行。

ターミナル
$ bun run wrangler d1 execute sample-db --local --file=sql/create_table.sql 

 ⛅️ wrangler 3.78.2
-------------------

🌀 Executing on local database todo-db ([作成したデータベースのID]) from .wrangler/state/v3/d1:
🌀 To execute on your remote database, add a --remote flag to your wrangler command.

つづいて、

ターミナル
$ bun run wrangler d1 execute sample-db --local --command='SELECT * FROM users;'

 ⛅️ wrangler 3.78.2
-------------------

🌀 Executing on local database todo-db (c359313a-4323-449a-98db-c4e931426c1b) from .wrangler/state/v3/d1:
🌀 To execute on your remote database, add a --remote flag to your wrangler command.
┌─────────┬───────────────┬─────────────────────┬───────────────────┬──────────────────────────┬───────────────┬─────────────────────┬─────────────────────┐
│ user_id │ user_name     │ user_email          │ user_phone_number │ user_address             │ user_password │ created_at          │ updated_at          │
├─────────┼───────────────┼─────────────────────┼───────────────────┼──────────────────────────┼───────────────┼─────────────────────┼─────────────────────┤
│ 1       │ Alice Cooper  │ alice@example.com   │ 03-1111-2222      │ Chuo-ku, Tokyo, Japan    │ abcdefg       │ 2024-09-15 16:48:14 │ 2024-09-15 16:48:14 │
├─────────┼───────────────┼─────────────────────┼───────────────────┼──────────────────────────┼───────────────┼─────────────────────┼─────────────────────┤
│ 2       │ Bob Marley    │ bob@example.com     │ 03-2222-2222      │ Minato-ku, Tokyo, Japan  │ abcdefg       │ 2024-09-15 16:48:14 │ 2024-09-15 16:48:14 │
├─────────┼───────────────┼─────────────────────┼───────────────────┼──────────────────────────┼───────────────┼─────────────────────┼─────────────────────┤
│ 3       │ Charlie Sheen │ charlie@example.com │ 03-3333-3333      │ Toshima-ku, Tokyo, Japan │ abcdefg       │ 2024-09-15 16:48:14 │ 2024-09-15 16:48:14 │
└─────────┴───────────────┴─────────────────────┴───────────────────┴──────────────────────────┴───────────────┴─────────────────────┴─────────────────────┘

よっしゃ！いけた！

Hidden comment