Custom error pages in NGINX allow you to provide a better user experience by displaying friendly and informative error messages instead of the default server error responses. This can be particularly useful for handling common HTTP errors such as 404 (Not Found) or 500 (Internal Server Error).
Key Concepts
- Error Codes: HTTP status codes that indicate the result of the server's attempt to fulfill a request.
- Custom Error Pages: HTML pages that are displayed when a specific error occurs.
- NGINX Configuration: Directives in the NGINX configuration file to specify custom error pages.
Steps to Configure Custom Error Pages
- Create Custom Error Pages
First, create the HTML files for the custom error pages. For example, create 404.html and 500.html in your web server's root directory.
<!-- 404.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Not Found</title>
</head>
<body>
<h1>404 - Page Not Found</h1>
<p>Sorry, the page you are looking for does not exist.</p>
</body>
</html><!-- 500.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal Server Error</title>
</head>
<body>
<h1>500 - Internal Server Error</h1>
<p>Sorry, something went wrong on our end.</p>
</body>
</html>
- Update NGINX Configuration
Edit your NGINX configuration file (usually located at /etc/nginx/nginx.conf or /etc/nginx/sites-available/default) to include directives for custom error pages.
server {
listen 80;
server_name example.com;
root /var/www/html;
# Custom error pages
error_page 404 /404.html;
error_page 500 502 503 504 /500.html;
location = /404.html {
internal;
}
location = /500.html {
internal;
}
# Other server configurations...
}
- Reload NGINX
After updating the configuration file, reload NGINX to apply the changes.
Practical Example
Let's walk through a practical example where we configure custom error pages for a simple website.
Step-by-Step Example
-
Create Custom Error Pages: Save the provided
404.htmland500.htmlfiles in the/var/www/htmldirectory. -
Edit NGINX Configuration: Open the NGINX configuration file and add the custom error page directives.
server {
listen 80;
server_name mywebsite.com;
root /var/www/html;
error_page 404 /404.html;
error_page 500 502 503 504 /500.html;
location = /404.html {
internal;
}
location = /500.html {
internal;
}
location / {
try_files $uri $uri/ =404;
}
}- Reload NGINX: Apply the changes by reloading NGINX.
Testing
To test the custom error pages:
- Navigate to a non-existent URL on your website (e.g.,
http://mywebsite.com/nonexistentpage) to see the 404 error page. - Simulate a server error to see the 500 error page (this can be more complex and might require temporarily misconfiguring your server).
Common Mistakes and Tips
- File Paths: Ensure the paths to the custom error pages are correct.
- Permissions: Verify that NGINX has the necessary permissions to read the custom error page files.
- Configuration Syntax: Double-check the NGINX configuration syntax to avoid errors when reloading the server.
Summary
In this section, you learned how to create and configure custom error pages in NGINX. Custom error pages enhance user experience by providing informative and user-friendly messages when errors occur. You also practiced configuring NGINX to serve these custom pages and tested the setup to ensure it works correctly.
Next, you will learn about logging and log formats in NGINX, which will help you monitor and troubleshoot your web server more effectively.