ติดตั้งร้าน

ใช้เวลาราว 5–10 นาที มีคำสั่งให้พิมพ์บรรทัดเดียว ที่เหลือคือตอบคำถามกับรอ

ยังไม่ได้อ่าน ตรวจก่อนซื้อ ให้กลับไปอ่านก่อน โดยเฉพาะเรื่องบัตรที่ต้องผูกกับ Cloudflare — ไม่ผูกไว้ก่อน ติดตั้งจะค้างกลางทาง

เตรียม 3 อย่าง

1. ติดตั้ง Node — โหลดที่ nodejs.org กดปุ่มดาวน์โหลดตัวใหญ่ แล้วกด Next ไปเรื่อย ๆ
2. สมัคร Cloudflare — dash.cloudflare.com
3. ผูกบัตรในบัญชี Cloudflare — เข้าหน้า R2 แล้วกดเพิ่มบัตร ที่อยู่หน้านั้นคือ https://dash.cloudflare.com/?to=/:account/r2/overview

คิดชื่อร้านเป็นภาษาอังกฤษไว้ล่วงหน้า ใช้ได้เฉพาะ a-z, 0-9 และขีดกลาง เช่น somchai-shop ชื่อนี้จะกลายเป็นที่อยู่เว็บของร้าน และ เปลี่ยนทีหลังลำบาก

เปิดเทอร์มินัล

จะได้หน้าต่างสำหรับพิมพ์คำสั่งขึ้นมา พิมพ์บรรทัดนี้แล้วกด Enter

npx webneedee

ครั้งแรกอาจถามว่าจะติดตั้งแพ็กเกจไหม ให้ตอบ y แล้ว Enter

12 ขั้น ทีละขั้น

ข้อความข้างล่างนี้คือ ผลจากการรันจริง ไม่ได้เขียนขึ้นเอง ชื่อร้านในตัวอย่างคือ wnd-doc ของคุณจะเป็นชื่อที่คุณตั้ง

ขั้นที่ 1 — ตรวจเครื่องและบอกสิ่งที่ต้องเตรียม

  Webneedee — ตัวติดตั้งร้านค้าออนไลน์

[1/12] ตรวจเครื่องและบอกสิ่งที่ต้องเตรียม
  ✓ Node 24.13.1

┌─ ต้องเตรียมก่อนไปต่อ
│ 1. บัญชี Cloudflare (สมัครฟรีที่ dash.cloudflare.com)
│ 2. บัตรเครดิตหรือเดบิตผูกไว้ในบัญชีนั้น
│
│    ที่เก็บรูป (R2) ของ Cloudflare บังคับผูกบัตรก่อนใช้
│    แม้ร้านทั่วไปจะใช้อยู่ในโควตาฟรีและไม่ถูกเรียกเก็บเงินก็ตาม
│    ถ้ายังไม่ได้ผูก ไปผูกก่อนแล้วค่อยกลับมารันคำสั่งนี้ใหม่ได้
│
│ ระหว่างทางจะมีสองจังหวะที่ต้องใช้มือ: หน้าล็อกอิน Cloudflare ในเบราว์เซอร์
│ และการยืนยันเรื่องบัตร (ถ้ายังไม่เคยผูก) นอกนั้นรอได้ยาว ๆ ราว 5-10 นาที
└─

  พร้อมเริ่มติดตั้งไหม [Y/n]:

ทำอะไร: กด Enter เฉย ๆ เพื่อไปต่อ (หรือพิมพ์ n แล้ว Enter เพื่อหยุด)

ถ้าเห็นข้อความว่า Node เก่าเกินไป แปลว่ายังไม่ได้ติดตั้ง Node หรือได้ตัวเก่ามา ไปโหลดตัวใหม่ที่ nodejs.org แล้วปิดเทอร์มินัล เปิดใหม่ แล้วรันคำสั่งเดิม

ขั้นที่ 2 — ตั้งชื่อร้าน

[2/12] ตั้งชื่อร้าน
  ชื่อนี้จะกลายเป็นที่อยู่เว็บของร้าน เช่น https://ชื่อร้าน.xxx.workers.dev
  ใช้ได้เฉพาะ a-z, 0-9 และขีดกลาง — เปลี่ยนทีหลังลำบาก คิดให้ดีก่อน
  ชื่อร้าน (ภาษาอังกฤษ): wnd-doc
  ✓ ร้าน wnd-doc · ฐานข้อมูล wnd-doc-db · ที่เก็บรูป wnd-doc-media

ทำอะไร: พิมพ์ชื่อร้านภาษาอังกฤษ แล้ว Enter

จะเห็นอะไร: บรรทัด ✓ บอกชื่อสามอย่างที่จะถูกสร้าง — ตัวร้าน ฐานข้อมูล และที่เก็บรูป ถ้าพิมพ์ชื่อภาษาไทย จะขึ้นว่า ชื่อภาษาไทยใช้เป็นที่อยู่เว็บไม่ได้ — พิมพ์เป็นภาษาอังกฤษ แล้วถามใหม่

ขั้นที่ 3 — ตั้งรหัสผ่านหลังบ้าน

[3/12] ตั้งรหัสผ่านหลังบ้าน
  รหัสนี้ใช้เข้าหน้าจัดการร้าน (/admin) ทั้งร้านมีรหัสเดียว
  กด Enter เฉย ๆ เพื่อให้สุ่มรหัสที่ปลอดภัยให้
  รหัสผ่านหลังบ้าน:
  พิมพ์รหัสเดิมอีกครั้ง:
  ✓ รับรหัสแล้ว

ทำอะไร: พิมพ์รหัสที่อยากใช้ (ตัวอักษรจะไม่ขึ้นบนจอ นี่ปกติ) แล้วพิมพ์ซ้ำอีกครั้ง หรือ กด Enter เฉย ๆ สองครั้ง เพื่อให้ระบบสุ่มรหัสที่ปลอดภัยให้ แล้วจะขึ้นว่า ✓ สุ่มรหัสให้แล้ว — จะแสดงให้จดตอนติดตั้งเสร็จ

รหัสนี้สำคัญที่สุดในร้าน ใครได้ไปคือเข้าหลังบ้านได้ทั้งหมด จดไว้ในที่ปลอดภัย อย่าส่งทางแชต

ขั้นที่ 4 — วางไฟล์ร้านและติดตั้งเครื่องมือ

[4/12] วางไฟล์ร้านและติดตั้งเครื่องมือ
  คัดลอกไฟล์ร้านไปที่ C:\Users\somchai\wnd-doc
  ✓ คัดลอกเสร็จ
  ติดตั้งเครื่องมือ (ครั้งเดียว ใช้เวลาสักครู่)

added 42 packages in 11s
  ✓ ติดตั้งเครื่องมือเสร็จ

ทำอะไร: ไม่ต้องทำอะไร รอ

จะเห็นอะไร: ที่อยู่โฟลเดอร์ที่ไฟล์ร้านถูกวางไว้ — จดไว้ จะได้กลับมาที่นี่ได้ทีหลัง ขั้นนี้ช้าที่สุดในบรรดาขั้นที่ไม่เกี่ยว Cloudflare เพราะต้องโหลดเครื่องมือจากอินเทอร์เน็ต

ขั้นที่ 5 — เข้าสู่ระบบ Cloudflare

[5/12] เข้าสู่ระบบ Cloudflare
  กำลังเปิดเบราว์เซอร์ให้อนุญาต — กด Allow แล้วกลับมาที่หน้าต่างนี้
  ✓ เข้าสู่ระบบแล้วในชื่อ somchai@example.com
  ✓ ใช้บัญชี Somchai's Account

ทำอะไร: เบราว์เซอร์จะเด้งขึ้นมาเอง ให้เข้าสู่ระบบ Cloudflare แล้ว กดปุ่ม Allow เสร็จแล้วกลับมาที่หน้าต่างเทอร์มินัล

ถ้าบัญชีของคุณมีหลายหน่วยงาน จะขึ้นรายการให้เลือกแบบนี้ ให้พิมพ์หมายเลขแล้ว Enter

  บัญชีนี้มีหลายหน่วยงาน เลือกหน่วยงานที่จะติดตั้งร้าน
     1. Somchai's Account
     2. บริษัท สมชายพาณิชย์
  เลือกหมายเลข (1):

ขั้นที่ 6 — สร้างฐานข้อมูล (D1)

[6/12] สร้างฐานข้อมูล (D1)
  สร้างฐานข้อมูล wnd-doc-db
  ✓ สร้างแล้ว (id e72cefbf-aff3-4021-8f7b-bd46e4236a56)

ทำอะไร: ไม่ต้องทำอะไร

ฐานข้อมูลคืออะไร: ที่เก็บสินค้า คำสั่งซื้อ และสมาชิกของร้านคุณ ถ้ารันซ้ำทีหลัง จะขึ้นว่า มีฐานข้อมูล … อยู่แล้ว ใช้ตัวเดิม — ข้อมูลเดิมไม่หาย

ขั้นที่ 7 — สร้างที่เก็บรูป (R2)

[7/12] สร้างที่เก็บรูป (R2)
  ✓ สร้างที่เก็บรูป wnd-doc-media แล้ว

ถ้ายังไม่ได้ผูกบัตร จะไม่ผ่าน และเห็นแบบนี้แทน

┌─ ต้องผูกบัตรก่อนถึงจะใช้ที่เก็บรูปได้
│ Cloudflare ยังไม่เปิดใช้ R2 ให้บัญชีนี้ เพราะยังไม่มีบัตรผูกไว้
│ R2 บังคับผูกบัตรทุกบัญชี แม้จะใช้อยู่ในโควตาฟรีก็ตาม
│
│ เปิดหน้านี้แล้วกดเพิ่มบัตร:  https://dash.cloudflare.com/?to=/:account/r2/overview
│
│ ร้านที่มีรูปไม่กี่พันรูปจะอยู่ในโควตาฟรี (10 GB) ไม่ถูกเรียกเก็บเงิน
└─

  ผูกบัตรเรียบร้อยแล้ว ลองใหม่ไหม [Y/n]:

ทำอะไร: เปิดลิงก์นั้นในเบราว์เซอร์ ผูกบัตร แล้วกลับมากด Enter เพื่อลองใหม่ หรือพิมพ์ n เพื่อหยุดไว้ก่อน แล้วค่อยรัน npx webneedee ใหม่ทีหลัง — ของที่สร้างไปแล้วไม่ถูกสร้างซ้ำ

ขั้นที่ 8 — บันทึกการตั้งค่า

[8/12] บันทึกการตั้งค่าลง wrangler.jsonc
  ย้าย ADMIN_PASSWORD และ SESSION_SECRET ไปเป็นความลับ (ค่าสำหรับรันในเครื่องอยู่ใน .dev.vars)
  ✓ บันทึกแล้ว — ลูกค้าไม่ต้องเปิดไฟล์นี้แก้เองเลย

ทำอะไร: ไม่ต้องทำอะไร — และ ไม่ต้องเปิดไฟล์ไหนไปแก้เองทั้งสิ้น

ขั้นที่ 9 — สร้างตารางในฐานข้อมูล

[9/12] สร้างตารางในฐานข้อมูล
ฐานข้อมูล wnd-doc-db (บนคลาวด์)

  ยังไม่ได้รัน  0001-init.sql
  ยังไม่ได้รัน  0002-variants.sql
  ...
กำลังรัน 0001-init.sql ... เรียบร้อย
กำลังรัน 0002-variants.sql ... เรียบร้อย
  ...
อัปเดตฐานข้อมูลครบแล้ว 9 รายการ
  ✓ ฐานข้อมูลพร้อมแล้ว

ทำอะไร: ไม่ต้องทำอะไร ตัวเลขรายการอาจไม่เท่า 9 ถ้าเป็นเวอร์ชันใหม่กว่านี้ — ไม่ผิด

ขั้นที่ 10 — ใส่หน้าเนื้อหาตั้งต้น

[10/12] ใส่หน้าเนื้อหาตั้งต้น
รัน seed-pages.sql กับ wnd-doc-db (บนคลาวด์)
เรียบร้อย
  ✓ ใส่หน้าเนื้อหาตั้งต้นแล้ว

ได้อะไร: หน้าวิธีสั่งซื้อและชำระเงิน · การจัดส่ง · การเปลี่ยน/คืนสินค้า · นโยบายความเป็นส่วนตัว เขียนไว้ให้แล้วแบบกลาง ๆ แก้เป็นของร้านคุณได้ทีหลัง

ขั้นที่ 11 — เปิดร้านขึ้นคลาวด์

[11/12] เปิดร้านขึ้นคลาวด์
🌀 Building list of assets...
🌀 Found 90 new or modified static assets to upload. Proceeding with upload...
Uploaded 90 of 90 assets
✨ Success! Uploaded 90 files (2.67 sec)
Uploaded wnd-doc (7.76 sec)
Deployed wnd-doc triggers (1.06 sec)
  https://wnd-doc.somchai.workers.dev
  ✓ ร้านขึ้นแล้วที่ https://wnd-doc.somchai.workers.dev

จะเห็นอะไร: ข้อความภาษาอังกฤษเยอะ ๆ พร้อมไอคอนน่ารัก ๆ — ปกติ ไม่ต้องอ่าน ดูแค่บรรทัด ✓ ร้านขึ้นแล้วที่ … บรรทัดเดียว นั่นคือที่อยู่เว็บร้านของคุณ

ขั้นที่ 12 — ใส่ความลับและตรวจร้าน

[12/12] ใส่ความลับและตรวจร้าน
  ✓ ตั้งกุญแจเซ็นคุกกี้แล้ว
  ✓ ตั้งรหัสผ่านหลังบ้านแล้ว
  ✓ หน้าร้านเปิดได้
  ✓ หลังบ้านพร้อมให้เข้าสู่ระบบแล้ว

สี่บรรทัดนี้ต้องเป็น ✓ ครบทั้งสี่ ถึงจะเรียกว่าติดตั้งสำเร็จ

หน้าจบ — จดสามอย่างนี้ไว้

  ติดตั้งเสร็จแล้ว

  หน้าร้าน   https://wnd-doc.somchai.workers.dev
  หลังบ้าน   https://wnd-doc.somchai.workers.dev/admin
  ไฟล์ร้าน   C:\Users\somchai\wnd-doc


┌─ ต้องทำต่อก่อนเปิดขายจริง
│ 1. เข้าหลังบ้าน แล้วตั้งชื่อร้าน ช่องทางติดต่อ และบัญชีรับเงิน
│
│ 2. ปิดโหมดทดลอง OTP
│    ตอนนี้ OTP_TEST_MODE ยังเป็น "1" ซึ่งแสดงรหัส OTP บนหน้าจอ
│    ใครก็เข้าเป็นสมาชิกคนอื่นได้ ต้องตั้งค่าผู้ให้บริการ SMS แล้วเปลี่ยนเป็น "0" ก่อนเปิดร้าน
│
│ 3. ใส่สินค้าจริง แล้วลองสั่งซื้อครบหนึ่งรอบด้วยตัวเองก่อนบอกลูกค้า
└─

  คำสั่งที่ใช้บ่อย — รันในโฟลเดอร์ร้าน
    npm run deploy   อัปเดตร้านจริงหลังแก้ไฟล์
    npm run setup    เตรียมฐานข้อมูลในเครื่อง (ทำครั้งเดียว ก่อนใช้ npm run dev)
    npm run dev      เปิดร้านในเครื่องเพื่อลองแก้ก่อนขึ้นจริง

ถ้าให้ระบบสุ่มรหัสผ่านให้ รหัสจะแสดงในหน้านี้ จดทันที ปิดหน้าต่างแล้วจะไม่เห็นอีก

เปิดเว็บดูว่าได้อะไรมา

หน้าร้านที่เพิ่งติดตั้ง

เปิดที่อยู่ "หน้าร้าน" ในเบราว์เซอร์ จะเห็นแบบนี้

ชื่อร้านยังเป็น "ร้านตัวอย่าง" และยังไม่มีสินค้า — ถูกต้องแล้ว ร้านที่เพิ่งติดตั้งจะยังว่าง เพราะระบบไม่ใส่สินค้าปลอมลงในร้านจริงของคุณ

หน้าหลังบ้าน

เปิดที่อยู่ "หลังบ้าน" (ที่อยู่หน้าร้าน ตามด้วย /admin) จะเจอช่องใส่รหัสผ่าน

ใส่รหัสผ่านที่ตั้งไว้ในขั้นที่ 3 แล้วกดเข้าสู่ระบบ จะเจอหน้าภาพรวมแบบนี้

เห็นแถบสีฟ้า "ตั้งค่าร้านให้เสร็จก่อนเปิดขาย" แปลว่าติดตั้งสำเร็จแล้วจริง กด เริ่มเลย → เพื่อไปต่อที่ เปิดร้านให้พร้อมขาย

พังกลางทางทำยังไง

พิมพ์คำสั่งเดิมซ้ำ — npx webneedee

ตัวติดตั้งจะเดินต่อจากจุดที่ค้าง ของที่สร้างบน Cloudflare ไปแล้วจะไม่ถูกสร้างซ้ำ ถ้าโฟลเดอร์ร้านถูกสร้างไปแล้ว ให้เข้าไปในโฟลเดอร์นั้นก่อน แล้วค่อยรันคำสั่ง

cd ชื่อโฟลเดอร์ร้าน
npx webneedee

รันซ้ำบนร้านที่เปิดขายอยู่แล้ว ปลอดภัยไหม

ปลอดภัย ตัวติดตั้งจะ ไม่แตะของเดิม

ถ้าร้านเคยขึ้นเว็บไปแล้วแต่ตั้งรหัสผ่านไม่สำเร็จ (เข้าหลังบ้านแล้วเจอหน้าแจ้งเตือนแทนช่องใส่รหัส) การรันซ้ำจะตรวจเจอแล้วตั้งรหัสให้ใหม่เอง

ปัญหาที่เจอบ่อยตอนติดตั้ง

ปัญหาอื่น ๆ ดูที่ ปัญหาที่เจอบ่อย

ตัวเลือกเพิ่มเติมของคำสั่ง

ปกติไม่ต้องใช้ แต่มีให้

npx webneedee [ตัวเลือก]

  --name <ชื่อ>      ชื่อร้าน (a-z 0-9 ขีดกลาง) ไม่ใส่จะถามตอนรัน
  --dir <โฟลเดอร์>   โฟลเดอร์ที่จะวางไฟล์ร้าน ค่าตั้งต้นคือชื่อร้าน
  --from <โฟลเดอร์>  เอาไฟล์ร้านมาจากที่นี่ (สำหรับคนพัฒนาตัวติดตั้ง)
  --yes              ไม่ต้องถามยืนยันตอนเริ่ม
  --password-stdin   อ่านรหัสผ่านหลังบ้านจากช่องทางอื่นแทนการถาม
  --skip-deploy      ทำทุกอย่างยกเว้นเปิดร้านขึ้นคลาวด์
  --help             แสดงวิธีใช้

ขั้นถัดไป: เปิดร้านให้พร้อมขาย