OpenClaw: วิธีเผยแพร่เว็บไซต์อย่างปลอดภัย1 min read
Reading Time: 3 minutesOpenClaw สามารถช่วยสร้างเว็บไซต์ได้ แต่ไม่ใช่โฮสต์ของเว็บไซต์ ขอให้ตัวแทนสร้างไฟล์ต้นฉบับ รันไซต์ในเครื่อง และแก้ไขสิ่งที่เบราว์เซอร์เปิดเผย จากนั้นปรับใช้ผ่านแพลตฟอร์มโฮสติ้งที่คุณควบคุม หรือวางโปรเจ็กต์ไว้ในอาร์ติแฟกต์ AgentGrid.io ที่ตรวจสอบได้ และเผยแพร่หลังจากได้รับอนุมัติจากมนุษย์เท่านั้น ภาพหน้าจอการแชท พอร์ตในเครื่อง หรือ URL สิ่งประดิษฐ์ส่วนตัวไม่ใช่ URL การเปิดตัวสำหรับลูกค้า
คู่มือนี้มีไว้สำหรับผู้สร้างที่ใช้เอเจนต์ OpenClaw พร้อมด้วยเครื่องมือไฟล์และคำสั่ง การตัดสินใจที่สำคัญที่สุดคือขอบเขตสิทธิ์: ตัวแทนสามารถร่างและทดสอบโดยไม่ต้องถือครองข้อมูลประจำตัวการผลิต หากทีมจำเป็นต้องตรวจสอบเวอร์ชันที่ใช้ร่วมกันก่อนเผยแพร่ เริ่มต้นเวิร์กสเปซ AgentGrid.io และเผยแพร่ต่อเป็นการดำเนินการที่ได้รับอนุมัติแยกต่างหาก
วิธีทำให้เว็บไซต์ที่สร้างโดย OpenClaw มีความมั่นคง
เตรียม AgentGrid.io ก่อน จากนั้นให้สิทธิ์การเข้าถึงแบบจำกัดแก่ OpenClaw และตรวจสอบผลลัพธ์ภายนอกแชท
ขั้นตอนที่ 1: เลือกพื้นที่ทำงาน AgentGrid.io
ลงชื่อเข้าใช้ที่ app.agentgrid.io แล้วเลือกทีมและพื้นที่ทำงานสำหรับเว็บไซต์นี้ ใช้พื้นที่ทำงานแบบจำกัดหากแบบร่างมีเนื้อหาของลูกค้า แผนว่าใครจะเป็นผู้ทบทวนก่อนการปรับใช้สู่สาธารณะ

ขั้นตอนที่ 2: เชื่อมต่อเอเจนต์ OpenClaw นี้ด้วยสิทธิ์แบบมีขอบเขต
ในการสนทนา OpenClaw ให้พูดว่า: Use agentgrid.io for this website. If you can run shell commands, run npx @animaapp/cli@latest login and return the verification URL and code. Do not ask for my password or publish anything. อนุมัติการตรวจสอบด้วยตนเองด้วยพื้นที่ทำงานที่ต้องการและอ่านและเขียน ออกจากการแบ่งปันและเผยแพร่เว้นแต่จำเป็น ขอให้ OpenClaw ทำงาน npx @animaapp/cli@latest workspaces และยืนยันว่าพื้นที่ทำงานที่ต้องการแสดงอยู่ในรายการ สำหรับตัวแทนแบบไม่ต้องดูแล ให้ใช้การดูแลระบบตัวแทน → เชิญตัวแทน ยกเลิกการเลือกความสามารถในการแชร์และเผยแพร่เริ่มต้น เลือกพื้นที่ทำงาน จากนั้นส่งลิงก์แบบครั้งเดียวแบบส่วนตัว การสร้างคำเชิญเพียงอย่างเดียวไม่สามารถเชื่อมโยงได้ หากปิดใช้งานการดำเนินการเชลล์ ให้ใช้การนำเข้าด้วยตนเองแทนที่จะอ้างว่ามีการเข้าถึงโดยตรง
ขั้นตอนที่ 3: สร้างและตรวจสอบอาร์ติแฟกต์ ไม่ใช่แค่บันทึก
มอบหมายงานที่มีอยู่ให้ OpenClaw: สร้างไซต์ย่อยแบบโต้ตอบพร้อมกำหนดการ การ์ดวิทยากร และลิงก์การลงทะเบียน ใช้สำเนาและเนื้อหาที่ได้รับอนุมัติ ตรวจสอบหน้าในเครื่อง และวางโปรเจ็กต์บน AgentGrid.io เป็นแอปในพื้นที่ทำงานที่เราเลือก อย่าเผยแพร่มัน ให้มันใช้คำสั่งนำเข้า CLI npx @animaapp/cli@latest create -t import --from ./project --artifact-type app --workspace <workspace-id> พร้อมโฟลเดอร์จริงและรหัสพื้นที่ทำงานที่ค้นพบ เปิด URL สิ่งประดิษฐ์ที่ส่งคืน และตรวจสอบไฟล์และดูตัวอย่าง ไซต์ต้องมีจุดเริ่มต้นเช่น index.html; หลีกเลี่ยงการอัปโหลดความลับ node_modulesหรือสร้างเอาต์พุต หาก OpenClaw ไม่สามารถเชื่อมต่อได้ ให้นำโฟลเดอร์โปรเจ็กต์หรือ ZIP ที่สร้างขึ้นแล้วนำเข้าผ่านเมนูใหม่ของ AgentGrid.io นั่นเป็นสิ่งประดิษฐ์ใหม่ ไม่ใช่กระจกเงาที่มีชีวิต สำหรับงานที่เกิดซ้ำ ให้มอบ URL สิ่งประดิษฐ์ที่มีอยู่แก่ตัวแทน และขอให้อัปเดตสิ่งประดิษฐ์นั้น จากนั้นตรวจสอบประวัติเพื่อยืนยันว่าข้อมูลระบุตัวตนใดที่เปลี่ยนแปลง

ขั้นตอนที่ 4: อนุมัติการเผยแพร่และตรวจสอบ URL ที่เผยแพร่อยู่
ตรวจสอบการอ้างสิทธิ์ ข้อมูลพื้นฐานเกี่ยวกับการเข้าถึง พฤติกรรมบนอุปกรณ์เคลื่อนที่ และลิงก์ปลายทาง จากนั้นใช้ Publish ใน AgentGrid.io หรือให้คำแนะนำการเผยแพร่ที่ชัดเจนแก่ OpenClaw หากคุณจงใจให้ความสามารถนั้น เปิด URL สาธารณะในเบราว์เซอร์ที่ออกจากระบบแล้วยืนยันว่ามีเวอร์ชันปัจจุบันอยู่ ลิงก์ส่วนตัวใช้ไม่ได้กับผู้เยี่ยมชมที่ไม่ระบุชื่อ เผยแพร่การอัปเดตที่ได้รับอนุมัติแต่ละครั้ง หากตัวแทนอัตโนมัติควรหยุดการเปลี่ยนแปลงไซต์ ให้ลบสิทธิ์การเข้าถึงในการดูแลระบบตัวแทน งานก่อนหน้านี้ยังคงอยู่ในประวัติศาสตร์

OpenClaw ทำอะไรได้บ้าง และอะไรที่ไม่ทำ
OpenClaw’s เอกสารการเริ่มต้นใช้งาน อธิบายตัวแทนที่เข้าถึงผ่านเกตเวย์และช่องทางที่กำหนดค่า เครื่องมือของมันสามารถทำงานกับไฟล์และคำสั่งได้เมื่อเปิดใช้งาน เครื่องมือเบราว์เซอร์ช่วยตรวจสอบหน้าต่างๆ แต่แดชบอร์ดเกตเวย์หรือเซสชันเบราว์เซอร์ไม่ใช่การปรับใช้เว็บไซต์สาธารณะ OpenClaw’s การอนุมัติจากผู้บริหาร และการตั้งค่าแซนด์บ็อกซ์มีความสำคัญเนื่องจากเอเจนต์ที่มีความสามารถคำสั่งอาจแก้ไขไฟล์หรือเรียกใช้ CLI การปรับใช้ของโฮสต์ ให้สิทธิ์การเข้าถึงที่จำเป็นสำหรับขั้นตอนปัจจุบันเท่านั้น
ขั้นตอนที่ 1: สร้างงานเว็บไซต์ที่มีข้อจำกัด
ยืนยันว่าตัวแทนมีพื้นที่ทำงานของโปรเจ็กต์ รวมถึงไฟล์และเครื่องมือดำเนินการที่จำเป็น เลือกโฟลเดอร์หรือพื้นที่เก็บข้อมูลที่สะอาด ไม่ใช่โฮมไดเร็กตอรี่ทั้งหมดของคุณ จัดหาโลโก้ รูปภาพ สำเนา และข้อเท็จจริงทางธุรกิจที่ได้รับอนุมัติ อย่าให้โทเค็นการปรับใช้หรือข้อมูลลูกค้าสำหรับการสร้างแลนดิ้งเพจเริ่มต้น ตั้งชื่อเฟรมเวิร์กหรือขอไซต์แบบคงที่หากไม่ต้องการฟังก์ชันฝั่งเซิร์ฟเวอร์
พรอมต์ตัวอย่าง: “สร้างไซต์หน้าเดียวที่ตอบสนองสำหรับร้านซ่อมจักรยานในพื้นที่ในโฟลเดอร์ไซต์จักรยาน รวมบริการ ชั่วโมง พื้นที่ให้บริการ และคำกระตุ้นการตัดสินใจขอใบเสนอราคา ใช้ความหมาย HTML และ CSS ที่เข้าถึงได้ ทำเครื่องหมายที่อยู่ ราคา และคำรับรองที่ไม่ได้รับการยืนยันเป็นตัวยึดตำแหน่ง เก็บแหล่งที่มาและสินทรัพย์สาธารณะไว้ด้วยกัน บอกวิธีดูตัวอย่างและดำเนินการตรวจสอบที่มีอยู่ ห้ามปรับใช้ เผยแพร่ หรือใช้ หนังสือรับรอง”
ขอให้ OpenClaw ส่งคืนจุดเริ่มต้น แผนผังไดเร็กทอรี การขึ้นต่อกัน คำสั่งติดตั้ง/บิวด์ และรายการไฟล์ที่เปลี่ยนแปลง แอปแบบคงที่อาจใช้ index.html; แอปเฟรมเวิร์กต้องการรายการและสคริปต์ ขอ README เพื่ออธิบายตัวอย่างในเครื่องและเอาต์พุตบิลด์ของโฮสต์เป้าหมาย ยืนยันว่าเนื้อหาใช้ URL ที่เกี่ยวข้องหรือสาธารณะ ไม่ใช่เส้นทางที่มีเฉพาะในเครื่องของตัวแทนเท่านั้น
ขั้นตอนที่ 2: ทดสอบในเบราว์เซอร์และแก้ไขข้อบกพร่องจริง
รันเซิร์ฟเวอร์ภายในเครื่องหรือคำสั่งการพัฒนาที่บันทึกไว้ของโปรเจ็กต์ จากนั้นเปิดไซต์ที่เรนเดอร์ด้วยตัวคุณเอง ตรวจสอบความกว้างแคบและกว้าง การนำทางด้วยแป้นพิมพ์ คอนทราสต์ ตัวเลือกรูปภาพ การสะกด ลิงก์ และลักษณะการทำงานของหมายเลขโทรศัพท์ ตรวจสอบข้อผิดพลาดของคอนโซลและภาพที่หายไป เรียกใช้การทดสอบและรุ่นที่ใช้งานจริงเมื่อโปรเจ็กต์รองรับ ภาพหน้าจอจากตัวแทนมีประโยชน์ในการวางแนว แต่ใช้ไม่ได้แทนการโต้ตอบกับแบบฟอร์มและเมนู
หากคำขอใบเสนอราคาเป็นเพียงแบบฟอร์มที่มีสไตล์ ให้ถามว่าการส่งไปอยู่ที่ไหน เชื่อมต่อบริการแบบฟอร์มที่ได้รับการตรวจสอบแล้วหรือลบการอ้างสิทธิ์ที่ใช้งานได้ ทดสอบด้วยการส่งที่ไม่เป็นอันตรายและตรวจสอบการส่งมอบ ตรวจสอบเวลาทำการ สถานที่ ใบอนุญาตสำหรับรูปภาพ และข้อความความเป็นส่วนตัวของร้านค้ากับเจ้าของร้าน สอบถามตัวแทนสำหรับการแก้ไขเฉพาะและเปรียบเทียบตัวอย่างใหม่กับตัวอย่างเก่า หลีกเลี่ยงข้อความแจ้ง “ทำให้ดีขึ้น” ที่จะแทนที่สำเนาที่ได้รับอนุมัติอย่างเงียบๆ
แก้ไขพร้อมท์: “บนวิวพอร์ตขนาดโทรศัพท์ ให้การ์ดบริการสามารถอ่านได้และทำให้การนำทางสามารถเข้าถึงได้ด้วยแป้นพิมพ์ แทนที่รายละเอียดการติดต่อของตัวยึดตำแหน่งด้วยข้อเท็จจริงที่ได้รับอนุมัติโดยย่อเท่านั้น รายงานแต่ละไฟล์ที่เปลี่ยนแปลง ผลการทดสอบ และตัวบล็อกที่เหลือ ห้ามแตะต้องการกำหนดค่าโฮสต์หรือเผยแพร่” เก็บเวอร์ชันที่ได้รับอนุมัติไว้ในการควบคุมแหล่งที่มาเมื่อเป็นไปได้
ขั้นตอนที่ 3: เลือกขอบเขตการปรับใช้
- โฮสต์ที่มีอยู่: คอมมิตแหล่งที่มาที่ได้รับการตรวจสอบ กำหนดค่าเฟรมเวิร์กและสร้างเอาต์พุตในโฮสต์ของคุณ และปรับใช้ผ่านการผสานรวมพื้นที่เก็บข้อมูลของโฮสต์นั้นหรือ CLI บริการนี้ให้ URL สาธารณะ เก็บคีย์ API ไว้ในความลับที่จัดการโดยโฮสต์ ไม่ใช่ในเบราว์เซอร์ JavaScript
- สิ่งประดิษฐ์ที่แชร์ AgentGrid.io: เชื่อมต่อเอเจนต์ที่มีความสามารถสั่งการเฉพาะเมื่อคุณอนุมัติเท่านั้น หรือนำเข้าโฟลเดอร์/ZIP ด้วยตนเอง ให้ผู้ทำงานร่วมกันตรวจสอบอาร์ติแฟกต์ของแอปส่วนตัวก่อนที่บุคคลจะเผยแพร่ ประวัติของอาร์ติแฟกต์และการแสดงตัวอย่างช่วยในการอนุมัติเฉพาะเวอร์ชัน
อย่าอธิบายว่า OpenClaw Control UI เป็นโฮสต์ของเว็บไซต์ พอร์ตที่ส่งต่อในเครื่องสามารถเปิดเผยกระบวนการพัฒนาเพื่อดูตัวอย่างได้ แต่ไม่ใช่ไซต์สาธารณะที่คงทน หากคุณให้ CLI การปรับใช้หรือการเข้าถึงเบราว์เซอร์แก่ตัวแทนในบัญชีโฮสติ้งที่ลงชื่อเข้าใช้ ให้ถือว่าสิ่งนั้นเป็นการเข้าถึงที่ใช้งานจริงและได้รับการอนุมัติอย่างชัดเจนสำหรับการดำเนินการ
ขั้นตอนที่ 4: เชื่อมต่อหรือนำเข้าโครงการที่ได้รับการตรวจทานแล้ว
สำหรับเส้นทางที่ใช้ร่วมกัน การเชื่อมต่อที่บันทึกไว้ของ AgentGrid.io จะใช้ CLI และขั้นตอนการอนุมัติ ในสภาพแวดล้อม OpenClaw ที่สามารถใช้คำสั่งได้ คำสั่งเริ่มต้นคือ npx @animaapp/cli@การเข้าสู่ระบบล่าสุด; อนุมัติลิงก์การยืนยันด้วยตนเอง และเลือกพื้นที่ทำงานและความสามารถที่ต้องการ อย่าส่งรหัสผ่านในการแชทหรือเชื่อมต่อตัวแทนที่มีสิทธิ์ในการเผยแพร่ในวงกว้างเพียงเพื่อสร้างฉบับร่าง หากการเชื่อมต่อไม่พร้อมใช้งาน ให้ใช้เอกสารประกอบ โฟลเดอร์หรือการนำเข้า ZIP.
เตรียมซอร์สแพ็กเกจขนาดเล็ก: ยกเว้น node_modules, ไพรเวตคีย์, ไฟล์สภาพแวดล้อมโลคัล และพื้นที่ทำงานที่ไม่เกี่ยวข้อง รวมจุดเริ่มต้น สินทรัพย์ และการกำหนดค่าใดๆ ที่จำเป็นในการสร้าง ใน AgentGrid.io ให้เลือกพื้นที่ทำงานปลายทางและสร้างหรือนำเข้าสิ่งประดิษฐ์ของแอป ตรวจสอบไฟล์และดูตัวอย่างที่แสดงผล การอัปโหลดที่สำเร็จไม่ได้พิสูจน์ว่าเส้นทาง API กระบวนการเซิร์ฟเวอร์ หรือการผสานรวมแบบฟอร์มมีการถ่ายโอนอย่างถูกต้อง
พรอมต์แฮนด์ออฟ: “หลังจากที่ฉันให้สิทธิ์การเข้าถึง ให้สร้างสิ่งประดิษฐ์แอปที่ไม่ได้เผยแพร่จากไซต์จักรยานในพื้นที่ทำงาน AgentGrid.io ที่ระบุ รวมเฉพาะแหล่งที่มาและเนื้อหาสาธารณะ ส่งคืน URL ส่วนตัว ระบุคุณสมบัติรันไทม์ที่ขาดหายไป และอัปเดตสิ่งประดิษฐ์เดียวกันนั้นเพื่อการแก้ไข อย่าเชิญตัวแทนอื่น เผยแพร่ หรือเลือกพื้นที่ทำงานอื่น” หากไม่สามารถเข้าถึงเวิร์กสเปซได้ ให้หยุดแทนที่จะเปลี่ยนปลายทางโดยไม่แจ้งให้ทราบ
ขั้นตอนที่ 5: ตรวจสอบและเผยแพร่เวอร์ชันที่ได้รับอนุมัติ
ขอให้เพื่อนร่วมทีมทดสอบตัวอย่างอาร์ติแฟกต์ โดยเฉพาะเลย์เอาท์บนมือถือ รายละเอียดการติดต่อ แบบฟอร์มใบเสนอราคา และการเข้าถึงด้วยคีย์บอร์ด กระทบยอดความคิดเห็นในอาร์ติแฟกต์หรือแหล่งเก็บข้อมูลเดียวกัน และระบุการแก้ไขที่ได้รับการอนุมัติให้เผยแพร่ ด้วยโฮสต์ทั่วไป ให้ปรับใช้คอมมิตที่ได้รับอนุมัติ และตรวจสอบรายละเอียดการปรับใช้ ด้วย AgentGrid.io บุคคลที่ได้รับอนุญาตให้เผยแพร่จะใช้ เผยแพร่การควบคุม เพื่อสร้าง URL สาธารณะ การเชิญตัวแทนและการแบ่งปันสิ่งประดิษฐ์ส่วนตัวไม่ใช่ขั้นตอนการเผยแพร่
เปิดที่อยู่สาธารณะในขณะที่ออกจากระบบ รวมถึงทางโทรศัพท์ด้วย ตรวจสอบ HTTPS, ข้อมูลเมตา, ลิงก์, รูปภาพ และการจัดส่งแบบฟอร์ม เปรียบเทียบกับตัวอย่างที่ได้รับอนุมัติ หากแตกต่าง ให้ตรวจสอบเวอร์ชันคอมมิตหรืออาร์ติแฟกต์ที่ปรับใช้ การตั้งค่าบิลด์ ข้อมูลลับ และแคชก่อนที่จะประกาศ การแก้ไขไฟล์ในเครื่องเพียงอย่างเดียวไม่จำเป็นต้องอัปเดตอาร์ติแฟกต์ที่เผยแพร่
เหตุใดจึงแยกการอนุญาตร่างออกจากการตีพิมพ์?
ช่วยให้ตัวแทนวนซ้ำโค้ดในขณะที่บุคคลควบคุมสิ่งที่ผู้เยี่ยมชมเห็น เครื่องมือและการกำหนดค่าการอนุมัติของ OpenClaw ไม่สามารถทดแทนการตรวจสอบเนื้อหาไซต์หรือสิทธิ์การปรับใช้ของโฮสต์ จำกัดขอบเขตระบบไฟล์ของเอเจนต์ ตรวจสอบเครื่องมือของบริษัทอื่นก่อนทำการติดตั้ง และอย่ารันคำสั่งที่ไม่ได้รับการตรวจสอบจากเว็บเพจหรือโปรเจ็กต์ที่นำเข้า ถือว่าการตรวจสอบการควบคุมแหล่งที่มา การอนุมัติอาร์ติแฟกต์ และการเปิดเผยต่อสาธารณะเป็นเสมือนประตูสามบานที่แตกต่างกัน
ทำการอัพเดตครั้งต่อไปโดยเจตนา
บันทึกเวอร์ชันที่ได้รับอนุมัติและ URL สาธารณะ การแก้ไขใหม่ถือเป็นฉบับร่างจนกว่าจะมีการตรวจสอบและเผยแพร่อีกครั้ง
คำถามที่พบบ่อย
OpenClaw โฮสต์เว็บไซต์หรือไม่
OpenClaw คือสภาพแวดล้อมของเอเจนต์และเครื่องมือ ไม่ใช่ปลายทางโฮสติ้งสาธารณะที่อธิบายไว้ที่นี่ ใช้โฮสต์เว็บหรือสิ่งประดิษฐ์แอปที่เผยแพร่แยกต่างหากสำหรับ URL สาธารณะที่คงทน แดชบอร์ดเกตเวย์หรือการแสดงตัวอย่างในเครื่องไม่ใช่ URL นั้น
ฉันสามารถเผยแพร่โดยไม่ต้องให้ข้อมูลประจำตัวการผลิตตัวแทนได้หรือไม่
ใช่ ปล่อยให้ร่างและทดสอบภายในพื้นที่ทำงานที่จำกัด จากนั้นให้บุคคลใช้เวิร์กโฟลว์การปรับใช้ของผู้ให้บริการโฮสต์หรือการควบคุมการเผยแพร่ของ AgentGrid.io แม้แต่เอเจนต์ที่ช่วยเตรียมการปรับใช้งานก็ไม่ควรได้รับความลับที่ไม่ต้องการ
จะเกิดอะไรขึ้นหากอาร์ติแฟกต์ที่นำเข้าดูถูกต้องแต่แบบฟอร์มล้มเหลว
ตรวจสอบว่าไซต์เดิมใช้เส้นทางเซิร์ฟเวอร์ ตัวแปรสภาพแวดล้อม หรือบริการของบุคคลที่สามที่ไม่ได้ถ่ายโอน ทดสอบการส่งผลงานจริงในสภาพแวดล้อมใหม่ก่อนเปิดตัว อย่าถือว่าการแสดงตัวอย่างด้วยภาพเป็นการยืนยันการทำงาน
การเปลี่ยนแปลงในโฟลเดอร์ OpenClaw ของฉันจะอัปเดตไซต์ที่ใช้งานอยู่หรือไม่
ไม่โดยอัตโนมัติในกรณีทั่วไป การอัปเดตจะขึ้นอยู่กับขั้นตอนการสร้างและปรับใช้ของโฮสต์ หรือการอัปเดตอย่างชัดเจนและเผยแพร่อาร์ติแฟกต์แยกต่างหากอีกครั้ง บันทึกเวอร์ชันแหล่งที่มาซึ่งแต่ละ URL ที่เผยแพร่อยู่เป็นตัวแทน
สำหรับการเปรียบเทียบแฮนด์ออฟ โปรดดูคำแนะนำของเราที่ คำแนะนำในการเผยแพร่เว็บไซต์ Muse. ที่ คู่มือการเผยแพร่การออกแบบ Claude ครอบคลุมจุดเริ่มต้นอื่น ในขณะที่ วิธีที่ตัวแทนสำรวจและเผยแพร่แอปด้วย Anima แสดงสิ่งประดิษฐ์ที่ได้รับการตรวจสอบแล้วซึ่งย้ายไปเผยแพร่ สิ่งเหล่านี้มีขั้นตอนการทำงานที่แตกต่างกัน ไม่ใช่คุณลักษณะของผลิตภัณฑ์ที่สามารถใช้แทนกันได้

Figma
Adobe XD
Blog


