จัดการกับการพัฒนา HTTPS ในเครื่อง

เมื่อพัฒนาเว็บแอปพลิเคชัน สถานการณ์เฉพาะบางอย่างต้องการ HTTPS แม้กระทั่งในสภาพแวดล้อมท้องถิ่น ไม่ว่าคุณจะบูรณาการกับ API บุคคลที่สามที่มีความปลอดภัย ทดสอบฟีเจอร์ HTTPS เฉพาะเช่น service workers และ HTTP/2 หรือจำลองเงื่อนไขการผลิตเพื่อให้แน่ใจว่าการจัดการจะราบรื่น HTTPS กลายเป็นสิ่งสำคัญ นอกจากนี้ API ของเบราว์เซอร์บางตัว เช่น geolocation การแจ้งเตือนแบบพุช และการจัดการข้อมูลรับรอง ต้องการบริบทที่ปลอดภัยสำหรับการทำงานอย่างมีประสิทธิภาพ

ตัวอย่างเช่น Logto OSS ต้องการ HTTPS โดยค่าเริ่มต้นยกเว้น localhost ในกรณีเช่นนี้ การเรียนรู้เกี่ยวกับการตั้งค่า HTTPS สำหรับการพัฒนาท้องถิ่นสามารถประหยัดเวลาได้ บทความนี้จะชี้แนะคุณในการตั้งค่า HTTPS สำหรับการพัฒนาท้องถิ่นและแนะนำเครื่องมือต่าง ๆ เช่น Mkcert เพื่อทำให้กระบวนการง่ายขึ้น

บทบาทของ localhost และฟีเจอร์เฉพาะ HTTPS#

localhost เป็นโดเมนพิเศษที่สามารถจัดการฟังก์ชันต่าง ๆ ที่เป็นเฉพาะ HTTPS ได้เช่น service workers คุกกี้ที่ปลอดภัย HTTP/2 และ API ของเบราว์เซอร์อื่น ๆ สามารถทำงานได้ดีใน http://localhost:xxxx ดังนั้นคุณอาจไม่จำเป็นต้องใช้ HTTPS ในเครื่องเสมอไป ลองใช้ localhost ก่อน!

ลองใช้ Cloudflare tunnels#

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

การตั้งค่า HTTPS ในเครื่อง#

สองตัวเลือกด้านบนไม่สามารถแก้ปัญหาของคุณได้ใช่ไหม? งั้นเรามาตั้งค่า HTTPS ในเครื่องกัน ในขั้นตอนต่อไป เราสมมติว่าใช้ชื่อโดเมน example.com

ขั้นตอน 1: อัปเดตไฟล์ hosts#

ก่อนที่เราจะเริ่ม ตรวจสอบให้แน่ใจว่าโดเมนเป้าหมายถูกแก้ไขไปยังเครื่องของคุณ ซึ่งสามารถทำได้โดยการอัปเดตไฟล์ hosts เปิด /etc/hosts บน Linux/macOS หรือ C:\Windows\System32\drivers\etc\hosts บน Windows และเพิ่มบรรทัดต่อไปนี้:

ขั้นตอน 2: สร้างใบรับรอง#

สิ่งแรกเกี่ยวกับ HTTPS คือใบรับรอง ในการผลิต สิ่งนี้สามารถทำได้โดยเครื่องมืออย่าง "Let's encrypt" หรือซื้อใบรับรองจากผู้ให้บริการของคุณ แต่ในการพัฒนาท้องถิ่น เราสามารถสร้างใบรับรองได้โดยตรง

Mkcert เป็นเครื่องมือที่ไม่มีการกำหนดค่าและง่ายต่อการสร้างใบรับรองการพัฒนาที่เชื่อถือได้ในเครื่องกับชื่อใด ๆ ที่คุณต้องการ

ก่อนอื่นให้ทำตามคำแนะนำอย่างเป็นทางการเพื่อติดตั้ง mkcert สมมติว่าคุณใช้งาน macOS:

สำหรับ Windows และ Linux ดูที่ ลิงก์นี้.

ตอนนี้ด้วย mkcert ที่พร้อมใช้งาน ให้รันคำสั่งนี้เพื่อสร้าง CA ในเครื่องและบันทึกใบรับรองรูทในระบบเชื่อถือของคุณ สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ "CA" และใบรับรอง ดูที่ เอกสาร โดย Cloudflare

แล้ว สร้างใบรับรอง SSL ในเครื่อง

ซึ่งจะสร้างไฟล์ example.com.pem และ example.com-key.pem ในไดเรกทอรีของคุณ

ขั้นตอน 3: ตั้งค่า HTTPS ในแอปของคุณ#

เมื่อไฟล์ใบรับรองพร้อมแล้ว คุณสามารถเปิดใช้งาน HTTPS ในแอปของคุณได้ ไม่เหมือนในสภาพแวดล้อมการผลิตที่ reverse proxy อย่าง Nginx จัดการ HTTPS ในการพัฒนาท้องถิ่น เราตั้งค่าได้โดยตรงในเว็บแอปพลิเคชัน ลองใช้ Express เป็นตัวอย่าง

สร้างเซิร์ฟเวอร์ Express อย่างง่ายด้วยโค้ดดังนี้:

รันแอปพลิเคชันและเยี่ยมชม https://example.com เพื่อดูแอป Express ที่มีความปลอดภัยของคุณในทางปฏิบัติ

เปิดใช้งาน HTTPS สำหรับ Logto OSS#

Logto OSS ต้องการ HTTPS โดยค่าเริ่มต้น ยกเว้นสำหรับ localhost หากคุณต้องการรัน Logto ในเครื่องด้วยโดเมนอื่น คุณจะต้องตั้งค่า HTTPS ในเครื่อง

1. ตั้งค่า Logto: ตามลิงก์เพื่อตั้งค่า Logto ในเครื่องของคุณ: https://docs.logto.io/docs/get-started/
2. เตรียมใบรับรอง: ใช้ mkcert เพื่อสร้างไฟล์ .pem สองไฟล์และวางไว้ในไดเรกทอรี
3. ตั้งค่าตัวแปร env: ระบุทั้ง HTTPS_CERT_PATH และ HTTPS_KEY_PATH เพื่อเปิดใช้งาน HTTPS ผ่าน Node ดูที่ ลิงก์นี้ เพื่อเรียนรู้เพิ่มเติม

สรุป#

การตั้งค่า HTTPS สำหรับการพัฒนาท้องถิ่นนั้นไม่ซับซ้อนอย่างที่คิด ด้วยเครื่องมือต่าง ๆ เช่น Mkcert การสร้างใบรับรองที่เชื่อถือได้ในเครื่องกลายเป็นกระบวนการที่รวดเร็วและง่ายดาย แม้ว่า localhost มักจะจัดการฟีเจอร์เฉพาะ HTTPS ได้หลายฟีเจอร์ แต่บางครั้งคุณต้องการการสนับสนุน HTTPS แบบเต็มและไกด์นี้ช่วยให้คุณไปถึงที่นั่น ไม่ว่าคุณจะทดสอบ API ทำงานกับ Logto OSS หรือเพียงแค่จำลองเงื่อนไขการผลิต การปฏิบัติตามขั้นตอนเหล่านี้จะทำให้คุณพร้อมสำหรับการพัฒนาที่ปลอดภัยและราบรื่น