วิธี deploy แอป localhost สู่สาธารณะโดยไม่ต้องใช้ VPS

แอปของคุณรันได้แล้ว คุณเปิด dev server ขึ้นมา เปิด http://localhost:3000แล้วมันก็ทำงานได้อย่างที่ควรจะเป็น จากนั้นมีคนขอลิงก์ และคุณก็พบว่า URL บนหน้าจอของคุณไม่มีความหมายกับใครเลยนอกจากตัวคุณเอง

มีสามวิธีที่จะให้ URL สาธารณะกับแอป localhost โดยไม่ต้องใช้ VPS บวกอีกหนึ่งตัวเลือกที่เร็วกว่าเมื่ออีกฝ่ายอยู่ในเครือข่ายภายในของคุณ และการเลือกระหว่างวิธีเหล่านี้ไม่ใช่คำถามเรื่องเครื่องมือ แต่เป็นคำถามว่าแอปต้องเข้าถึงได้นานแค่ไหน และมันรันที่อื่นนอกจากแล็ปท็อปของคุณได้หรือไม่ ด้านล่างคือแต่ละเส้นทาง คำสั่งที่ทำให้ได้ URL และสิ่งที่จะทำให้ URL นั้นหยุดทำงานอย่างชัดเจน

TL;DR (สรุปย่อ)

• มีคนใน Wi-Fi ของคุณต้องการดู: ผูก dev server เข้ากับทุกอินเทอร์เฟซเครือข่ายแล้วบอก IP ใน LAN ของคุณ พร้อมใช้ในไม่กี่วินาที และตายทันทีที่ผู้เยี่ยมชมออกจากเครือข่ายของคุณ
• คุณต้องการลิงก์ที่ใครก็เปิดได้ในหนึ่งชั่วโมงข้างหน้า: รัน tunnel (cloudflared, ngrok, localtunnel, localhost.run) ได้ URL HTTPS สาธารณะในราวหนึ่งนาที ไม่ต้องแก้เราเตอร์ และมันจะตายไปพร้อมกับโปรเซสที่เริ่มมัน
• มันต้องทำงานต่อไปตอนที่แล็ปท็อปของคุณปิดฝา: ผลักแอปขึ้นแพ็กเกจโฮสติ้งฟรี วิธีนี้ตัดแอปออกจากแล็ปท็อปของคุณ และนำกฎใหม่ ๆ มาด้วย ทั้งเรื่องบัตรเครดิต การใช้งานเชิงพาณิชย์ และข้อมูลของคุณจะรอดจากการรีสตาร์ตหรือไม่
• แอปของคุณไม่ต้องใช้โค้ดฝั่งเซิร์ฟเวอร์ตอนมีคำขอ: build แล้ววางผลลัพธ์แบบ static บน static host มันอยู่ออนไลน์ได้โดยไม่ต้องใช้แล็ปท็อปของคุณ และไม่มีโปรเซสของแอปที่ต้องปลุก ตราบใดที่บัญชีและขีดจำกัดการใช้งานของโฮสต์ยังรองรับ
• ค่าเริ่มต้นหนึ่งอย่างที่ควรรู้: next dev และ python -m http.server ฟังทุกอินเทอร์เฟซเครือข่ายอยู่แล้วโดยไม่ต้องใส่แฟล็กใด ๆ ถ้าคุณคิดว่า dev server ของคุณเป็นส่วนตัวและเห็นได้แค่บนแล็ปท็อปของคุณ มันไม่ใช่

เส้นทางไหนเหมาะกับแอปของคุณ

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

แถวไหนเปิดให้คุณบ้างขึ้นอยู่กับสามสิ่งที่คุณตรวจสอบได้ในโปรเจกต์ของคุณเอง:

• แอปต้องให้โค้ดเซิร์ฟเวอร์ของคุณรันตอนมีคำขอหรือไม่? เส้นทางของ Flask หรือ FastAPI, endpoint ใน server.js หรือตรรกะฝั่งเซิร์ฟเวอร์ที่ขึ้นกับคำขอแต่ละครั้ง ต้องใช้โฮสต์ฝั่งเซิร์ฟเวอร์ โค้ดเซิร์ฟเวอร์ที่รันตอน build ไม่ได้ตัดการ deploy แบบ static ออกไปโดยอัตโนมัติ: Next.js Server Components รันได้ระหว่าง next buildและ GET Route Handler แบบ static สามารถ prerender ได้ ถ้าทุกคำขอตอนรันไทม์เสิร์ฟเป็นไฟล์ static ได้ หรือส่งตรงจากเบราว์เซอร์ไปยัง API ภายนอกได้ เส้นทาง static ก็ยังเปิดอยู่
• มันอ่านหรือเขียนไฟล์ที่ต้องเก็บไว้หรือไม่? ไฟล์ฐานข้อมูล (.db, .sqlite) โฟลเดอร์อัปโหลด ไฟล์ JSON ที่มันแก้ไข ถ้าใช่ ให้ตรวจสอบโมเดลการจัดเก็บของโฮสต์ก่อน deploy web service ฟรีของ Render และอินสแตนซ์ฟรีของ Koyeb ใช้พื้นที่เก็บข้อมูลในเครื่องแบบชั่วคราว ส่วน Vercel Functions มีระบบไฟล์แบบอ่านอย่างเดียวพร้อมพื้นที่ /tmp ชั่วคราว ให้เก็บ state ถาวรไว้ในโวลุ่มที่คงทน ฐานข้อมูล หรือ object storage แทนที่จะสันนิษฐานว่าดิสก์ในเครื่องของแอปจะอยู่รอด
• มันต้องใช้ secret ตอนรันไทม์หรือไม่? คีย์ในไฟล์ .env ใช้ได้เลยโดยไม่ต้องแก้อะไรในสองเส้นทางแรก เพราะแอปยังรันอยู่บนเครื่องของคุณ ส่วนอีกสองเส้นทางคุณต้องกรอกมันใหม่ในการตั้งค่า environment ของผู้ให้บริการ และมันต้องไม่อยู่ใน repo ที่คุณ push ขึ้นไป

แชร์ในเครือข่ายของคุณเอง

next dev ฟังทุกอินเทอร์เฟซเครือข่ายบนเครื่องของคุณอยู่แล้ว (นั่นคือความหมายทั้งหมดของ 0.0.0.0 ที่คุณเห็น) และ python -m http.serverก็เช่นกัน ทั้งคู่ไม่ต้องใส่แฟล็ก ดังนั้น dev server ที่คุณรันอยู่ตอนนี้ก็น่าจะเข้าถึงได้จากโทรศัพท์ของคุณบน Wi-Fi เดียวกันอยู่แล้ว

Next.js ระบุ -H เป็นวิธีเปลี่ยนชื่อโฮสต์นั้น โดยมี ค่าเริ่มต้นเป็น 0.0.0.0และเอกสารของ Python บอกว่าโมดูล ผูกตัวเองเข้ากับทุกอินเทอร์เฟซ เว้นแต่คุณจะใส่ --bind 127.0.0.1นั่นทำให้นี่เป็นวิธีที่เร็วที่สุดในการแชร์แอป localhost: ไม่ต้องมีบัญชี ไม่ต้องติดตั้ง ไม่ต้อง deploy ส่วน dev server ยอดนิยมตัวอื่นต้องบอกมันเอง

# Already listening on all interfaces. Nothing to add.
next dev
python -m http.server 8000
streamlit run app.py

# Needs the flag.
npm run dev -- --host             # Vite
flask run --host=0.0.0.0
uvicorn main:app --host 0.0.0.0   # FastAPI

เอกสารของ Vite: server.host มีค่าเริ่มต้นเป็น localhostและรับ --host ทาง CLI หรือ server.host: '0.0.0.0' ในไฟล์คอนฟิก Uvicorn มีค่าเริ่มต้นเป็น 127.0.0.1ซึ่งครอบคลุม FastAPI ด้วย เพราะมันคือตัวที่รัน FastAPI ส่วน Streamlit ปล่อย server.address ไว้ไม่ตั้งค่า และเอกสารคอนฟิกของมันระบุว่า การตั้งค่านี้จะจำกัดการเข้าถึง ให้เหลือแค่ที่อยู่นั้นที่เดียว: ไม่ตั้งค่าหมายถึงไม่จำกัด

จากนั้นคุณต้องมีที่อยู่สำหรับส่งให้ นั่นคือ IP ของเครื่องคุณเองในเครือข่ายภายใน ไม่ใช่ localhost:

# macOS
ipconfig getifaddr en0

# Linux
hostname -I

# Windows (PowerShell)
ipconfig | findstr IPv4

ส่ง http://<that-address>:3000 ให้ผู้เยี่ยมชมของคุณ แล้วเขาก็เข้าได้เลย ข้อจำกัดคือรูปร่างของเส้นทางทั้งเส้น: ที่อยู่นั้นไม่มีความหมายนอกเครือข่ายของคุณ ทันทีที่เขาไปอยู่บน Wi-Fi อื่น ใช้เครือข่ายมือถือ หรือกลับบ้าน ลิงก์นั้นก็ตายสำหรับเขา

หมายเหตุ: ถ้าคำสั่งรันได้ปกติแต่อีกอุปกรณ์ยังเชื่อมต่อไม่ได้ เกือบทุกครั้งคือไฟร์วอลล์ของระบบปฏิบัติการ ไม่ใช่คำสั่ง เอกสารไฟร์วอลล์ของ Apple บอกว่า macOS จะแสดงการแจ้งเตือนสำหรับแอปที่คุณยังไม่อนุญาต และ ปฏิเสธการเชื่อมต่อจนกว่าคุณจะดำเนินการส่วน Windows จะถามว่าใช้โปรไฟล์เครือข่ายแบบไหน โดยแยก กฎสำหรับเครือข่ายส่วนตัวและสาธารณะ ออกจากกัน ให้เลือกส่วนตัวบนเครือข่ายที่บ้านหรือที่ทำงาน อย่าเลือกสาธารณะเด็ดขาด

วางไว้หลัง tunnel

Tunnel คือโปรแกรมเล็ก ๆ ที่รันคู่กับแอปของคุณและให้ที่อยู่ HTTPS สาธารณะกับมัน คำสั่งเดียวก็ได้ tunnel ฟรีไปยัง localhost ในราวหนึ่งนาที และควรรู้ไว้แต่แรกว่า URL จะตายทันทีที่คำสั่งนั้นหยุด:

cloudflared tunnel --url http://localhost:3000

เราเตอร์ของคุณไม่ต้องเปลี่ยนอะไรเลย เพราะทิศทางที่การเชื่อมต่อวิ่งไป เครื่องของคุณเปิดการเชื่อมต่อขาออกไปยัง edge ของผู้ให้บริการ แบบเดียวกับที่เบราว์เซอร์ของคุณเปิดเพื่อโหลดหน้าเว็บใด ๆ แล้วผู้ให้บริการก็เปิดมันค้างไว้และดันคำขอขาเข้ากลับมาทางนั้น พอร์ตขาเข้าฝั่งคุณยังปิดอยู่ นั่นคือเหตุผลที่มันใช้ได้บน Wi-Fi โรงแรม ฮอตสปอตมือถือ และเน็ตบ้านที่คุณไม่ได้ควบคุมเราเตอร์

หมายเหตุ: กรณีสุดท้ายนั้นคุ้มค่าที่จะตรวจสอบสักหกสิบวินาทีก่อนจะหันไปคิดเรื่อง port forwarding เปิดหน้าสถานะของเราเตอร์ หา WAN IP ที่มันรายงาน แล้วเทียบกับ IP สาธารณะจริงของคุณจากบริการ "what is my IP" ใดก็ได้ ถ้า WAN IP อยู่ในช่วง 100.64.0.0/10CGNAT น่าจะเป็นสาเหตุ ถ้า WAN IP กับ IP สาธารณะแค่ต่างกัน คุณก็รู้ว่ามี NAT อีกชั้นอยู่ด้านบน แต่นั่นอาจเป็น CGNAT หรือ double NAT ธรรมดาก็ได้ ไม่ว่ากรณีไหน port forwarding บนเราเตอร์ตัวนี้อย่างเดียวอาจไม่พอ ช่วงที่อยู่นั้นถูก RFC 6598 สงวนไว้เป็นพื้นที่ที่อยู่ที่ใช้ร่วมกันซึ่งคือสิ่งที่ ISP ของคุณเอามาใช้กับคุณเมื่อที่อยู่หมด

ตัวเลือกต่าง ๆ ต่างกันตรงที่มันขออะไรจากคุณก่อนเป็นหลัก

Cloudflare quick tunnel คือคำสั่งด้านบน: ไม่ต้องมีบัญชี ไม่ต้องมีโดเมน ได้ซับโดเมนแบบสุ่มบน trycloudflare.com Cloudflare จำกัดไว้ที่ 200 คำขอที่กำลังดำเนินการ เกินกว่านั้นจะตอบกลับ 429ไม่รองรับ Server-Sent Events และระบุในเอกสารเดียวกันว่า tunnel ฟรีมีไว้สำหรับทดสอบและพัฒนา ไม่ใช่สำหรับ deploy เว็บไซต์ production

ngrok ต้องสมัครก่อน แล้วค่อย ngrok http 3000. แพ็กเกจฟรีปัจจุบัน ให้โควตาการใช้งานครั้งเดียว 5 $ ที่ไม่ต่ออายุรายเดือน endpoint ออนไลน์สูงสุด 3 ตัว โอนข้อมูล 1 GB คำขอ HTTP/S 20,000 ครั้ง และหน้าแจ้งเตือนคั่นกลางที่ผู้เยี่ยมชมของคุณต้องคลิกผ่าน คุณยังได้โดเมนสำหรับพัฒนาฟรีที่ถูกกำหนดให้อัตโนมัติ ซึ่ง ngrok ประกาศในปี 2023 เพื่อยุติข้อร้องเรียนเก่าที่ว่า URL เปลี่ยนทุกครั้งที่รีสตาร์ต

localtunnel ไม่ต้องสมัครและไม่ต้องติดตั้งอะไรนอกจาก npx: npx localtunnel --port 3000คุณจะได้ซับโดเมนแบบสุ่ม และ README ระบุชัดว่า --subdomain เป็นการขอชื่อ แต่ไม่รับประกันว่าจะได้.

localhost.run ไม่ติดตั้งอะไรเลย เพราะใช้ SSH client ที่ระบบปฏิบัติการของคุณมีอยู่แล้ว: ssh -R 80:localhost:3000 localhost.runเอกสารของมันระบุว่า ไม่จำเป็นต้องดาวน์โหลด และไม่ต้องตั้งค่าบัญชีสำหรับโดเมนฟรี

VS Code มีฟีเจอร์นี้ในแผง Ports สะดวกถ้าคุณอยู่ในเอดิเตอร์อยู่แล้ว มันต้องล็อกอินด้วย GitHub หรือ Microsoft และค่าเริ่มต้นจะทำให้คุณสะดุด: พอร์ตที่ forward จะเป็นแบบส่วนตัวซึ่งหมายความว่าผู้เยี่ยมชมของคุณจะถูกขอให้ล็อกอินด้วยบัญชีของคุณจนกว่าคุณจะเปลี่ยนพอร์ตเป็นสาธารณะ (ใช้ได้กับเพื่อนร่วมทีม แต่ไร้ประโยชน์กับลูกค้าที่แค่อยากคลิกลิงก์)

Tailscale Funnel ก็ทำได้เช่นกัน โดยมีข้อจำกัดสองข้อที่มักเป็นตัวตัดสิน: URL อยู่ได้แค่บนโดเมนของ tailnet ของคุณเอง และมัน ฟังได้เฉพาะพอร์ต 443, 8443 และ 10000.

ไม่ว่าจะเลือกอะไร ให้ชัดเจนว่าคุณแจกอะไรออกไป ด้วย tunnel สาธารณะที่ไม่มีการควบคุมการเข้าถึง ทุกอย่างที่ dev server เสิร์ฟจะเข้าถึงได้โดยใครก็ตามที่มี URL นั้น รวมถึงเส้นทางที่คุณไม่เคยลิงก์ไว้และอินเทอร์เฟซดีบักที่คุณเปิดทิ้งไว้ ใช้ได้กับเดโมสิบห้านาที แต่ไม่ค่อยดีนักกับ URL ที่คุณวางลงใน Discord สาธารณะ

การหมดอายุทำให้คุณงง เพราะมันดูเหมือนแอปพัง เส้นทางด่วนส่วนใหญ่ในที่นี้ยังพึ่งพาซอฟต์แวร์ tunnel ที่รันบนแล็ปท็อปของคุณ: หยุด cloudflared, ngrok, localtunnel หรือเซสชัน SSH ของ localhost.run แล้วการ forward ก็หยุด Tailscale Funnel เป็นข้อยกเว้นเมื่อคุณรันด้วย --bgซึ่งทำให้คอนฟิกของ Funnel รันอยู่เบื้องหลังและกู้คืนหลังรีบูต ไม่มีตัวไหนเสิร์ฟแอปในเครื่องของคุณได้ตอนที่แล็ปท็อปออฟไลน์ คุณปล่อย tunnel รันไว้ได้เป็นวัน ๆ และมันจะทำงานได้จนกว่าจะปิดฝาหรือชนเพดานคำขอ

Tunnel เป็นเครื่องมือที่ถูกต้องสำหรับเดโม และเป็นเครื่องมือที่ผิดสำหรับโฮสติ้ง: uptime ของมันคือ uptime ของแล็ปท็อปคุณ

ปล่อยให้แอปออกจากเครื่องของคุณ

นี่คือเส้นทางแรกที่แล็ปท็อปของคุณไม่ใช่ตัวแบกอีกต่อไป และเป็นเส้นทางแรกที่ข้อกำหนดสำคัญกว่าเครื่องมือ สิ่งที่ยุติมันในที่นี้ไม่ใช่นาฬิกา แต่เป็นการหลับเมื่อไม่ใช้งาน การรีเซ็ตระบบไฟล์ หรือแพ็กเกจที่ตัดสินว่าแอปของคุณไม่ใช่สิ่งที่มันอยากให้อยู่บนอินสแตนซ์ฟรี

ตัวเลือกด้านล่างมีตั้งแต่แพ็กเกจฟรีแบบต่อเนื่องไปจนถึงช่วงทดลองสั้น ๆ บางเจ้าให้แอปออนไลน์ได้ไม่มีกำหนดภายในขีดจำกัด บางเจ้าหยุดหลังช่วงทดลองที่กำหนดไว้ หรือต้องมีบัญชีแบบเสียเงินสำหรับการประมวลผล ตรวจสอบกฎเรื่องการเรียกเก็บเงิน การหลับ และการจัดเก็บก่อน deploy

ข้อกำหนดของแพ็กเกจฟรีด้านล่างตรวจสอบกับหน้าราคาหรือเอกสารของผู้ให้บริการแต่ละรายเมื่อวันที่ 7 กันยายน 2026

"ไม่ระบุ" หมายถึงหน้าเว็บของผู้ให้บริการเองไม่ได้ตอบคำถามนี้สำหรับแพ็กเกจฟรี ให้ถือว่าไม่ทราบ ไม่ใช่ใช่หรือไม่ใช่

สามแถวในนั้นควรดูให้ละเอียดขึ้นก่อนเริ่ม Fly.io ไม่มีแพ็กเกจฟรีแบบต่อเนื่อง: ช่วงทดลองสิ้นสุดหลัง 2 ชั่วโมงเครื่องหรือ 7 วัน Koyeb มีอินสแตนซ์ฟรี แต่ขั้นตอนสมัครและการเรียกเก็บเงินต้องระวังก่อน deploy Hugging Face ยังให้ Static Spaces ฟรี ขณะที่ Gradio และ Docker Space ใหม่ต้องใช้บัญชีแบบเสียเงิน ยกเว้นข้อยกเว้นจำกัดของ ZeroGPU ส่วน Railway ไม่อยู่ในรายการเตือนนี้อีกต่อไป: หลังทดลอง 30 วันพร้อมเครดิต 5 $ ตอนนี้จะย้ายไปแพ็กเกจ Free 0 $ พร้อมเครดิตทรัพยากร 1 $ ต่อเดือน

จากนั้นก็มาถึงคำถามเรื่องข้อมูล ซึ่งเป็นจุดที่แอปที่ทำงานได้เงียบ ๆ กลายเป็นแอปที่พัง web service ฟรีของ Render รันบนระบบไฟล์ชั่วคราว และเอกสารก็บอกตรง ๆ ว่าอะไรก็ตามที่เขียนลงไปตรงนั้น รวมถึงรูปที่อัปโหลดและฐานข้อมูล SQLite ในเครื่องอย่างชัดเจน จะหายไปทุกครั้งที่ redeploy รีสตาร์ต และหลับเมื่อไม่ใช้งาน function ของ Vercel รันบนระบบไฟล์แบบอ่านอย่างเดียวที่มีแค่พื้นที่ทำงานชั่วคราว ดังนั้นไฟล์ SQLite ที่แอปของคุณเขียนก็ไม่ปลอดภัยที่นั่นเช่นกัน ถ้าแอปของคุณเก็บ state ไว้ในไฟล์ ให้ย้ายไปยังที่เก็บที่คงทน: ฐานข้อมูลที่โฮสต์ไว้ object storage หรือโวลุ่มถาวรในที่ที่แพลตฟอร์มรองรับ

การหลับเมื่อไม่ใช้งานเป็นสิ่งที่ควรลองสัมผัสก่อนตัดสินใจ บนแพ็กเกจฟรีของ Render การไม่ใช้งาน 15 นาทีจะทำให้บริการหลับ และคำขอถัดไปจะปลุกมันใน ราวหนึ่งนาที พร้อมแสดงหน้ากำลังโหลด ให้กับคนที่คลิกลิงก์ของคุณ สำหรับงานพอร์ตโฟลิโอก็แค่ยักไหล่ แต่สำหรับลูกค้าที่เปิดลิงก์ระหว่างคุยสาย นั่นคือหกสิบวินาทีที่แย่

PythonAnywhere มีกับดักเวอร์ชันที่แนบเนียนกว่า ไม่มีการหลับเมื่อไม่ใช้งาน แต่เว็บแอปฟรีมีอายุหนึ่งเดือนและจะหยุดเว้นแต่คุณจะคลิกลิงก์ต่ออายุที่ PythonAnywhere ส่งอีเมลมาให้ และบัญชีฟรีจะถูก จำกัดการเข้าถึงอินเทอร์เน็ตขาออก และเข้าถึงได้เฉพาะโฮสต์ภายนอกในรายการที่อนุญาต แอปที่เรียก API นอกรายการนั้นจะออนไลน์อยู่อย่างสมบูรณ์แต่ล้มเหลวทุกคำขอไปยัง API ที่ไม่ได้รับอนุญาตนั้น (ดีบักยากมาก เพราะไม่มีอะไรดูเหมือนล่มเลย)

ปล่อยเป็นเว็บไซต์ static

ถ้าไม่มีอะไรที่แอปของคุณทำต้องใช้โค้ดเซิร์ฟเวอร์ตอนมีคำขอ static host คือตัวเลือกที่ใกล้เคียง "ตั้งค่าแล้วลืมไปได้เลย" ที่สุดในที่นี้: มันออนไลน์ได้โดยไม่ต้องใช้แล็ปท็อปของคุณ และไม่มีโปรเซสของแอปที่รอถูกปลุก บัญชีและขีดจำกัดการใช้งานของโฮสต์ยังคงมีผล มีแอปที่เข้าเกณฑ์มากกว่าที่คุณคิด นั่นคือเหตุผลที่ควรตอบคำถามแรกจากสามข้อนั้นก่อนจะสรุปว่าคุณต้องใช้โฮสต์ฝั่งเซิร์ฟเวอร์

กฎนี้แคบกว่าคำถามว่า "มันมี backend ไหม" แอปของคุณเข้าเกณฑ์ถ้าทุกคำขอที่มันส่งไปยังไฟล์ static ของคุณเอง หรือส่งตรงจากเบราว์เซอร์ไปยัง API ของคนอื่น การดึงข้อมูลจาก Supabase หรือ API สาธารณะจากเบราว์เซอร์ทำได้ โดยมีข้อควรระวังข้อเดียวคือคีย์ที่อยู่ในโค้ดเบราว์เซอร์คือคีย์ที่คุณเผยแพร่ออกไปแล้ว สิ่งที่ปิดประตูคือการต้องให้โค้ดของคุณเองรันบนเซิร์ฟเวอร์ในทุกคำขอ

ถ้าเข้าเกณฑ์ ขั้นตอนก็สั้น:

npm run build   # Vite writes to dist/, a Next.js static export writes to out/

จากนั้น deploy ผลลัพธ์ build นั้นไปยัง static host Cloudflare Pages, Netlify และ Vercel สามารถ build จาก repo ที่เชื่อมต่อไว้ได้ ส่วน GitHub Pages สามารถเผยแพร่ไฟล์ static จาก branch หรือใช้ GitHub Actions รัน build ของเฟรมเวิร์กคุณแล้ว deploy ผลลัพธ์ที่สร้างขึ้น

GitHub Pages มีข้อจำกัดที่ชัดพอจะต้องรู้ตั้งแต่ต้น static เท่านั้น มีเว็บไซต์ผู้ใช้หรือองค์กรได้หนึ่งแห่งต่อบัญชี และข้อจำกัดการใช้งานที่ระบุว่ามัน ไม่ใช่โฮสติ้งฟรีสำหรับธุรกิจเว็บไซต์อีคอมเมิร์ซ หรือ SaaS เชิงพาณิชย์ ถ้าแอปของคุณจะรับชำระเงิน นั่นตัดมันออกไปตั้งแต่ยังไม่เริ่ม

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

จุดที่เส้นทางฟรีสิ้นสุด

เส้นทางฟรีล้มเหลวคนละจุด ไม่ใช่พร้อมกันทั้งหมด static host แก้ปัญหา uptime ของแล็ปท็อปได้แล้วและให้ URL ที่มั่นคงจากผู้ให้บริการ โฮสต์แอปฟรีก็ทำได้เช่นกัน และบางเจ้าตอนนี้มีพื้นที่เก็บข้อมูลถาวรให้ด้วย VPS เริ่มสมเหตุสมผลเมื่อความต้องการซ้อนกันขึ้นมา: โปรเซสฝั่งเซิร์ฟเวอร์ของคุณเองต้องออนไลน์ตลอด คุณต้องการพื้นที่เก็บข้อมูลถาวรที่คาดเดาได้ และกฎด้านทรัพยากรหรือการใช้งานของแพ็กเกจฟรีไม่เหมาะอีกต่อไป

เกณฑ์นั้นควรค่าแก่การเคารพ เดโมครั้งเดียวไม่ใช่เหตุผลที่จะซื้อเซิร์ฟเวอร์ และโปรเจกต์ static ที่ทราฟฟิกน้อยก็เช่นกัน ใช้ tunnel ต่อไปสำหรับการแชร์ระยะสั้น ใช้ static host ต่อไปตราบใดที่แอปเป็น static จริง ๆ และใช้โฮสต์แอปฟรีต่อไปตราบใดที่ขีดจำกัดของมันยังเหมาะกับสิ่งที่คุณรัน

ย้ายไป VPS เมื่อคุณต้องการเซิร์ฟเวอร์ที่เปิดตลอดเวลาซึ่งคุณควบคุมเอง และพร้อมรับงานด้านการดูแลระบบที่มาพร้อมกัน Linux VPS ของเรา เป็นตัวเลือกหนึ่ง และ VPS ที่เทียบเคียงกันจากผู้ให้บริการอื่นก็ทำงานเดียวกันได้ เลือกขนาดเซิร์ฟเวอร์ให้เหมาะกับแอปแทนที่จะสันนิษฐานว่าแพ็กเกจเล็กสุดจะพอ

สองสิ่งจะเปลี่ยนไปเมื่อคุณทำแบบนั้น เวิร์กโฟลว์ deploy แบบ push ขึ้น git ที่โฮสต์แพลตฟอร์มเคยให้ไม่ได้เป็นอัตโนมัติอีกต่อไป คุณสร้างมันขึ้นใหม่ได้ด้วย PaaS แบบโฮสต์เองอย่าง Coolify หรือ Dokkuหรือสร้างเส้นทาง CI/CD ของคุณเอง และไม่ว่าทางไหน ตอนนี้การอัปเดตและการบำรุงรักษาก็เป็นของคุณแล้ว

อีกสิ่งที่เปลี่ยนคือเครื่องนั้นเก็บได้มากกว่าแค่แอป มันยินดี รัน Code Server และ Claude Code ถ้าคุณอยากให้เอดิเตอร์ของคุณอยู่ที่นั่นด้วย ซึ่งจะเป็นโบนัสดี ๆ หรือสุดสัปดาห์ใหม่ทั้งสัปดาห์ก็แล้วแต่คุณ

อ่าน

ทางเลือกแทน Heroku และ Vercel แบบ Self-Hosted ที่ดีที่สุด: Coolify, Dokku และอื่นๆ

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

ทำไม URL สาธารณะของฉันหยุดทำงานหลังจากปิดฝาแล็ปท็อป?

เพราะ tunnel ผูกอยู่กับโปรเซสที่สร้างมัน ไม่ใช่กับแอปของคุณ การปิดฝาแล็ปท็อปหรือปิดเทอร์มินัลจะจบโปรเซสนั้น URL สาธารณะตาย แต่แอปของคุณไม่เป็นอะไร การรีสตาร์ต tunnel จะให้ URL ใหม่ เว้นแต่เครื่องมือจะกำหนดโดเมนสำรองไว้ให้คุณ ถ้าลิงก์ต้องอยู่รอดตอนแล็ปท็อปของคุณหลับ แอปก็ต้องออกจากเครื่องของคุณ

ฉันต้องมีชื่อโดเมนเพื่อนำแอปในเครื่องขึ้น URL สาธารณะไหม?

ไม่ต้อง ในเกือบทุกกรณี Cloudflare quick tunnel โดเมนพัฒนาที่ ngrok กำหนดให้ localtunnel localhost.run และแพ็กเกจโฮสติ้งฟรีด้านบนล้วนให้ซับโดเมนบนโดเมนของตัวเองโดยไม่มีค่าใช้จ่าย ข้อยกเว้นคือ named tunnel ของ Cloudflare ซึ่งต้องมีโดเมนที่คุณเพิ่มเข้า Cloudflare DNS ไว้แล้ว

คนบนเครือข่าย Wi-Fi อื่นเปิดที่อยู่ IP ในเครื่องของฉันได้ไหม?

ไม่ได้ ที่อยู่อย่าง 192.168.1.42 ชี้ไปยังอุปกรณ์ใดก็ตามที่ถือที่อยู่นั้นอยู่ในเครือข่ายที่คุณเชื่อมต่ออยู่ตอนนี้ ซึ่งบนเครือข่ายอื่นจะเป็นอุปกรณ์คนละตัวหรือไม่มีอะไรเลย ใครก็ตามที่อยู่นอก Wi-Fi ของคุณต้องใช้ tunnel แพ็กเกจโฮสติ้งฟรี หรือ static host แทน

วิธีไหนใช้ได้ถ้าแอปของฉันมีระบบล็อกอินและฐานข้อมูล?

เส้นทางเครือข่ายเดียวกันและ tunnel ใช้ได้โดยไม่ต้องเปลี่ยนอะไร เพราะแอปยังรันอยู่บนเครื่องของคุณ การ deploy แบบ static ก็ใช้ได้เช่นกันถ้าคำขอล็อกอินและฐานข้อมูลส่งตรงจากเบราว์เซอร์ไปยังบริการที่โฮสต์ไว้ และไม่มีโค้ดฝั่งเซิร์ฟเวอร์ส่วนตัวที่ต้องรันในแต่ละคำขอ ถ้าโค้ดยืนยันตัวตนหรือฐานข้อมูลของคุณเองต้องใช้เซิร์ฟเวอร์ตอนมีคำขอ ให้ใช้โฮสต์ฝั่งเซิร์ฟเวอร์แทน บนโฮสต์แอปฟรี ให้เก็บข้อมูลถาวรไว้ในที่เก็บที่คงทนแทนที่จะสันนิษฐานว่าระบบไฟล์ในเครื่องของแอปจะอยู่รอด