การตั้งค่าแสดงผลหน้า ERROR ด้วย HTML ใน ELB (ALB)
POP จากบริษัท Classmethod (Thailand) ครับ
ครั้งนี้ผมจะมาแนะนำการตั้งค่าแสดงผลหน้า ERROR ด้วย HTML ใน ELB (ALB)
สิ่งที่ต้องมี
- ต้องมี Elastic Load Balancers ใน EC2 ที่เชื่อมต่อกับ CloudFront แล้ว
- ต้องมีการตั้งค่า Custom Headers ระหว่าง CloudFront กับ Elastic Load Balancers แล้ว
สำหรับผู้ใช้งานที่ต้องการเรียนรู้เกี่ยวกับการตั้งค่า Custom Headers ใน CloudFront และการตั้งค่า Rules ใน Elastic Load Balancers ให้ดูที่ลิงก์ด้านล่างนี้ครับ
ขั้นตอน
เข้ามาที่ EC2 ＞ Load Balancers
จากนั้นติ๊กที่■awseb-AWSEB-xxxxxxxxxxxxx (Name ของเรา) ก็จะมีรายละเอียดแสดงที่ด้านล่าง
แล้วเลือกหัวข้อListenersก็จะมีรายละเอียดแสดงขึ้นมา ทีนี้ให้ดูที่คอลัมน์ Rules แล้วคลิกView/edit rulesได้เลย
คลิกไอคอน?ที่แท็บด้านบน แล้วคลิกไอคอน?last HTTP 80: default action
ดูที่คอลัมน์ THEN คลิกไอคอน?1. Return fixed response 403
แล้วให้เลือก Content-Type:text/html
และคัดลอกโค้ดด้านล่างนี้วางลงในช่องResponse bodyและคลิก✓(character length กำหนดไว้สูงสุดที่ 1024 ตัวอักษร)
<!DOCTYPE html>
<html>
<head>
<title>Access Denied</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
body{
background-color: black;
color: white;
}
h1 {
color: red;
}
h6{
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top w3-center"><code>Access Denied</code></h1>
<hr class="w3-border-white w3-animate-left" style="margin:auto;width:50%">
<h3 class="w3-center w3-animate-right">You dont have permission to view this site.</h3>
<h3 class="w3-center w3-animate-zoom">????</h3>
<h6 class="w3-center w3-animate-zoom">error code:403 forbidden</h6>
</div>
</body>
</html>
อ้างอิง: Access Denied page template
คลิก(more)เพื่อดูรายละเอียด และคลิกUpdate
เมื่อเสร็จแล้วจะแสดงหน้าจอแบบนี้ จากนั้นให้ไปทดสอบที่หน้าเว็บไซต์ของเราได้เลย
ตรวจสอบ URL หลังตั้งค่า
URL ที่จะทำการตรวจสอบก็จะมีดังนี้
・URL ของ Elastic Beanstalk
・DNS name ของ Load Balancers
・Distribution domain name ของ CloudFront
URL ของ Elastic Beanstalk
เปิด URL ของ Elastic Beanstalk ก็จะแสดง Error ตามที่เราได้ตั้งค่าไว้
http://[Environment name].[Active Region].elasticbeanstalk.com
DNS name ของ Load Balancers
เปิด DNS name ของ Load Balancers ก็จะแสดง Error ตามที่เราได้ตั้งค่าไว้
http://awseb-awseb-xxxxxxxxxx-xxxxxxxxxx.ap-southeast-1.elb.amazonaws.com/
Distribution domain name ของ CloudFront
เปิด Distribution domain name ของ CloudFront ก็จะเห็นว่าสามารถเข้าถึงหน้าเว็บไซต์ได้
https://xxxxxxxxxx.cloudfront.net
สุดท้ายนี้
เราสามารถดีไซน์หน้า Error ของเราให้มีลูกเล่นและสีสรรค์ได้ ซึ่งการตั้งค่านี้ผมคิดว่าจะทำให้การใช้งานเว็บไซต์ของเรามีความน่าสนใจและน่าใช้มากขึ้นครับ
ผมหวังว่าบทความนี้จะเป็นประโยชน์ให้กับผู้อ่านได้นะครับ
POP จากบริษัท Classmethod (Thailand) ครับ !
