กลับ

ตั้งค่า Cloudflare Pages + D1

สถานะการ Deploy
กำลังรันบนเครื่องท้องถิ่น
วิธีการ Deploy ไปยัง Cloudflare Pages
1 เตรียมไฟล์โปรเจกต์

ตรวจสอบให้แน่ใจว่าโครงสร้างไฟล์เป็นแบบนี้:

pos-project/ ├── index.html ├── manifest.json ├── sw.js ├── styles/ │ └── main.css ├── scripts/ │ ├── main.js │ ├── storage.js │ ├── inventory.js │ ├── sales.js │ ├── cloudflare-d1.js │ └── ... ├── functions/ │ └── api/ │ ├── products.js │ ├── sales.js │ ├── settings.js │ └── setup.js └── wrangler.toml
2 สร้าง D1 Database

ใช้ Wrangler CLI เพื่อสร้าง D1 Database:

# ติดตั้ง Wrangler CLI (ถ้ายังไม่มี) npm install -g wrangler # Login เข้า Cloudflare account wrangler login # สร้าง D1 database wrangler d1 create pos-database # คัดลอก Database ID ที่ได้มาใส่ใน wrangler.toml
3 ตั้งค่า wrangler.toml

แก้ไขไฟล์ wrangler.toml ให้ตรงกับ Database ที่สร้าง:

name = "pos-system" compatibility_date = "2024-08-15" pages_build_output_dir = "." [[d1_databases]] binding = "DB" database_name = "pos-database" database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
4 สร้างโครงสร้างฐานข้อมูล

รันคำสั่งเพื่อสร้างตารางในฐานข้อมูล:

# สร้างตารางจากไฟล์ schema.sql wrangler d1 execute pos-database --file=./cloudflare/schema.sql # หรือสร้างตารางทีละตาราง wrangler d1 execute pos-database --command="CREATE TABLE IF NOT EXISTS inventory ( id INTEGER PRIMARY KEY AUTOINCREMENT, barcode TEXT UNIQUE, name TEXT NOT NULL, price REAL NOT NULL, cost REAL DEFAULT 0, quantity INTEGER DEFAULT 0, unit TEXT DEFAULT 'ชิ้น', min_stock INTEGER DEFAULT 5, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, updated_at DATETIME DEFAULT CURRENT_TIMESTAMP );"
5 Deploy ไปยัง Cloudflare Pages

เลือกวิธีการ Deploy ที่ต้องการ:

วิธีที่ 1: ผ่าน Wrangler CLI
# Deploy ครั้งแรก wrangler pages deploy . --project-name=pos-system # Deploy เวอร์ชันใหม่ wrangler pages deploy .
วิธีที่ 2: ผ่าน Git Integration
  1. Push โค้ดไปยัง GitHub/GitLab
  2. เข้าไปที่ Cloudflare Pages Dashboard
  3. คลิก "Create a project" → "Connect to Git"
  4. เลือก Repository ของคุณ
  5. ตั้งค่า Build configuration:
    • Build command: (ว่างไว้)
    • Build output directory: /
  6. คลิก "Save and Deploy"
6 เชื่อมต่อ D1 Database

ใน Cloudflare Pages Dashboard:

  1. เข้าไปที่โปรเจกต์ที่ Deploy แล้ว
  2. ไปที่ Settings → Functions
  3. ใน D1 database bindings เพิ่ม:
    • Variable name: DB
    • D1 database: เลือก pos-database
  4. กด Save
  5. Redeploy โปรเจกต์
7 ทดสอบการทำงาน

เมื่อ Deploy สำเร็จแล้ว:

  1. เปิดเว็บไซต์ที่ URL ที่ได้จาก Cloudflare Pages
  2. ไปที่เมนู "ตั้งค่า"
  3. กดปุ่ม "ทดสอบ Pages API" เพื่อตรวจสอบการเชื่อมต่อ
  4. กดปุ่ม "ตั้งค่าฐานข้อมูล" เพื่อสร้างตาราง
  5. ทดสอบการใช้งานฟีเจอร์ต่างๆ
เสร็จสิ้น! ระบบ POS ของคุณพร้อมใช้งานบน Cloudflare Pages พร้อมกับ D1 Database แล้ว
ข้อดี:
  • ไม่ต้องจัดการเซิร์ฟเวอร์
  • โหลดเร็ว CDN ทั่วโลก
  • ปรับขนาดอัตโนมัติ
  • ใช้งานฟรีสำหรับเว็บไซต์ขนาดเล็ก
  • SSL/HTTPS ฟรี