ทำให้ URL ของเว็บแอประหว่างพัฒนาง่ายขึ้นด้วยโดเมน `.localhost`

 (inclouds.space)
17 คะแนน โดย GN⁺ 2025-04-12 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • แชร์ประสบการณ์การตั้งค่าให้เข้าถึงเว็บแอปที่กำลังพัฒนาได้ด้วย URL แบบเรียบง่ายอย่าง appname.localhost โดยไม่ต้องจำพอร์ตอย่าง localhost:4333
  • เมื่อใช้ระบบนี้ การเข้าถึงเว็บแอปบนเครื่องโลคัลจะตรงไปตรงมาและเป็นระเบียบมากขึ้น
  • แต่ละแอปรันบนพอร์ตเฉพาะของตัวเองผ่าน launchd daemon
  • ตั้งค่าในไฟล์ /etc/hosts ให้รีไดเร็กต์ appname.localhost ไปที่ 127.0.0.1
    • ตัวอย่าง: 127.0.0.1 inclouds.localhost
  • ใช้ Caddy เพื่อทำพร็อกซีโดเมนดังกล่าวไปยังพอร์ตที่เหมาะสม

ตัวอย่างการตั้งค่า Caddy

  inclouds.localhost {  
    reverse_proxy localhost:5050  
    tls internal  
    encode gzip zstd  
  }
  • สำหรับแต่ละโดเมน .localhost ให้เขียนการตั้งค่าพร็อกซีไปยังพอร์ตที่เกี่ยวข้องไว้ใน Caddyfile
  • รวมการรองรับใบรับรอง TLS ภายในและการบีบอัดไว้ด้วย

ไอเดียสำหรับการปรับปรุงในอนาคต

  • ตอนนี้ยังต้องแก้ไขไฟล์สามไฟล์ด้วยตนเอง (/etc/hosts, Caddyfile, launchd plist)
  • เป้าหมายในอนาคตคือสร้างเครื่องมืออัตโนมัติที่ใช้คำสั่งเดียวเพื่อติดตั้ง/ลบแอปบนโดเมน .localhost

อัปเดต

  • Cristóbal ได้แนะนำคำสั่งที่อิงกับ dnsmasq เพื่อทำให้กระบวนการนี้ง่ายขึ้น
  • แนวคิดหลักมีดังนี้:
    1. รีไดเร็กต์ *.localhost ทั้งหมดไปที่ 127.0.0.1
    2. ตั้งค่าเซิร์ฟเวอร์ให้ทำ reverse proxy จาก 127.0.0.1 ไปยังพอร์ตที่กำหนด

ตั้งค่ารีไดเร็กชันด้วย dnsmasq

  • ใช้ dnsmasq เพื่อให้ทุกโดเมน *.localhost ถูกส่งไปที่ 127.0.0.1
  • หลังติดตั้งแล้วให้ตั้งค่าดังนี้: 
    echo 'port=5353' | sudo tee -a /etc/dnsmasq.conf  
echo 'address=/localhost/127.0.0.1' | sudo tee -a /etc/dnsmasq.conf  
sudo systemctl restart dnsmasq
  • ตั้งพอร์ตของ dnsmasq เป็น 5353 เพื่อหลีกเลี่ยงการชนกับ systemd-resolved
  • เพิ่มบรรทัดต่อไปนี้ไว้บนสุดของ /etc/resolv.conf เพื่อให้ dnsmasq เป็น DNS resolver หลัก: 
    nameserver 127.0.0.1

ตั้งค่า reverse proxy ด้วย Caddy และสคริปต์ localhost

  • จากนั้นสามารถใช้เซิร์ฟเวอร์ caddy เพื่อเชื่อมแต่ละซับโดเมนไปยังพอร์ตที่ต้องการได้
  • จะแก้ไข Caddyfile ด้วยตนเองก็ได้ หรือจะทำให้เป็นอัตโนมัติด้วย bash script (localhost) ก็ได้
  • เพิ่ม bash script (localhost) นี้เข้าไปใน PATH (ตัวอย่างเช่นเพิ่มในไฟล์ .zshrc): 
    export PATH="$PATH:$HOME/dev/localhost"
  • สามารถใช้งานได้ดังนี้: 
    localhost add hello 8000  
localhost remove hello

ทดสอบการทำงานจริง

  • ตัวอย่างการรันเซิร์ฟเวอร์บนเครื่องโลคัล: 
    echo 'hello.localhost!' > index.html  
python3 -m http.server 1234
  • ตั้งค่าการเชื่อมต่อโดเมน: 
    localhost add hello 1234
  • จากนี้เมื่อเข้า hello.localhost ในเบราว์เซอร์ ก็จะแสดงเนื้อหาจากเซิร์ฟเวอร์ข้างต้น

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

2 ความคิดเห็น

 
dudlf016 2025-04-12

ถ้าไม่ใช่กรณีที่เข้าไม่ถึงเครือข่ายภายนอก ผมจะใช้ Wildcard DNS อย่าง NIP.IO มากกว่าครับ
 
GN⁺ 2025-04-12
ความคิดเห็นจาก Hacker News

  • เบราว์เซอร์มอบ security context ให้กับโดเมน .localhost

    • ไม่ต้องใช้ใบรับรองแบบ self-signed สำหรับ HTTPS
    • มีประโยชน์เมื่อรัน backend API และ frontend SPA พร้อมกัน
    • สามารถใช้โดเมน .internal ที่เพิ่งได้รับการอนุมัติล่าสุดได้

  • สนิปเพ็ตการตั้งค่า nginx สำหรับการพัฒนาแบบโลคัลนั้นเรียบง่าย

    • เชื่อมต่อกับเซิร์ฟเวอร์พัฒนาแบบโลคัลผ่าน Unix domain socket
    • ต้องเพิ่มการ resolve ชื่อโฮสต์ แต่ไม่จำเป็นต้องแก้ไขไฟล์คอนฟิกแบบโปรแกรมหรือรีสตาร์ตพร็อกซี

  • Chrome และ Firefox จะ resolve ทุกโดเมน <name>.localhost ไปยัง localhost โดยค่าเริ่มต้น

    • สามารถตั้งค่า Docker proxy เพื่อจัดการทุกคำขอโดยอัตโนมัติได้

  • โปรเจกต์ Localias มีประโยชน์สำหรับการพัฒนาเว็บแบบโลคัล

    • สร้างขึ้นบน Caddy และมี CLI กับรูปแบบไฟล์คอนฟิกที่ใช้งานสะดวก
    • ทำให้สามารถใช้ alias โดเมน .local จากอุปกรณ์อื่นในเครือข่ายได้
    • ไม่จำเป็นต้องแก้ไขไฟล์ /etc/hosts ด้วยตนเอง

  • ซับโดเมนของ .localhost ใช้งานได้โดยค่าเริ่มต้นบน Linux, OpenBSD เป็นต้น

    • บน macOS ต้องเพิ่มซับโดเมนลงใน /etc/hosts อย่างชัดเจน

  • หากใช้ Caddy แนะนำให้ใช้โดเมนที่ซื้อมาและ DNS-01 challenge

    • ไม่ต้องเพิ่มใบรับรองแบบ self-signed เข้า trust store
    • Caddy จะต่ออายุใบรับรองให้อัตโนมัติ

  • บางคนก็ใช้ vanity domain ในเครือข่ายส่วนตัว

    • ใช้ Smallstep CA, CoreDNS และ Traefik เพื่อออกใบรับรอง SSL อัตโนมัติ
    • ควรใช้ internal. zone สำหรับการตั้งค่าเครือข่ายภายใน

  • สามารถกำหนดที่อยู่ IP แยกให้แต่ละแอปที่โฮสต์แบบโลคัลได้

    • ใช้ที่อยู่ IP ในช่วง 127.0.0/24 ได้
    • ใช้งานบน macOS ได้เช่นกัน แต่บางครั้งอาจต้องเพิ่มลงใน loopback interface อย่างชัดเจน

  • บนระบบ Linux จะทำงานได้โดยค่าเริ่มต้นผ่าน systemd-resolved

    • มีข้อดีคือสามารถบล็อก CSRF ด้วย reverse proxy ได้