อัปโหลดไฟล์เว็บด้วย SFTP และ FileZilla บน BrewInTH ทีละขั้น

หลายคนทำเว็บมาก่อนยุค AI คุ้นกับการเปิด FileZilla ลากไฟล์จากเครื่องขึ้นโฮสต์ แล้วกดรีเฟรชดูผล พอย้ายมาใช้แพลตฟอร์มใหม่ก็อยากได้วิธีเดิมที่มือจำได้ หรือบางคนให้ ChatGPT เขียนไฟล์ HTML มาให้ แต่ไม่มี coding agent ที่จะนำขึ้นเว็บเอง

BrewInTH มีทางนี้ให้ คือ SFTP ต่อด้วย FileZilla, WinSCP หรือ Cyberduck วางไฟล์ลงโฟลเดอร์ของโปรเจกต์ แล้วกดปุ่มเดียวให้เป็นเวอร์ชันใหม่ของเว็บ บทความนี้พาทำตั้งแต่เปิดใช้ ตั้งค่า FileZilla ทีละช่อง สิ่งที่ต้องใส่ในโฟลเดอร์สำหรับเว็บ static และแอป ไปจนถึงข้อควรระวังที่คนใช้ FTP แบบเดิมมักพลาด

สรุปสั้นก่อนอ่าน
🔑 เปิด SFTP ได้ที่แท็บ ไฟล์ ของโปรเจกต์ ตั้งรหัสผ่านอย่างน้อย 12 ตัว มีทั้งตัวอักษรและตัวเลข
🖥️ ต่อด้วย FileZilla, WinSCP หรือ Cyberduck ใช้ Host, Port, ผู้ใช้ ตามที่คอนโซลแสดง (Port 2022)
📂 เว็บ static วาง index.html ไว้ชั้นบนสุด แอปวางโค้ดทั้งโปรเจกต์รวม lockfile
🚀 วางไฟล์แล้วเว็บยังไม่เปลี่ยน ต้องกด เผยแพร่ไฟล์จาก SFTP ทุกครั้ง
🛡️ ครั้งแรกที่เชื่อมต่อ เทียบลายนิ้วมือ host key กับคอนโซลก่อนกด OK

SFTP คืออะไร ต่างจาก FTP ยังไง

SFTP (SSH File Transfer Protocol) คือการส่งไฟล์ผ่านช่องทางที่เข้ารหัสทั้งหมด ทั้งรหัสผ่านและตัวไฟล์ ต่างจาก FTP แบบเก่าที่ส่งรหัสผ่านเป็นข้อความธรรมดา โปรแกรมที่คนไทยใช้กันเยอะอย่าง FileZilla รองรับ SFTP อยู่แล้ว แค่เลือกโปรโตคอลให้ถูก

บน BrewInTH แต่ละโปรเจกต์มีบัญชี SFTP และโฟลเดอร์ของตัวเอง เห็นได้เฉพาะไฟล์ของโปรเจกต์นั้น ไม่มีทางเดินออกไปโฟลเดอร์ของคนอื่น

ต่างจากโฮสต์แบบเดิมตรงไหน

บนโฮสต์แบบเดิม ไฟล์ที่ลากขึ้นไปคือเว็บที่ออนไลน์ทันที บน BrewInTH โฟลเดอร์ SFTP เป็น ที่พักไฟล์ ก่อน เมื่อพร้อมแล้วจึงกด เผยแพร่ไฟล์จาก SFTP ระบบนำไฟล์ชุดนั้นไปสร้างเวอร์ชันใหม่ (release) เหมือนอัปโหลดผ่านหน้าเว็บ ข้อดีคือระหว่างที่อัปโหลดทีละไฟล์ เว็บจริงไม่พังครึ่ง ๆ กลาง ๆ และทุกเวอร์ชันอยู่ในประวัติการเผยแพร่ ย้อนกลับได้

4 ขั้น จาก FileZilla ถึงเว็บจริง

1. เปิดใช้ SFTP ในแท็บไฟล์

เข้าคอนโซล เปิดโปรเจกต์ แล้วไปที่แท็บ ไฟล์ เลื่อนลงจะเจอกล่อง SFTP: อัปโหลดด้วยโปรแกรม FTP กรอกช่อง รหัสผ่าน SFTP (อย่างน้อย 12 ตัว มีทั้งตัวอักษรและตัวเลข) แล้วกด เปิดใช้ SFTP

รหัสผ่านนี้แยกจากรหัสเข้าคอนโซล ตั้งให้ยาวและไม่ซ้ำกับที่อื่น เก็บไว้ในโปรแกรมจัดการรหัสผ่านก็ได้ ระบบไม่แสดงรหัสให้ดูอีก ถ้าลืม ตั้งใหม่ได้ที่ ตั้งรหัสผ่านใหม่ / ปิด SFTP ในกล่องเดียวกัน

หลังเปิดใช้ กล่องจะแสดงข้อมูลเชื่อมต่อ ได้แก่ Host, Port, ผู้ใช้ และ URL พร้อมปุ่ม คัดลอก ทุกบรรทัด และ ลายนิ้วมือ host key (ตรวจตอนเชื่อมต่อครั้งแรก)

2. ตั้งค่า FileZilla

ใน FileZilla เปิดเมนู File › Site Manager กด New site แล้วกรอก:

• Protocol: เลือก SFTP - SSH File Transfer Protocol (ไม่ใช่ FTP ธรรมดา)
• Host: คัดลอกจากคอนโซล ส่วนใหญ่เป็น www.brewinth.com แต่ถ้าโปรเจกต์อยู่เครื่องให้บริการอื่น คอนโซลจะแสดงชื่อเครื่องนั้น ใช้ตามที่คอนโซลบอกเสมอ
• Port: 2022
• Logon Type: Normal
• User: คัดลอกจากช่อง ผู้ใช้ ซึ่งคือชื่อโปรเจกต์แบบ slug เช่น brew-ab12c
• Password: รหัสที่ตั้งในขั้นที่ 1

กด Connect ครั้งแรก FileZilla จะถามว่ารู้จักเครื่องนี้ไหม (Unknown host key) ให้เทียบลายนิ้วมือ SHA256:… ในหน้าต่างนั้นกับบรรทัด ลายนิ้วมือ host key ในคอนโซล ถ้าตรงกัน ติ๊กให้จำไว้แล้วกด OK ถ้า ไม่ตรง อย่ากด OK ปิดหน้าต่างแล้วทักทีมงาน

ใช้ WinSCP ก็กรอกแบบเดียวกัน เลือก File protocol เป็น SFTP ส่วนบน Mac ใช้ Cyberduck เลือก SFTP (SSH File Transfer Protocol) แล้วใส่ Server, Port, Username, Password ชุดเดิม

3. วางไฟล์ลงโฟลเดอร์หลัก

ฝั่งขวาของ FileZilla คือโฟลเดอร์ของโปรเจกต์บน BrewInTH ฝั่งซ้ายคือเครื่องคุณ ลากไฟล์จากซ้ายไปขวา โดยวางไว้ที่ ชั้นบนสุด ของโฟลเดอร์ ไม่ใช่ซ้อนในโฟลเดอร์ชื่อโปรเจกต์อีกชั้น

กลับมาที่คอนโซล กด โหลดใหม่ ในกล่อง SFTP จะเห็นรายการ ไฟล์ในโฟลเดอร์ SFTP พร้อมขนาดและเวลาที่แก้ไข ตรวจว่าไฟล์ครบก่อนไปขั้นถัดไป

4. กดเผยแพร่ไฟล์จาก SFTP

กด เผยแพร่ไฟล์จาก SFTP ระบบตอบกลับว่าส่งกี่ไฟล์เข้าคิว (เว็บ static) หรือแพ็กโค้ดกี่ไฟล์เป็น ZIP แล้วส่ง build (แอป) แล้วมีลิงก์ ดูสถานะที่แท็บการเผยแพร่ ให้ตามดูจนเวอร์ชันใหม่ออนไลน์

แก้ไฟล์ครั้งถัดไปก็วนขั้น 3 กับ 4 ลากไฟล์ที่แก้ทับของเดิมใน FileZilla แล้วกดเผยแพร่อีกครั้ง

ใส่อะไรในโฟลเดอร์ เว็บ static กับแอปไม่เหมือนกัน

เว็บ static (HTML, CSS, JavaScript, รูป)

• ต้องมี index.html อยู่ชั้นบนสุด ไม่งั้นระบบไม่ยอมเผยแพร่
• ไฟล์อื่นวางตามโครงสร้างเดิม เช่น css/style.css, images/logo.png ที่อยู่บนเว็บจะเป็น path เดียวกัน
• ไฟล์หรือโฟลเดอร์ที่ชื่อขึ้นต้นด้วยจุด เช่น .htaccess หรือ .git ไม่ถูกนำขึ้นเว็บ
• ถ้าใช้ React, Vue หรือ Vite ที่ build เป็นเว็บ static ให้ build ในเครื่องก่อน แล้วอัปโหลดเฉพาะของในโฟลเดอร์ dist (หรือ build) ไม่ใช่โค้ดต้นฉบับ

แอป (Node.js, PHP, Python และอื่น ๆ)

• ใส่โค้ดทั้งโปรเจกต์ที่ชั้นบนสุด เช่น package.json พร้อม package-lock.json หรือ composer.json พร้อม composer.lock หรือ requirements.txt
• เมื่อกดเผยแพร่ ระบบแพ็กทั้งโฟลเดอร์เป็น ZIP แล้วส่งไป build แบบเดียวกับการอัปโหลด ZIP จากหน้าเว็บ
• ไม่ต้องอัปโหลด node_modules หรือ vendor ขั้น build ติดตั้ง dependency ให้เองจาก lockfile ไฟล์ยิ่งน้อย การอัปโหลดและ build ยิ่งเร็ว
• อย่าวางไฟล์ .env ที่มีรหัสผ่านจริง ลงโฟลเดอร์ ใส่ค่าลับใน secrets ของโปรเจกต์แทน (วิธีใช้ secrets)

ขนาดและจำนวนไฟล์

ไฟล์เดี่ยวใหญ่ได้ถึง 512 MB ทั้งโฟลเดอร์ไม่เกิน 10,000 ไฟล์ และพื้นที่ของโฟลเดอร์ SFTP อิงกับพื้นที่ไฟล์ของแพ็กเกจที่ใช้อยู่ ถ้าเผยแพร่แล้วขึ้นว่าพื้นที่ไม่พอ ลบไฟล์ที่ไม่ใช้ออกจากโฟลเดอร์ หรือดูที่หน้า การใช้งาน

ข้อควรระวังสำหรับคนที่ใช้ FTP มานาน

1. วางไฟล์แล้วต้องกดเผยแพร่ นี่คือจุดที่คนพลาดบ่อยที่สุด ลากไฟล์เสร็จแล้วเปิดเว็บไม่เห็นอะไรเปลี่ยน เพราะยังไม่ได้กด เผยแพร่ไฟล์จาก SFTP
2. ลบไฟล์ใน SFTP ไม่ได้ลบออกจากเว็บ สำหรับเว็บ static การเผยแพร่จะเพิ่มและแทนไฟล์ที่ชื่อตรงกัน ไฟล์บนเว็บดูและจัดการได้ในรายการไฟล์ของแท็บ ไฟล์
3. อย่าซ้อนโฟลเดอร์ ถ้าลากทั้งโฟลเดอร์ mysite ขึ้นไป ไฟล์จะอยู่ที่ mysite/index.html ระบบหา index.html ชั้นบนสุดไม่เจอ ให้เปิดเข้าไปในโฟลเดอร์แล้วลากเฉพาะของข้างใน
4. ไฟล์ที่ผู้ใช้อัปโหลดผ่านเว็บไม่ได้อยู่ในโฟลเดอร์นี้ ถ้าแอปเก็บรูปที่ลูกค้าอัปโหลด ต้องใช้พื้นที่เก็บไฟล์ถาวร /bw-data ซึ่งเป็นคนละที่กับโฟลเดอร์ SFTP
5. ปิด SFTP เมื่อไม่ใช้ ใน ตั้งรหัสผ่านใหม่ / ปิด SFTP มีปุ่ม ปิด SFTP ไฟล์ในโฟลเดอร์ยังอยู่ เปิดใหม่ได้ทุกเมื่อ

ใช้ SFTP คู่กับ AI ได้ไหม

ได้ ตัวอย่างที่ใช้บ่อยคือให้ ChatGPT หรือ Claude ในแชตเขียนไฟล์ให้ เซฟลงเครื่อง แล้วลากขึ้นด้วย FileZilla ถ้าอยากให้ AI จัดไฟล์ให้พร้อมสำหรับวิธีนี้ ลองส่งข้อความแบบนี้:

ช่วยจัดไฟล์เว็บนี้ให้พร้อมอัปโหลดผ่าน SFTP ขึ้น BrewInTH:
- ถ้าเป็นเว็บ static: ให้ index.html อยู่ชั้นบนสุด ใช้ path แบบสัมพัทธ์ (เช่น css/style.css)
- ถ้าเป็นแอป: บอกไฟล์ที่ต้องมี (เช่น package.json + lockfile) และคำสั่ง start
- ห้ามใส่รหัสผ่านหรือ API key ลงในไฟล์ ให้อ่านจาก environment variable แทน
- สรุปรายชื่อไฟล์ทั้งหมดที่ฉันต้องอัปโหลด และไฟล์ที่ไม่ต้องอัปโหลด

ถ้ามี coding agent อย่าง Claude Code หรือ Codex อยู่แล้ว การส่งลิงก์และ token ให้ AI นำขึ้นเองจะสะดวกกว่า เพราะ AI อ่าน log และแก้ปัญหาต่อได้ทันที SFTP เหมาะกับคนที่อยากคุมไฟล์เองหรือแก้ไฟล์เล็ก ๆ ทีละไฟล์

คำถามที่พบบ่อย

ใช้ FTP ธรรมดา (พอร์ต 21) ได้ไหม

ไม่ได้ BrewInTH เปิดเฉพาะ SFTP ที่พอร์ต 2022 ซึ่งเข้ารหัสทั้งหมด ใน FileZilla ให้เลือกโปรโตคอล SFTP

ต่อไม่ติด ขึ้นว่ารหัสผ่านผิด

ตรวจว่า User เป็น slug ของโปรเจกต์ตามช่อง ผู้ใช้ ในคอนโซล ไม่ใช่ชื่อบัญชีที่ใช้ล็อกอินคอนโซล ถ้ายังไม่ผ่าน ตั้งรหัสใหม่ใน ตั้งรหัสผ่านใหม่ / ปิด SFTP แล้วลองอีกครั้ง

ไม่เห็นกล่อง SFTP ในแท็บไฟล์

กล่องนี้แสดงเมื่อเครื่องที่โปรเจกต์อยู่เปิดบริการ SFTP ไว้ ถ้าไม่เห็น ทักทีมงานที่เมนู ซัพพอร์ตลูกค้า

กดเผยแพร่แล้วขึ้นว่าต้องมี index.html

โปรเจกต์ถูกตั้งเป็นเว็บ static แต่ไม่มี index.html ที่ชั้นบนสุด มักเกิดจากการลากทั้งโฟลเดอร์ขึ้นไปจนไฟล์ซ้อนอยู่ข้างใน ย้ายไฟล์ขึ้นมาชั้นบนแล้วกดเผยแพร่อีกครั้ง

เผยแพร่แล้วเว็บพัง ย้อนกลับได้ไหม

ได้ ทุกครั้งที่กดเผยแพร่คือเวอร์ชันใหม่ในแท็บ การเผยแพร่ เลือกเวอร์ชันก่อนหน้าแล้วกด กลับมาใช้เวอร์ชันนี้

สรุป

SFTP บน BrewInTH ให้คุณทำงานแบบที่มือคุ้น ลากไฟล์ด้วย FileZilla หรือ WinSCP แต่ปลอดภัยกว่า FTP แบบเดิม และมีประวัติเวอร์ชันให้ย้อนกลับได้ จำไว้แค่สามอย่าง: เลือกโปรโตคอล SFTP พอร์ต 2022, วางไฟล์ที่ชั้นบนสุด และกด เผยแพร่ไฟล์จาก SFTP ทุกครั้งที่อยากให้เว็บเปลี่ยน

เริ่มโปรเจกต์แรกฟรี →

บทความที่เกี่ยวข้อง

• หากเคยนำเว็บขึ้น BrewInTH แล้ว มีแก้ไขไฟล์ จะนำขึ้น BrewInTH ยังไง
• ย้ายเว็บจากโฮสต์เดิมมา BrewInTH ทีละขั้น ไม่ให้เว็บล่มและข้อมูลไม่หาย