{"id":33,"date":"2023-01-30T11:16:12","date_gmt":"2023-01-30T10:16:12","guid":{"rendered":"https:\/\/fabrizio.vanzani.it\/?p=33"},"modified":"2023-02-01T18:29:41","modified_gmt":"2023-02-01T17:29:41","slug":"better-magento-maintenance-mode-with-nginx","status":"publish","type":"post","link":"https:\/\/fabrizio.vanzani.it\/?p=33","title":{"rendered":"Better magento maintenance mode with Nginx"},"content":{"rendered":"\n

This configuration allows to show a maintenance page handled by nginx. This solution does not depend on magento to show up.<\/p>\n\n\n\n

Configure magento nignx.conf<\/h2>\n\n\n\n

Add the line at the beginning of magento “\/path\/to\/magento\/root\/nginx.conf”:<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
include<\/span> <\/span>\/<\/span>path<\/span>\/<\/span>to<\/span>\/<\/span>magento<\/span>\/<\/span>root<\/span>\/<\/span>maintenance<\/span>.<\/span>conf<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Create maintenance.conf file:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
tee<\/span> <\/span>\/<\/span>path<\/span>\/<\/span>to<\/span>\/<\/span>magento<\/span>\/<\/span>root<\/span>\/<\/span>maintenance<\/span>.<\/span>conf<\/span> <\/span><<<\/span>'<\/span>EOF<\/span>'<\/span><\/span>\n# <\/span>begin<\/span> <\/span>maintenance<\/span> <\/span>mode<\/span><\/span>\nset<\/span> <\/span>$maintenance<\/span> <\/span>off<\/span>;<\/span><\/span>\nif<\/span> (<\/span>-<\/span>f<\/span> <\/span>$MAGE_ROOT<\/span>\/<\/span>var<\/span>\/<\/span>.<\/span>maintenance<\/span>.<\/span>flag<\/span>) <\/span>{<\/span><\/span>\n  <\/span>set<\/span> <\/span>$maintenance<\/span> <\/span>on<\/span>;<\/span><\/span>\n}<\/span><\/span>\nif<\/span> (<\/span>$remote_addr<\/span> <\/span>~<\/span> (<\/span>192.0<\/span>.<\/span>2.110<\/span>|<\/span>192.0<\/span>.<\/span>2.115<\/span>)) <\/span>{<\/span><\/span>\n         <\/span>set<\/span> <\/span>$maintenance<\/span> <\/span>off<\/span>;<\/span><\/span>\n}<\/span>     <\/span><\/span>\nif<\/span> (<\/span>$maintenance<\/span> <\/span>=<\/span> <\/span>on<\/span>) <\/span>{<\/span><\/span>\n  <\/span>return<\/span> <\/span>503<\/span>;<\/span><\/span>\n}<\/span><\/span>\nerror_page<\/span> <\/span>503<\/span> <\/span>@maintenance<\/span>;<\/span><\/span>\nlocation<\/span> <\/span>@maintenance<\/span><\/span>\n{<\/span><\/span>\n\t#\u00a0seo<\/span>:<\/span> <\/span>add<\/span> <\/span>a<\/span> <\/span>retry<\/span> <\/span>after<\/span> <\/span>header<\/span> <\/span>if<\/span> <\/span>the<\/span> <\/span>maintenance<\/span> <\/span>lasts<\/span> <\/span>many<\/span> <\/span>hours<\/span><\/span>\n\t# <\/span>add_header<\/span> <\/span>Retry<\/span>-<\/span>After<\/span> <\/span>86400<\/span> <\/span>always<\/span>;<\/span> <\/span><\/span>\n        <\/span>rewrite<\/span> <\/span>^\/<\/span>(<\/span>.<\/span>*<\/span>\\<\/span>.<\/span>(<\/span>png<\/span>|<\/span>jpg<\/span>|<\/span>jpeg<\/span>|<\/span>svg<\/span>|<\/span>gif<\/span>|<\/span>webp<\/span>))<\/span>$<\/span> <\/span>\/<\/span>$1<\/span> <\/span>break;<\/span><\/span>\n        <\/span>rewrite<\/span> <\/span>^<\/span>(<\/span>.<\/span>*<\/span>)<\/span>$<\/span> <\/span>\/<\/span>index<\/span>.<\/span>html<\/span> <\/span>break;<\/span><\/span>\n        <\/span>root<\/span> <\/span>$MAGE_ROOT<\/span>\/<\/span>maintenance<\/span>;<\/span><\/span>\n}<\/span><\/span>\n# <\/span>end<\/span>  <\/span>maintenance<\/span> <\/span>mode<\/span><\/span>\nEOF<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Create a maintenance page<\/h2>\n\n\n\n
Create a simple maintenance page, here an example:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
cd<\/span> <\/span>\/<\/span>path<\/span>\/<\/span>to<\/span>\/<\/span>magento<\/span>\/<\/span>root<\/span>\/<\/span><\/span>\nmkdir<\/span> <\/span>-<\/span>p<\/span> <\/span>maintenance<\/span><\/span>\n<\/span>\nstore_name<\/span>=<\/span>'<\/span>Store Name<\/span>'<\/span><\/span>\ntel<\/span>=<\/span>'<\/span>+39 02 1234567<\/span>'<\/span><\/span>\nemail<\/span>=<\/span>'<\/span>info@example.com<\/span>'<\/span><\/span>\nstore_address<\/span>=<\/span>'<\/span>my store address... <\/span>'<\/span><\/span>\nlogo_url<\/span>=<\/span>"<\/span>https:\/\/www.example.com\/logo.jpg<\/span>"<\/span><\/span>\n<\/span>\ntee<\/span> <\/span>maintenance<\/span>\/<\/span>index<\/span>.<\/span>html<\/span> <\/span><<<\/span>EOF<\/span><\/span>\n<!<\/span>DOCTYPE<\/span> <\/span>html<\/span> <\/span>PUBLIC<\/span> <\/span>"<\/span>-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN<\/span>"<\/span><\/span>\n"<\/span>http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd<\/span>"<\/span>><\/span><\/span>\n<!--<\/span> <\/span>saved<\/span> <\/span>from<\/span> <\/span>url<\/span>=<\/span>(<\/span>0014<\/span>)about<\/span>:<\/span>internet<\/span> <\/span>--><\/span><\/span>\n<html<\/span> <\/span>xmlns<\/span>=<\/span>"<\/span>http:\/\/www.w3.org\/1999\/xhtml<\/span>"<\/span>><\/span><\/span>\n<head><\/span><\/span>\n<title><\/span>Site under maintenance \/ Sito in manutenzione<\/span><\/title><\/span><\/span>\n<meta<\/span> <\/span>http-equiv<\/span>=<\/span>"<\/span>Content-Type<\/span>"<\/span> <\/span>content<\/span>=<\/span>"<\/span>text\/html; charset=utf-8<\/span>"<\/span> <\/span>\/><\/span><\/span>\n    <\/span><script<\/span> <\/span>><\/span><\/span>\n        var timeleft = 12;<\/span><\/span>\n        var downloadTimer = setInterval(function()<\/span>{<\/span><\/span>\n            <\/span>if<\/span>(<\/span>timeleft<\/span> <\/span><=<\/span> <\/span>0<\/span>)<\/span>{<\/span><\/span>\n                <\/span>clearInterval<\/span>(<\/span>downloadTimer<\/span>)<\/span>;<\/span><\/span>\n                <\/span>setInterval<\/span>(<\/span>function<\/span>(<\/span>){<\/span>location<\/span>.<\/span>reload<\/span>()<\/span>;<\/span>},<\/span>1000<\/span>);<\/span><\/span>\n            <\/span>}<\/span><\/span>\n            <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>"<\/span>progressBar<\/span>"<\/span>)<\/span>.<\/span>value<\/span> <\/span>=<\/span> <\/span>12<\/span> <\/span>-<\/span> <\/span>timeleft<\/span>;<\/span><\/span>\n            <\/span>timeleft<\/span> <\/span>-=<\/span> <\/span>1<\/span>;<\/span><\/span>\n        <\/span>}<\/span>, 1000);<\/span><\/span>\n    <\/span><\/script><\/span><\/span>\n<style><\/span><\/span>\nbody <\/span>{<\/span>\t<\/span>text<\/span>-<\/span>align<\/span>:<\/span>center<\/span>;<\/span>background<\/span>-<\/span>color<\/span>:#<\/span>f6f6f6<\/span>;<\/span>}<\/span><\/span>\nbody > div:first-child <\/span>{<\/span><\/span>\n\t<\/span>border<\/span>:1<\/span>px<\/span> #<\/span>f0f0f0<\/span> <\/span>solid<\/span>;<\/span><\/span>\n      <\/span>border<\/span>-<\/span>radius<\/span>:10<\/span>px<\/span>;<\/span><\/span>\n\t<\/span>padding<\/span>:40<\/span>px<\/span>;<\/span><\/span>\n\t<\/span>margin<\/span>:20<\/span>px<\/span>;<\/span><\/span>\n\t<\/span>background<\/span>-<\/span>color<\/span>:#<\/span>e8e8e8<\/span>;<\/span><\/span>\n\t<\/span>color<\/span>:#<\/span>666<\/span>;<\/span><\/span>\n\t<\/span>font<\/span>-<\/span>family<\/span>: <\/span>helvetica<\/span>,<\/span> <\/span>arial<\/span>;<\/span><\/span>\n\t<\/span>font<\/span>-<\/span>size<\/span>:18<\/span>px<\/span>;<\/span><\/span>\n}<\/span><\/span>\nimg <\/span>{<\/span>width<\/span>:200<\/span>px<\/span>;<\/span>}<\/span><\/span>\nh1 <\/span>{<\/span>font<\/span>-<\/span>size<\/span>: 22<\/span>px<\/span>;<\/span>}<\/span><\/span>\na <\/span>{<\/span>\t<\/span>color<\/span>: #<\/span>196720<\/span>;<\/span>text<\/span>-<\/span>decoration<\/span>: <\/span>none<\/span>;<\/span>}<\/span><\/span>\n<\/style><\/span><\/span>\n<\/span>\n<\/head><\/span><\/span>\n<body<\/span> <\/span>><\/span><\/span>\n<div<\/span> <\/span>><\/span><\/span>\n<img<\/span> <\/span>src<\/span>=<\/span>"<\/span>${logo_url}<\/span>"<\/span> <\/span>\/><\/span><\/span>\n<p><progress<\/span> <\/span>value<\/span>=<\/span>"<\/span>0<\/span>"<\/span> <\/span>max<\/span>=<\/span>"<\/span>12<\/span>"<\/span> <\/span>id<\/span>=<\/span>"<\/span>progressBar<\/span>"<\/span>><\/progress><\/p><\/span><\/span>\n<\/span>\n<h3><i><\/span>Work in progress.<\/span><\/i><\/h3><\/span><\/span>\n<br><\/span><\/span>\n<p><i><\/span>Please try again in a few seconds.<\/span><\/i><\/p><\/span><\/span>\n<\/span>\n<p><\/span>Email: <\/span><a<\/span> <\/span>href<\/span>=<\/span>"<\/span>mailto:${email}<\/span>"<\/span>><\/span>$<\/span>{<\/span>email<\/span>}<\/a><\/span> <\/span><\/p><\/span><\/span>\n<p><\/span>Tel: <\/span><a<\/span> <\/span>href<\/span>=<\/span>"<\/span>tel:${tel}<\/span>"<\/span>><\/span>$<\/span>{<\/span>tel<\/span>}<\/a><\/p><\/span><\/span>\n<p><\/span>$<\/span>{<\/span>store_name<\/span>}<\/span> - $<\/span>{<\/span>store_address<\/span>}<\/span> <\/span><\/p><\/span><\/span>\n<\/div><\/span><\/span>\n<\/body><\/span><\/span>\n<\/html><\/span><\/span>\nEOF<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
Add more style for the progress bar:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/* progress bar styling *\/<\/span><\/span>\nprogress<\/span>[<\/span>value<\/span>] <\/span>{<\/span><\/span>\n    <\/span>\/* Reset the default appearance *\/<\/span><\/span>\n    <\/span>-<\/span>webkit<\/span>-<\/span>appearance<\/span>:<\/span> <\/span>none<\/span>;<\/span><\/span>\n    appearance<\/span>:<\/span> <\/span>none<\/span>;<\/span><\/span>\n<\/span>\n    width<\/span>:<\/span> 250<\/span>px<\/span>;<\/span><\/span>\n    height<\/span>:<\/span> 20<\/span>px<\/span>;<\/span><\/span>\n}<\/span><\/span>\nprogress<\/span>[<\/span>value<\/span>]::<\/span>-<\/span>webkit<\/span>-<\/span>progress<\/span>-<\/span>bar<\/span> <\/span>{<\/span><\/span>\n    <\/span>background<\/span>-<\/span>color<\/span>:<\/span> #<\/span>eee<\/span>;<\/span><\/span>\n    <\/span>border<\/span>-<\/span>radius<\/span>:<\/span> 2<\/span>px<\/span>;<\/span><\/span>\n    <\/span>box<\/span>-<\/span>shadow<\/span>:<\/span> <\/span>0<\/span> 1<\/span>px<\/span> 3<\/span>px<\/span> <\/span>rgba<\/span>(<\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>0.25<\/span>) <\/span>inset<\/span>;<\/span><\/span>\n}<\/span><\/span>\nprogress<\/span>[<\/span>value<\/span>]::<\/span>-<\/span>webkit<\/span>-<\/span>progress<\/span>-<\/span>value<\/span> <\/span>{<\/span><\/span>\n    <\/span>background<\/span>-<\/span>image<\/span>:<\/span><\/span>\n        <\/span>-<\/span>webkit<\/span>-<\/span>linear<\/span>-<\/span>gradient<\/span>(<\/span>-<\/span>45<\/span>deg<\/span>,<\/span><\/span>\n        <\/span>transparent<\/span> <\/span>33<\/span>%<\/span>,<\/span> <\/span>rgba<\/span>(<\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>.1<\/span>) <\/span>33<\/span>%<\/span>,<\/span><\/span>\n        <\/span>rgba<\/span>(<\/span>0<\/span>,<\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>.1<\/span>) <\/span>66<\/span>%<\/span>,<\/span> <\/span>transparent<\/span> <\/span>66<\/span>%<\/span>)<\/span>,<\/span><\/span>\n        <\/span>-<\/span>webkit<\/span>-<\/span>linear<\/span>-<\/span>gradient<\/span>(<\/span>top<\/span>,<\/span><\/span>\n        <\/span>rgba<\/span>(<\/span>255<\/span>,<\/span> <\/span>255<\/span>,<\/span> <\/span>255<\/span>,<\/span> <\/span>.25<\/span>)<\/span>,<\/span><\/span>\n        <\/span>rgba<\/span>(<\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>.25<\/span>))<\/span>,<\/span><\/span>\n        <\/span>-<\/span>webkit<\/span>-<\/span>linear<\/span>-<\/span>gradient<\/span>(<\/span>left<\/span>,<\/span> #<\/span>105065<\/span>,<\/span>  #<\/span>ad101e<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n    <\/span>border<\/span>-<\/span>radius<\/span>:<\/span> 5<\/span>px<\/span>;<\/span><\/span>\n    <\/span>background<\/span>-<\/span>size<\/span>:<\/span> 35<\/span>px<\/span> 20<\/span>px<\/span>,<\/span> <\/span>100<\/span>%<\/span> <\/span>100<\/span>%<\/span>,<\/span> <\/span>100<\/span>%<\/span> <\/span>100<\/span>%;<\/span><\/span>\n}<\/span><\/span>\n@<\/span>-<\/span>webkit<\/span>-<\/span>keyframes<\/span> <\/span>animate<\/span>-<\/span>stripes<\/span> <\/span>{<\/span><\/span>\n    <\/span>100<\/span>%<\/span> <\/span>{<\/span> <\/span>background<\/span>-<\/span>position<\/span>:<\/span> <\/span>-<\/span>100<\/span>px<\/span> 0<\/span>px<\/span>;<\/span> <\/span>}<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n@keyframes<\/span> <\/span>animate<\/span>-<\/span>stripes<\/span> <\/span>{<\/span><\/span>\n    <\/span>100<\/span>%<\/span> <\/span>{<\/span> <\/span>background<\/span>-<\/span>position<\/span>:<\/span> <\/span>-<\/span>100<\/span>px<\/span> 0<\/span>px<\/span>;<\/span> <\/span>}<\/span><\/span>\n}<\/span><\/span>\nprogress<\/span>[<\/span>value<\/span>] <\/span>{<\/span><\/span>\n    <\/span>\/* Reset the default appearance *\/<\/span><\/span>\n    <\/span>-<\/span>webkit<\/span>-<\/span>appearance<\/span>:<\/span> <\/span>none<\/span>;<\/span><\/span>\n    <\/span>-<\/span>moz<\/span>-<\/span>appearance<\/span>:<\/span> <\/span>none<\/span>;<\/span><\/span>\n    appearance<\/span>:<\/span> <\/span>none<\/span>;<\/span><\/span>\n<\/span>\n    <\/span>\/* Get rid of default border in Firefox. *\/<\/span><\/span>\n    border<\/span>:<\/span> <\/span>none<\/span>;<\/span><\/span>\n<\/span>\n    <\/span>\/* Dimensions *\/<\/span><\/span>\n    width<\/span>:<\/span> 250<\/span>px<\/span>;<\/span><\/span>\n    height<\/span>:<\/span> 20<\/span>px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nprogress<\/span>[<\/span>value<\/span>]::<\/span>-<\/span>moz<\/span>-<\/span>progress<\/span>-<\/span>bar<\/span> <\/span>{<\/span><\/span>\n    <\/span>background<\/span>-<\/span>image<\/span>:<\/span><\/span>\n        <\/span>-<\/span>moz<\/span>-<\/span>linear<\/span>-<\/span>gradient<\/span>(<\/span><\/span>\n            135<\/span>deg<\/span>,<\/span><\/span>\n            <\/span>transparent<\/span> <\/span>33<\/span>%<\/span>,<\/span><\/span>\n            <\/span>rgba<\/span>(<\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>0.1<\/span>) <\/span>33<\/span>%<\/span>,<\/span><\/span>\n            <\/span>rgba<\/span>(<\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>0.1<\/span>) <\/span>66<\/span>%<\/span>,<\/span><\/span>\n            <\/span>transparent<\/span> <\/span>66<\/span>%<\/span><\/span>\n        )<\/span>,<\/span><\/span>\n        <\/span>-<\/span>moz<\/span>-<\/span>linear<\/span>-<\/span>gradient<\/span>(<\/span><\/span>\n            <\/span>top<\/span>,<\/span><\/span>\n            <\/span>rgba<\/span>(<\/span>255<\/span>,<\/span> <\/span>255<\/span>,<\/span> <\/span>255<\/span>,<\/span> <\/span>0.25<\/span>)<\/span>,<\/span><\/span>\n            <\/span>rgba<\/span>(<\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>0.25<\/span>)<\/span><\/span>\n        )<\/span>,<\/span><\/span>\n        <\/span>-<\/span>moz<\/span>-<\/span>linear<\/span>-<\/span>gradient<\/span>(<\/span><\/span>\n            <\/span>left<\/span>,<\/span><\/span>\n            #<\/span>105065<\/span>,<\/span><\/span>\n            #<\/span>ad101e<\/span><\/span>\n        )<\/span>;<\/span><\/span>\n<\/span>\n    <\/span>border<\/span>-<\/span>radius<\/span>:<\/span> 5<\/span>px<\/span>;<\/span><\/span>\n    <\/span>background<\/span>-<\/span>size<\/span>:<\/span> 35<\/span>px<\/span> 20<\/span>px<\/span>,<\/span> <\/span>100<\/span>%<\/span> <\/span>100<\/span>%<\/span>,<\/span> <\/span>100<\/span>%<\/span> <\/span>100<\/span>%;<\/span><\/span>\n}<\/span><\/span>\n\/* end progress bar styling *\/<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Drawbacks<\/h2>\n\n\n\n
Remember to add your whitelist IPs both in “maintenace.conf” and in “var\/maintenance.ip”. <\/p>\n\n\n\n
Sources<\/h2>\n\n\n\n
https:\/\/experienceleague.adobe.com\/docs\/commerce-operations\/upgrade-guide\/troubleshooting\/maintenance-mode-options.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
This configuration allows to show a maintenance page handled by nginx. This solution does not depend on magento to show up.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,4,17],"tags":[18],"class_list":["post-33","post","type-post","status-publish","format-standard","hentry","category-2-x","category-magento","category-nginx","tag-maintenance"],"_links":{"self":[{"href":"https:\/\/fabrizio.vanzani.it\/index.php?rest_route=\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fabrizio.vanzani.it\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fabrizio.vanzani.it\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fabrizio.vanzani.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fabrizio.vanzani.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=33"}],"version-history":[{"count":4,"href":"https:\/\/fabrizio.vanzani.it\/index.php?rest_route=\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":38,"href":"https:\/\/fabrizio.vanzani.it\/index.php?rest_route=\/wp\/v2\/posts\/33\/revisions\/38"}],"wp:attachment":[{"href":"https:\/\/fabrizio.vanzani.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fabrizio.vanzani.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fabrizio.vanzani.it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}