สร้างหน้า Custom Error Pages Nginx 404 และ 50x

หลายๆคนอาจจะประสบปัญหาว่าเวลา config NGINX แล้วถ้าหาก User ไปใน path ของ Website แล้วเจอปัญหา Error 404 ซึ่งเป็นการแจ้งว่า path หรือไฟล์นั้นไม่พบบนเวปไซต์ของเราแต่ NGINX ดันโชว์หราว่าเราใช้ NGINX เป็น Webserver นะวันนี้เรามีทางออกให้เราในเมื่อเราสามารถสร้างหน้า   Error 404 ได้เองวิธีการนี้ใช้งานบน NGINX ที่ใช้งานบน Ubuntu Server 14.04 และ 16.04 อันดับแรกเรามาเตรียมไฟล์ HTML กันก่อน

ผมได้เตรียมตัวอย่างไฟล์ HTML ง่ายๆไว้ให้ดูเป็นตัวอย่างหรือถ้าหากใครจะสร้างแบบไหนก็ตามสะดวกเลยนะครับ

404-1

<head>
<meta charset=”UTF-8″>
</head>
<h1 style=’color:red’>Error 404: Not found :-(</h1>
<p>หนูก็ไม่รู้เหมือนกันว่าฟายอยู่ไหน ขอโทดด้วย แน่ใจนะว่าพิมพ์ถูกที่ทาง?</p>
สำหรับตัวอย่างนี้เราจะใช้ nano text editor ก็พิมพ์ตามนี้

# nano 404.html

หลังจากที่สร้างไฟล์พร้อมแล้วเราก็ต้องมาเตรียม config สำหรับ NGINX กันสำหรับการ config error 404 นั้น NGINX ก็ได้เตรียม function redirect ไว้ให้พร้อมแล้ว

error_page 404  /404.html;

location = /404.html {
root /var/www/html;
internal;
}

ให้ copy config ข้างบนนี้ไปวางไว้ใน Server block ของ config แต่ละ Server block ถ้าหากเรามีหลายเวปไซต์ในตัวอย่างนี้ใช้ใน block อง HTTPS

# HTTPS
server {
listen 443 http2;
server_name _;
….
….

error_page 404 /404.html;

location = /404.html {
root /var/www/html;
internal;
}


}

วางแล้วหน้าตาก็จะประมาณนี้
อธิบายตัวแปล

error_page คือตัวกำหนดว่าเราจะใช้ error code page redirect ชุดไหนบ้างในตัวอย่างนี้เราใช้เฉพาะ 404 ก่อน


location คือที่อยู่ของไฟล์ HTML ที่เราสร้างไวเมื่อสักครู่นี้ถ้าหากว่าเราวางไว้ที่ root path ก็ใส่แค่ / นำหน้าพอ


root คือบอกตำแหน่ง path ของไฟล์ HTML ที่เราต้องการให้ NGINX redirect ไปยัง path นั้นๆ

internal คือเป็นการระบุบตำแหน่งว่าใช้สำหรับ Internal request เท่านั้น
หลังจากใส่ config เรียบร้อยแล้วเราก็ทำการ reload NGINX config โดย

# /etc/init.d/nginx restart

ทำการทดสอบว่า Error 404 เราสามารถใช้งานโดยการเข้าไปที่ในเวปของเราใน path ที่ไม่มีอยู่

404-2

เท่านี้เราก็มี Error 404 เป็นของตัวเองแล้ว

มาต่อกันที่ 50x กันสำหรับ 50x นั้นจะเป็น error พวก PHP หรือการทำงานที่ผิดพลาดของ NGINX 50x-1
รูปตัวอย่าง 50x error ของ NGINX

วิธีการทำก็เหมือนของ 404 เลยครับเพียงแค่เพิ่ม file HTML ขึ้นมาสำหรับ 50x จะได้ไม่ไปซ้ำกันกับ 404

<head>
<meta charset=”UTF-8″>
</head>
<h1>Oops! Something went wrong…</h1>
<h1>พระเจ้าช่วยกล้วยทอดฮูสตั้นวีก็อทอะพร่าบร่อม…</h1>
<p>We seem to be having some technical difficulties. Hang tight.</p>
<p>ดูเหมือนว่าเราจะมีปัญหาทางเทคนิคจับแน่นๆนะน้อง</p>

สำหรับตัวอย่างนี้เราจะใช้ nano text editor ก็พิมพ์ตามนี้

# nano 50x.html

หลังจากที่สร้างไฟล์พร้อมแล้วเราก็ต้องมาเตรียม config สำหรับ NGINX กันสำหรับการ config error 50x นั้น NGINX ก็ได้เตรียม function redirect ไว้ให้พร้อมแล้ว

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /var/www/html;
internal;
}
ขั้นตอนก็ทำเหมือนของ 404 ทุกประการ

ให้ copy config ข้างบนนี้ไปวางไว้ใน Server block ของ config แต่ละ Server block ถ้าหากเรามีหลายเวปไซต์ในตัวอย่างนี้ใช้ใน block อง HTTPS

# HTTPS
server {
listen 443 http2;
server_name _;
….
….

error_page 404 /404.html;

location = /404.html {
root /var/www/html;
internal;
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /var/www/html;
internal;
}



}

# /etc/init.d/nginx restart

ทำการทดสอบว่า Error 50x เราสามารถใช้งานโดยการปิด php หรือทำให้เวปใช้งานไม่ได้
50x-2
เท่านี้เราก็มี error redirect ที่สามารถซ่อนว่าเราใช้ NGINX เรียบร้อยแล้วไม่ยากเลยใช่ไหมาสำหรับ NGINX

 

 

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *