การเชื่อมต่อ CloudFront กับ Elastic Beanstalk และทำให้เป็น HTTPS

การเชื่อมต่อ CloudFront กับ Elastic Beanstalk และเปลี่ยนชื่อ Domain name ด้วย Route 53 จะทำให้เว็บไซต์มีความปลอดภัยในการใช้งาน นอกจากนี้การขอใบรับรอง SSL Certificate จะทำให้เว็บไซต์ของเรามีความน่าเชื่อถือในการเข้าใช้งานอีกด้วย ซึ่งในบทความนี้ผมจะมาแนะนำวิธีการทำเว็บไซต์ที่สร้างด้วย Elastic Beanstalk ให้เป็น HTTPS ด้วยวิธีเหล่านี้ครับ

ครั้งนี้ผมจะมาแนะนำ การเชื่อมต่อ CloudFront กับ Elastic Beanstalk และทำให้เป็น HTTPS ครับ

สิ่งที่ต้องมี

ให้ทำการเริ่มต้นระบบ Environment ของ Elastic Beanstalk ก่อนครับ

สมมติว่าผมได้เริ่มต้นระบบ Elastic Beanstalk ไปแล้วด้วยชื่อดังต่อไปนี้
Name:tinnakorn-single.ap-southeast-1.elasticbeanstalk.com

สำหรับผู้ที่มีความสนใจ ดูได้ที่ลิงก์บทความด้านล่างนี้ครับ


สมมติว่า cmth.link ได้มีการตั้งค่าเป็น Host Zone ใน Route 53 ไว้เรียบร้อยแล้ว

สำหรับผู้ที่มีความสนใจ ดูได้ที่ลิงก์บทความด้านล่างนี้ครับ

เป้าหมายการทำ

ผมจะทำการเชื่อมต่อ CloudFront กับ Elastic Beanstalk เพื่อทำให้เว็บไซต์เป็น HTTPS จากนั้นเปลี่ยน Domain name ด้วย Route 53 และขอใบรับรอง SSL Certificate เพื่อให้เว็บไซต์มีความน่าเชื่อถือในการเข้าใช้งาน

ผมจะดำเนินการเปลี่ยนเป็นชื่อ Domain name ด้านล่างนี้

https://tinnakorn-single.cmth.link

สร้าง Certificate SSL

เข้ามาที่ Service:AWS Certificate Managerแล้วเปลี่ยนเป็น Region:N.Virginia

คลิกที่ List certificates จากเมนูด้านซ้าย และคลิกRequest

คลิกNext

การตั้งค่า Domain names ในหน้า Request public certificate:
» Fully qualified domain name:tinnakorn-single.cmth.link(ชื่ออะไรก็ได้)
» เลื่อนลงมาด้านล่างสุด คลิกปุ่มRequest

คลิกปุ่มReloadแล้ว Domain name ที่เราสร้างจะแสดงขึ้นมา จากนั้นคลิกเข้าไปที่ Certificate ID ของเราได้เลย

คลิกCreate records in Route 53

คลิกCreate records(ในกรณีที่ไม่แสดงแบบนี้ ให้ออกไปหน้าหลักแล้วกลับเข้ามาอีกครั้งครับ)
เมื่อคลิกปุ่มนี้แล้ว record นี้จะถูกสร้างขึ้นใน Hosted zones:cmth.linkใน Route 53 ทันที

เมื่อการสร้าง Domain name เสร็จแล้ว Status จะเป็น✅ Issuedแบบนี้ครับ

เข้ามาที่ [Service Route 53 > Hosted zones > cmth.link]
จากนั้นดูที่หัวข้อ Records และค้นหา Record name ตาม Domain name ที่สร้างเมื่อสักครู่นี้
จะเห็นว่ามี Record name ของเราแสดงขึ้นมาเหมือนกับ Domain name เลยครับ

เมื่อสร้างใบรับรอง SSL บน Certitication Manager ได้แล้วให้เปลี่ยนรีเจี้ยนกลับมาเป็น Singapore หรือรีเจี้ยนที่เรากำลังใช้งานอยู่ครับ

การเชื่อมต่อ CloudFront กับ Elastic Beanstalk และทำให้เป็น HTTPS

ก่อนอื่นให้เข้ามาที่หน้า [Service AWS Elastic Beanstalk > Environments > คลิกที่ Environment ของเรา เช่นtinnakorn-single(ถ้าไม่เจอให้ดูใน Region ที่เราใช้งาน)] และทำการ Copy URL ตามที่มาร์คไว้ในรูปภาพ

จากนั้นเข้ามาที่ [Service CloudFront > Distributions] และคลิกCreate distribution

※การตั้งค่าหน้า Create distribution:
หัวข้อ Origin
» Origin domain:[your_environment_name].ap-southeast-1.elasticbeanstalk.com(วาง URL Environment ที่นี่)
» ProtocolInfo: ◉HTTP only

หัวข้อ Default cache behavior
Viewer
» Viewer protocol policy: ◉Redirect HTTP to HTTPS
» Allowed HTTP methods: ◉GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

Cache key and origin requests
» Cache policy:CachingDisabled
» Origin request policy - optional:AllViewer

หัวข้อ Settings
» Alternate domain name (CNAME) - optional: คลิก Add item และใส่ชื่อ Domain name ของเราลงไป เช่นtinnakorn-single.cmth.link
» Custom SSL certificate - optional:tinnakorn-single.cmth.link(เลือก Certificate ที่สร้างไว้ตอนแรก)

เลื่อนลงมาด้านล่างสุดแล้วทำตามนี้
» Description - optional:tinnakorn-single.cmth.link(จะใส่หรือไม่ใส่ก็ได้ครับ)
» จากนั้นกดปุ่มCreate distribution

หมายเหตุ: การตั้งค่าที่ไม่ได้อธิบายทั้งหมดนี้จะใช้ค่าเริ่มต้น


เมื่อสร้างเสร็จแล้วรอการ Deploying สักครู่ เมื่อเสร็จแล้วสถานะ Last modified จะแสดง datetime ปัจจุบันแบบนี้
จากนั้นให้ Copy Distribution domain name ไปทดสอบในหน้าเว็บบราวเซอร์
ถ้าแสดงผลได้ปกติให้นำ domain name นี้ไปทำการ Create record บน Route 53 ในขั้นตอนถัดไปครับ

การสร้าง Route 53

เข้ามาที่ [Service Route 53 > Hosted zones > cmth.link] คลิกCreate record

การตั้งค่าหัวข้อ Quick create record:
» Record name:tinnakorn-single(ใส่ชื่ออะไรก็ได้)
» Route traffic to: คลิกปุ่มAliasเพื่อเปิดใช้งาน และเลือก Alias to CloudFront distribution
» วาง Distribution domain name ที่ Copy มาจาก Cloudfront เช่นxxxxxxxxxxxxxx.cloudfront.net
» คลิกCreate records

เมื่อเสร็จแล้ว ค้นหา Record name ของเรา ก็จะแสดงหน้าจอแบบนี้
ต่อไปผมจะ Copy Record name นี้ไปแสดงผลที่หน้าเว็บบราวเซอร์ในขั้นตอนถัดไป

ทดสอบ Record name

Record name ที่ผมจะทดสอบมีดังนี้

https://tinnakorn-single.cmth.link/


หน้าจอนี้คือหน้าจอเริ่มต้นของโปรเจกต์ Laravel ซึ่งการแสดงผลจะเปลี่ยนไปตามเนื้อหาของโปรเจกต์ใน Elastic Beanstalk ที่เรากำลังใช้งานอยู่
Record name:https://tinnakorn-single.cmth.link/

สรุป

การสาธิตของบทความนี้ ผมหวังว่าจะช่วยให้เว็บไซต์ของผู้อ่านมีความปลอดภัยมากขึ้นโดยการทำให้เว็บไซต์ที่สร้างด้วย Elastic Beanstalk เป็น HTTPS ตามวิธีการในบทความนี้ โดยส่วนตัวผมคิดว่าเราควรให้ความสำคัญในเรื่องความปลอดภัยในการเข้าใช้งานเว็บไซต์ เช่น การเชื่อมต่อกับ CloudFront, การเปลี่ยนชื่อ Domain name และการขอใบรับรอง SSL Certificate เพราะจะทำให้เว็บไซต์ของเรามีความน่าเชื่อถือในการเข้าใช้งาน และได้รับความไว้วางใจจากผู้ใช้งานนั่นเองครับ

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

ดูรายละเอียดเพิ่มเติมได้ที่นี่ สอบถามเพิ่มเติมเกี่ยวกับ AWS คลิกที่นี่