This configuration allows to show a maintenance page handled by nginx. This solution does not depend on magento to show up.
Configure magento nignx.conf
Add the line at the beginning of magento “/path/to/magento/root/nginx.conf”:
include /path/to/magento/root/maintenance.conf;Create maintenance.conf file:
tee /path/to/magento/root/maintenance.conf <<'EOF'
# begin maintenance mode
set $maintenance off;
if (-f $MAGE_ROOT/var/.maintenance.flag) {
set $maintenance on;
}
if ($remote_addr ~ (192.0.2.110|192.0.2.115)) {
set $maintenance off;
}
if ($maintenance = on) {
return 503;
}
error_page 503 @maintenance;
location @maintenance
{
# seo: add a retry after header if the maintenance lasts many hours
# add_header Retry-After 86400 always;
rewrite ^/(.*\.(png|jpg|jpeg|svg|gif|webp))$ /$1 break;
rewrite ^(.*)$ /index.html break;
root $MAGE_ROOT/maintenance;
}
# end maintenance mode
EOFCreate a maintenance page
Create a simple maintenance page, here an example:
cd /path/to/magento/root/
mkdir -p maintenance
store_name='Store Name'
tel='+39 02 1234567'
email='info@example.com'
store_address='my store address... '
logo_url="https://www.example.com/logo.jpg"
tee maintenance/index.html <<EOF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Site under maintenance / Sito in manutenzione</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script >
var timeleft = 12;
var downloadTimer = setInterval(function(){
if(timeleft <= 0){
clearInterval(downloadTimer);
setInterval(function(){location.reload();},1000);
}
document.getElementById("progressBar").value = 12 - timeleft;
timeleft -= 1;
}, 1000);
</script>
<style>
body { text-align:center;background-color:#f6f6f6;}
body > div:first-child {
border:1px #f0f0f0 solid;
border-radius:10px;
padding:40px;
margin:20px;
background-color:#e8e8e8;
color:#666;
font-family: helvetica, arial;
font-size:18px;
}
img {width:200px;}
h1 {font-size: 22px;}
a { color: #196720;text-decoration: none;}
</style>
</head>
<body >
<div >
<img src="${logo_url}" />
<p><progress value="0" max="12" id="progressBar"></progress></p>
<h3><i>Work in progress.</i></h3>
<br>
<p><i>Please try again in a few seconds.</i></p>
<p>Email: <a href="mailto:${email}">${email}</a> </p>
<p>Tel: <a href="tel:${tel}">${tel}</a></p>
<p>${store_name} - ${store_address} </p>
</div>
</body>
</html>
EOF
Add more style for the progress bar:
/* progress bar styling */
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;
width: 250px;
height: 20px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #105065, #ad101e);
border-radius: 5px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
@-webkit-keyframes animate-stripes {
100% { background-position: -100px 0px; }
}
@keyframes animate-stripes {
100% { background-position: -100px 0px; }
}
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of default border in Firefox. */
border: none;
/* Dimensions */
width: 250px;
height: 20px;
}
progress[value]::-moz-progress-bar {
background-image:
-moz-linear-gradient(
135deg,
transparent 33%,
rgba(0, 0, 0, 0.1) 33%,
rgba(0, 0, 0, 0.1) 66%,
transparent 66%
),
-moz-linear-gradient(
top,
rgba(255, 255, 255, 0.25),
rgba(0, 0, 0, 0.25)
),
-moz-linear-gradient(
left,
#105065,
#ad101e
);
border-radius: 5px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
/* end progress bar styling */Drawbacks
Remember to add your whitelist IPs both in “maintenace.conf” and in “var/maintenance.ip”.
Leave a Reply