สำรวจวิธีการใช้งาน HTTPS ในเครื่องในกระบวนการพัฒนาของคุณด้วยเครื่องมืออย่าง Mkcert และคำแนะนำทีละขั้นตอนสำหรับ Express.js และ Next.js
เมื่อพัฒนาเว็บแอปพลิเคชัน สถานการณ์เฉพาะบางอย่างต้องการ HTTPS แม้กระทั่งในสภาพแวดล้อมท้องถิ่น ไม่ว่าคุณจะบูรณาการกับ API บุคคลที่สามที่มีความปลอดภัย ทดสอบฟีเจอร์ HTTPS เฉพาะเช่น service workers และ HTTP/2 หรือจำลองเงื่อนไขการผลิตเพื่อให้แน่ใจว่าการจัดการจะราบรื่น HTTPS กลายเป็นสิ่งสำคัญ นอกจากนี้ API ของเบราว์เซอร์บางตัว เช่น geolocation การแจ้งเตือนแบบพุช และการจัดการข้อมูลรับรอง ต้องการบริบทที่ปลอดภัยสำหรับการทำงานอย่างมีประสิทธิภาพ
ตัวอย่างเช่น Logto OSS ต้องการ HTTPS โดยค่าเริ่มต้นยกเว้น localhost ในกรณีเช่นนี้ การเรียนรู้เกี่ยวกับการตั้งค่า HTTPS สำหรับการพัฒนาท้องถิ่นสามารถประหยัดเวลาได้ บทความนี้จะชี้แนะคุณในการตั้งค่า HTTPS สำหรับการพัฒนาท้องถิ่นและแนะนำเครื่องมือต่าง ๆ เช่น Mkcert เพื่อทำให้กระบวนการง่ายขึ้น
localhost และฟีเจอร์เฉพาะ HTTPSlocalhost เป็นโดเมนพิเศษที่สามารถจัดการฟังก์ชันต่าง ๆ ที่เป็นเฉพาะ HTTPS ได้เช่น service workers คุกกี้ที่ปลอดภัย HTTP/2 และ API ของเบราว์เซอร์อื่น ๆ สามารถทำงานได้ดีใน http://localhost:xxxx ดังนั้นคุณอาจไม่จำเป็นต้องใช้ HTTPS ในเครื่องเสมอไป ลองใช้ localhost ก่อน!
ที่เคยแนะนำไว้ใน บทความนี้ Cloudflare tunnels สามารถเปิดเผยบริการในเครื่องของคุณสู่โลกอินเทอร์เน็ตได้ง่าย ๆ พร้อมกับ HTTPS พร้อมใช้งาน
สองตัวเลือกด้านบนไม่สามารถแก้ปัญหาของคุณได้ใช่ไหม? งั้นเรามาตั้งค่า HTTPS ในเครื่องกัน ในขั้นตอนต่อไป เราสมมติว่าใช้ชื่อโดเมน example.com
ก่อนที่เราจะเริ่ม ตรวจสอบให้แน่ใจว่าโดเมนเป้าหมายถูกแก้ไขไปยังเครื่องของคุณ ซึ่งสามารถทำได้โดยการอัปเดตไฟล์ hosts เปิด /etc/hosts บน Linux/macOS หรือ C:\Windows\System32\drivers\etc\hosts บน Windows และเพิ่มบรรทัดต่อไปนี้:
สิ่งแรกเกี่ยวกับ HTTPS คือใบรับรอง ในการผลิต สิ่งนี้สามารถทำได้โดยเครื่องมืออย่าง "Let's encrypt" หรือซื้อใบรับรองจากผู้ให้บริการของคุณ แต่ในการพัฒนาท้องถิ่น เราสามารถสร้างใบรับรองได้โดยตรง
Mkcert เป็นเครื่องมือที่ไม่มีการกำหนดค่าและง่ายต่อการสร้างใบรับรองการพัฒนาที่เชื่อถือได้ในเครื่องกับชื่อใด ๆ ที่คุณต้องการ
ก่อนอื่นให้ทำตามคำแนะนำอย่างเป็นทางการเพื่อติดตั้ง mkcert สมมติว่าคุณใช้งาน macOS:
สำหรับ Windows และ Linux ดูที่ ลิงก์นี้.
ตอนนี้ด้วย mkcert ที่พร้อมใช้งาน ให้รันคำสั่งนี้เพื่อสร้าง CA ในเครื่องและบันทึกใบรับรองรูทในระบบเชื่อถือของคุณ สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ "CA" และใบรับรอง ดูที่ เอกสาร โดย Cloudflare
แล้ว สร้างใบรับรอง SSL ในเครื่อง
ซึ่งจะสร้างไฟล์ example.com.pem และ example.com-key.pem ในไดเรกทอรีของคุณ
เมื่อไฟล์ใบรับรองพร้อมแล้ว คุณสามารถเปิดใช้งาน HTTPS ในแอปของคุณได้ ไม่เหมือนในสภาพแวดล้อมการผลิตที่ reverse proxy อย่าง Nginx จัดการ HTTPS ในการพัฒนาท้องถิ่น เราตั้งค่าได้โดยตรงในเว็บแอปพลิเคชัน ลองใช้ Express เป็นตัวอย่าง
สร้างเซิร์ฟเวอร์ Express อย่างง่ายด้วยโค้ดดังนี้:
รันแอปพลิเคชันและเยี่ยมชม https://example.com เพื่อดูแอป Express ที่มีความปลอดภัยของคุณในทางปฏิบัติ
Logto OSS ต้องการ HTTPS โดยค่าเริ่มต้น ยกเว้นสำหรับ localhost หากคุณต้องการรัน Logto ในเครื่องด้วยโดเมนอื่น คุณจะต้องตั้งค่า HTTPS ในเครื่อง
mkcert เพื่อสร้างไฟล์ .pem สองไฟล์และวางไว้ในไดเรกทอรีHTTPS_CERT_PATH และ HTTPS_KEY_PATH เพื่อเปิดใช้งาน HTTPS ผ่าน Node ดูที่ ลิงก์นี้ เพื่อเรียนรู้เพิ่มเติมการตั้งค่า HTTPS สำหรับการพัฒนาท้องถิ่นนั้นไม่ซับซ้อนอย่างที่คิด ด้วยเครื่องมือต่าง ๆ เช่น Mkcert การสร้างใบรับรองที่เชื่อถือได้ในเครื่องกลายเป็นกระบวนการที่รวดเร็วและง่ายดาย แม้ว่า localhost มักจะจัดการฟีเจอร์เฉพาะ HTTPS ได้หลายฟีเจอร์ แต่บางครั้งคุณต้องการการสนับสนุน HTTPS แบบเต็มและไกด์นี้ช่วยให้คุณไปถึงที่นั่น ไม่ว่าคุณจะทดสอบ API ทำงานกับ Logto OSS หรือเพียงแค่จำลองเงื่อนไขการผลิต การปฏิบัติตามขั้นตอนเหล่านี้จะทำให้คุณพร้อมสำหรับการพัฒนาที่ปลอดภัยและราบรื่น