Custom Error Pages ใน Nginx — สร้างหน้า Error ที่สวยงามและเป็นมืออาชีพ

เมื่อผู้เยี่ยมชมเว็บไซต์ของคุณพบข้อผิดพลาด (error) เช่น 404 Not Found หรือ 500 Internal Server Error หน้าแสดงข้อผิดพลาดเป็นสิ่งแรกที่ผู้ใช้เห็น หากปล่อยให้เป็นค่าเริ่มต้นแบบเบื่อ ๆ ผู้เยี่ยมชมอาจรู้สึกว่าเว็บไซต์ของคุณไม่เป็นมืออาชีพหรือมีปัญหา ในทางตรงกันข้าม หน้า error ที่ออกแบบมาอย่างดี ไม่เพียงแต่ช่วยให้ผู้ใช้เข้าใจสถานการณ์เท่านั้น แต่ยังสร้างความประทับใจและรักษาความเชื่อใจได้

Nginx เป็น web server ที่ยอดนิยมและมีประสิทธิภาพสูง โดยมีความสามารถในการสร้างและปรับแต่ง error pages ได้อย่างยืดหยุ่น บทความนี้จะสอนวิธีการสร้างหน้า error ที่สวยงาม มีประสิทธิภาพ และปรับเข้ากับ brand ของคุณได้อย่างสมบูรณ์

ความรู้พื้นฐาน: error_page Directive ใน Nginx

error_page directive คือคำสั่งที่บอก Nginx ให้ใช้หน้า error ที่ระบุแทนการแสดง error code เป็นข้อความธรรมชาติ ไวยากรณ์พื้นฐานคือ:

error_page <error_code> <file_path>;
error_page <error_code_1> <error_code_2> <file_path>;
error_page <error_code> =<status_code> <file_path>;
error_page <error_code> @<named_location>;
error_page <error_code> =<response_code> <redirect_uri>;

ได้แก่:

error_code — รหัส HTTP error เช่น 404, 500, 502, 503, 504 เป็นต้น
file_path — เส้นทางไฟล์ HTML ที่อยู่บน server (เช่น /errors/404.html)
=<status_code> — เปลี่ยน HTTP status code ที่ส่งไปให้ผู้เยี่ยมชม
@<named_location> — ส่ง request ไปยัง named location อื่น

ตัวอย่างการใช้งานพื้นฐาน:

server {
    listen 80;
    server_name example.com;
    root /var/www/html;

    # ส่งไปยังไฟล์ 404.html เมื่อพบ error 404
    error_page 404 /errors/404.html;
    error_page 500 502 503 504 /errors/5xx.html;
}

สร้างหน้า Error ที่สวยงาม

ไฟล์ error page ควรเป็นไฟล์ HTML สม่ำเสมอ ที่มีข้อมูลมีประโยชน์ และ design ที่ดี นี่คือตัวอย่างไฟล์ 404.html ที่ดี:

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - หน้าไม่พบ</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: #333;
        }
        .container {
            text-align: center;
            background: white;
            padding: 50px;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            max-width: 600px;
        }
        h1 {
            font-size: 72px;
            margin: 20px 0;
            color: #667eea;
        }
        p {
            font-size: 18px;
            line-height: 1.6;
            color: #666;
        }
        a {
            display: inline-block;
            margin-top: 20px;
            padding: 12px 30px;
            background: #667eea;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s;
        }
        a:hover {
            background: #764ba2;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>404</h1>
        <p>ขออภัย ไม่พบหน้าที่คุณกำลังหา</p>
        <p>หน้านี้อาจถูกลบหรือย้ายไปแล้ว</p>
        <a href="/">กลับไปยังหน้าแรก</a>
    </div>
</body>
</html>

ใช้ error_page กับการ Redirect

บ่อยครั้งที่คุณต้องการ redirect ไปยัง URL อื่นแทนที่แสดง error page ตรงแบบนั้น ทำได้ดังนี้:

server {
    listen 80;
    server_name example.com;

    # Redirect error ไปยัง URL อื่น
    error_page 404 =200 /404.html;
    error_page 500 502 503 504 /error.html;

    # Redirect ไปยัง URL ที่แตกต่างไป
    error_page 410 = http://example.com/old-page-moved;
}

=200 บอก Nginx ว่า “แม้ว่าอาจมี error 404 แต่จงส่ง HTTP status 200 ไปแทน” ซึ่งมีประโยชน์เมื่อแสดง error page เป็นส่วนหนึ่งของการ render page ปกติ

ใช้ Named Locations กับ Error Handling

วิธีขั้นสูงคือการใช้ named location ร่วมกับ error_page เพื่อให้สามารถใช้ logic ที่ซับซ้อนมากขึ้น:

server {
    listen 80;
    server_name example.com;
    root /var/www/html;

    error_page 404 @error404;
    error_page 500 502 503 504 @error5xx;

    # Named location สำหรับ 404 errors
    location @error404 {
        default_type text/html;
        return 200 '<html><body><h1>404 Not Found</h1></body></html>';
    }

    # Named location สำหรับ 5xx errors
    location @error5xx {
        default_type text/html;
        return 500 '<html><body><h1>Server Error</h1></body></html>';
    }
}

วิธีนี้ให้ความยืดหยุ่นมากขึ้น เนื่องจากเราสามารถใช้ Nginx directives ต่างๆ ภายใน named location ได้

ข้อควรระวัง: Recursive Error Handling

ปัญหาที่เกิดขึ้นบ่อยคือ “recursive error” — เมื่อไฟล์ error page เองกลับ generate error ใหม่:

server {
    listen 80;
    server_name example.com;
    root /var/www/html;

    # ❌ ผิด: ถ้า /errors/404.html ไม่พบ จะเป็น recursive error
    error_page 404 /errors/404.html;
}

เพื่อหลีกเลี่ยง recursive errors ให้ใช้ named location หรือตรวจสอบให้แน่ใจว่าไฟล์ error page มีอยู่จริง:

server {
    listen 80;
    server_name example.com;
    root /var/www/html;

    # ✅ ถูก: ใช้ named location เพื่อหลีกเลี่ยง recursive errors
    error_page 404 @notfound;
    
    location @notfound {
        return 404 '<h1>404 - Not Found</h1>';
    }
}

ตัวอย่างเต็มรูปแบบ: Error Handling ที่สมบูรณ์

นี่คือตัวอย่างการตั้งค่า Nginx error page ที่สมบูรณ์และ best practice:

server {
    listen 80;
    listen [::]:80;
    server_name example.com www.example.com;
    root /var/www/html;
    index index.html index.htm;

    # Error page configuration
    error_page 400 401 403 /error.html;
    error_page 404 =404 /404.html;
    error_page 500 502 503 504 /error.html;

    # Location สำหรับ error pages
    location ~ ^/(404|error)\.html$ {
        internal;
        access_log off;
    }

    # Main site location
    location / {
        try_files $uri $uri/ =404;
    }

    # Static files
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
}

การทดสอบ Error Pages

หลังจากตั้งค่า error page เรียบร้อย ลองทดสอบด้วยคำสั่ง curl เพื่อให้แน่ใจว่าทำงานถูกต้อง:

# ทดสอบ 404 error
curl -i http://example.com/nonexistent-page

# ทดสอบ 500 error (ถ้ามี PHP backend)
curl -i http://example.com/error-triggering-page.php

# ตรวจสอบ HTTP status code
curl -o /dev/null -s -w "%{http_code}" http://example.com/nonexistent

ต้องแน่ใจว่า HTTP status code ที่ส่งมา (404, 500) ถูกต้อง และ error page content แสดงถูกต้อง

สรุป

การสร้างหน้า error ใน Nginx ที่สวยงามและมีประโยชน์นั้นช่วยปรับปรุงประสบการณ์ผู้ใช้และสร้างความเชื่อใจต่อเว็บไซต์ของคุณ เคล็ดลับสำคัญคือ:

ใช้ error_page directive เพื่อระบุหน้า error ที่ต้องการแสดง
ออกแบบหน้า error ให้สวยงาม ชัดเจน และมีข้อมูลที่เป็นประโยชน์
หลีกเลี่ยง recursive errors โดยใช้ named locations หรือตรวจสอบการมีอยู่ของไฟล์
ทดสอบหน้า error เพื่อให้แน่ใจว่าทำงานถูกต้องและแสดง HTTP status code ที่เหมาะสม
พิจารณาใช้ตัวแปร Nginx เช่น $request_uri เพื่อให้ผู้ใช้ทราบว่าเกิดอะไรขึ้น

แนะนำบริการ DE

หากคุณต้องการเซิร์ฟเวอร์ที่ควบคุมได้เต็มที่เพื่อปรับแต่ง Nginx และสร้าง error pages ที่เหมาะกับธุรกิจของคุณ Cloud VPS ของ DE เป็นตัวเลือกที่เหมาะสม ด้วยการเข้าถึง root access คุณสามารถตั้งค่า Nginx ได้อย่างสมบูรณ์ และสร้าง error pages ที่ตรงกับความต้องการของคุณ ทีมสนับสนุนทางเทคนิค 24/7 ของ DE พร้อมช่วยคุณแก้ไขปัญหาใด ๆ ที่เกิดขึ้น

สำหรับผู้ที่ต้องการความสะดวกสบาย Cloud Hosting ของ DE ก็เป็นอีกทางเลือกที่ดี โดยมี Nginx ที่ติดตั้งและตั้งค่าไว้อย่างเป็นมืออาชีพ คุณสามารถปรับแต่ง error pages ผ่าน control panel โดยไม่ต้องกังวลเรื่องการบริหารเซิร์ฟเวอร์ ทั้ง DE Cloud VPS และ DE Cloud Hosting สนับสนุน Nginx และมีการสนับสนุนทางเทคนิค 24/7 เพื่อช่วยคุณแก้ไขปัญหาและปรับแต่งการกำหนดค่า สอบถามรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ของเรา