การเชื่อมต่อ CloudFront กับ 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 เพราะจะทำให้เว็บไซต์ของเรามีความน่าเชื่อถือในการเข้าใช้งาน และได้รับความไว้วางใจจากผู้ใช้งานนั่นเองครับ
