Open4

Remix + Cloudflare Workers + Cloudflare D1 環境構築

ピン留めされたアイテム
ktgwShotaktgwShota

前提条件

  • Wrangler をインストール済み
  • Cloudflare にログイン（Wranglerと連携）済み

インストール

npm install wrangler --save-dev

ログイン

npx wrangler login
ktgwShotaktgwShota

Remix + Cloudflare Workers のアプリケーションを作成

npx create-remix@latest --template remix-run/remix/templates/cloudflare-workers

https://remix.run/docs/en/main/guides/templates

ファイルの説明

  • wrangler.toml
    • Cloudflare（Workers / D1）の設定ファイル
  • server.js
    • Worker を記述するファイル

メモ

  • 初回のアプリケーションの作成は Cloudflare が用意した CLI でやった方が理解しやすい
    • Cloudflare の公式ガイドでは、以下の CLI を使う前提の説明がされている
      • npm create cloudflare@latest my-remix-app -- --framework=remix
    • Remix が用意した CLI と比較すると作成されるディレクトリに差分があるので、公式ガイドに従って進めて行くと説明されているファイル（src/index.js）が無いという事態になった
    • Remix の CLI では server.js が Worker（src/index.js）の役割をしている
ktgwShotaktgwShota

Cloudflare D1 のデータベースを作成

データベースを作成

npx wrangler d1 create meeting-room-reservation

// 出力結果
[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "meeting-room-reservation"
database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

アプリ（& Cloudflare Worker）とデータベースを連携

出力結果を wrangler.toml に追加する

スキーマを作成

schema.sql
-- 会議室テーブル
CREATE TABLE IF NOT EXISTS Rooms (
    RoomID INTEGER PRIMARY KEY AUTOINCREMENT,
    RoomName TEXT NOT NULL,
    Capacity INTEGER NOT NULL
);

INSERT INTO Rooms (RoomName, Capacity) VALUES 
('第1会議室', 8),
('第2会議室', 4),
('第3会議室', 4),
('第4会議室', 2),
('第5会議室', 2),
('第6会議室', 4),
('ブース', 1);

スキーマを実行（ローカル環境）

npx wrangler d1 execute meeting-room-reservation --local --file=./schema.sql

npx wrangler d1 execute meeting-room-reservation --local --command="SELECT * FROM Rooms"

ローカルで開発する

npx wrangler dev

スキーマを実行（本番環境）

npx wrangler d1 execute meeting-room-reservation --remote --file=./schema.sql

npx wrangler d1 execute meeting-room-reservation --remote --command="SELECT * FROM Rooms"

参考

https://developers.cloudflare.com/d1/get-started/