When NGINX attempts to process a client’s request, it returns an error each time it encounters an error. An HTTP response code and a brief description are included with each error. The error is typically presented to the user via a default HTML page.
NGINX custom error page create
First need to create a simple html page for show the custom error page.
Sample HTML page
$ sudo /var/www/html $ sudo touch custom-error.html
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> body { display: flex; flex-flow: row wrap; align-content: center; justify-content: center; } div { width: 100%; text-align: center; } .number { background: #fff; position: relative; font: 900 30vmin "Consolas"; letter-spacing: 5vmin; text-shadow: 2px -1px 0 #000, 4px -2px 0 #0a0a0a, 6px -3px 0 #0f0f0f, 8px -4px 0 #141414, 10px -5px 0 #1a1a1a, 12px -6px 0 #1f1f1f, 14px -7px 0 #242424, 16px -8px 0 #292929; } .number::before { background-color: #673ab7; background-image: radial-gradient(closest-side at 50% 50%, #ffc107 100%, rgba(0, 0, 0, 0)), radial-gradient(closest-side at 50% 50%, #e91e63 100%, rgba(0, 0, 0, 0)); background-repeat: repeat-x; background-size: 40vmin 40vmin; background-position: -100vmin 20vmin, 100vmin -25vmin; width: 100%; height: 100%; mix-blend-mode: screen; -webkit-animation: moving 10s linear infinite both; animation: moving 10s linear infinite both; display: block; position: absolute; content: ""; } @-webkit-keyframes moving { to { background-position: 100vmin 20vmin, -100vmin -25vmin; } } @keyframes moving { to { background-position: 100vmin 20vmin, -100vmin -25vmin; } } .text { font: 400 5vmin "Courgette"; } .text span { font-size: 10vmin; } </style>
</head>
<body>
<div class="number">Error %{ERRORNAME}</div>
<div class="text"><span>Oops...</span>
<br>
<h1>Contact support</h1>
</div>
</body>
</html>
Here ERRORNAME come from nginx
Configuring NGINX Error Page
First, we will create an custom-error-page.conf configuration file in the snippet directory at the /etc/nginx/snippets path.
Read this How to install cloudflare warp on ubuntu 22.04
The following command will create a new directory with the name snippets if it does not already exist in the /etc/nginx path.
$ sudo mkdir -p /etc/nginx/snippets
Then, in the snippets directory, run the following command to create the custom-error-page.conf configuration file.
$ sudo nano /etc/nginx/snippets/custom-error-page.conf
After the file has been opened for editing, copy the code below, paste it into the configuration file, and then save it.
error_page 404 403 500 503 /custom-error-page.html;
location = /custom-error-page.html {
sub_filter '%{ERRORNAME}' $status;
sub_filter_once off;
root /var/www/html;
internal;
}
NGINX will return the error-page.html response whenever it receives a 404,500,503 response from the user.
After that, the custom-error-page.conf file needs to be included in the NGINX configuration file.open the NGINX configuration file using the following command.
$ sudo nano /etc/nginx/sites-available/default
Finally, you can restart the NGINX web server.
$ sudo systemctl reload nginx
Finally open your browser and visit any page that does not exist & error page show.
Thank you .it’s work