admin/gw-svelte
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Wire maintenance page into deploy script as a dynamic toggle

Browse Source 
Replaces the earlier auto-fallback-on-upstream-error approach with an
explicit flag-file toggle controlled by the deploy script. The flag
is touched before stopping the app and removed on successful finish
(or via trap if the deploy aborts), so a failed deploy doesn't strand
the site in maintenance.

- nginx/goodwalk.co.nz.svelte.conf.example: error_page 503 routes to
  /maintenance.html (internal); /m/ serves static maintenance assets;
  the / and /api/submit blocks return 503 when /etc/nginx/conf.d/
  maintenance.flag exists.
- nginx/maintenance.html: brand-styled "Be right back" page — full
  Goodwalk green background, white card with yellow accent, real
  Goodwalk logo, contact details fallback, auto-reload after 60s.
- nginx/logo.png: maintenance-time logo (served from /m/logo.png).
- nginx/nginx.conf: reverted the earlier auto-fallback edits; this
  file is not deployed (the prod conf is goodwalk.co.nz.svelte.conf
  .example).
- scripts/deploy-remote.sh: copies maintenance.html + logo into the
  nginx container, reloads nginx so the new conf is live, touches
  the flag, then runs the rebuild, then clears the flag. Adds a
  trap-based clear_maintenance_flag fallback. Also adds a defensive
  env-file merger that appends new keys from deploy.env.template
  without clobbering live values, with a timestamped .env backup.

Plus a small a11y polish unrelated to maintenance:
- ServicesSection: "Learn more" links now include screen-reader-only
  "about <Service>" context.
- base.css: adds .visually-hidden utility class.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
ponzischeme89
2026-05-05 14:10:16 +12:00
parent 9d87d08547
commit c2e6282efa
7 changed files with 219 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nginx/goodwalk.co.nz.svelte.conf.example
+28
View File
@@ -53,6 +53,26 @@ server {
# nginx does not keep stale upstream IPs in memory.
resolver 127.0.0.11 ipv6=off valid=30s;
# Maintenance mode: when /etc/nginx/conf.d/maintenance.flag exists,
# serve the static "be right back" page with a 503 status. The flag is
# toggled by the deploy script (touch / rm) without reloading nginx.
error_page 503 /maintenance.html;
location = /maintenance.html {
root /var/www/html;
internal;
add_header Cache-Control "no-store" always;
}
# Static assets used only by the maintenance page (logo, etc.). Served
# directly from the nginx html mount so they remain reachable while the
# SvelteKit app is down.
location /m/ {
root /var/www/html;
access_log off;
add_header Cache-Control "public, max-age=3600" always;
}
location ~* /\.(git|env|htaccess) {
deny all;
}
@@ -66,6 +86,10 @@ server {
}
location /api/submit {
if (-f /etc/nginx/conf.d/maintenance.flag) {
return 503;
}
set $goodwalk_mail_api goodwalk_svelte_mail_api:8000;
limit_req zone=goodwalk_limit burst=10 nodelay;
proxy_pass http://$goodwalk_mail_api/submit;
@@ -77,6 +101,10 @@ server {
}
location / {
if (-f /etc/nginx/conf.d/maintenance.flag) {
return 503;
}
set $goodwalk_frontend goodwalk_svelte_app:3000;
proxy_pass http://$goodwalk_frontend;
proxy_http_version 1.1;
nginx/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

nginx/maintenance.html
+67 -28
View File
@@ -8,8 +8,8 @@
<style>
:root {
--green: #213021;
--yellow: #FFD100;
--cream: #fbfaf6;
--green-soft: #2c3f2c;
--yellow: #ffd100;
--ink: #1a1a1a;
--muted: #4c5056;
}
@@ -28,7 +28,10 @@
body {
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--ink);
background: var(--cream);
background:
radial-gradient(circle at top left, rgba(255, 209, 0, 0.12), transparent 55%),
radial-gradient(circle at bottom right, rgba(255, 209, 0, 0.08), transparent 60%),
var(--green);
min-height: 100vh;
display: grid;
place-items: center;
@@ -36,14 +39,31 @@
line-height: 1.5;
}
.stage {
width: 100%;
max-width: 560px;
}
.brand-bar {
display: flex;
justify-content: center;
margin-bottom: 28px;
}
.brand-bar img {
display: block;
height: 44px;
width: auto;
max-width: 100%;
filter: brightness(0) invert(1);
}
.card {
position: relative;
max-width: 520px;
width: 100%;
background: #fff;
border-radius: 28px;
padding: 44px 40px 40px;
box-shadow: 0 18px 44px rgba(17, 20, 24, 0.08);
padding: 44px 40px 38px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
text-align: center;
overflow: hidden;
}
@@ -62,7 +82,7 @@
justify-content: center;
width: 64px;
height: 64px;
margin: 0 auto 20px;
margin: 4px auto 18px;
border-radius: 50%;
background: rgba(33, 48, 33, 0.08);
color: var(--green);
@@ -73,13 +93,13 @@
height: 32px;
}
.brand {
font-size: 13px;
.eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--green);
margin: 0 0 14px;
margin: 0 0 10px;
}
h1 {
@@ -97,7 +117,7 @@
}
.meta {
margin-top: 22px;
margin-top: 24px;
padding-top: 22px;
border-top: 1px solid rgba(17, 20, 24, 0.08);
font-size: 14px;
@@ -106,7 +126,7 @@
.meta a {
color: var(--green);
font-weight: 600;
font-weight: 700;
text-decoration: none;
}
@@ -114,31 +134,50 @@
text-decoration: underline;
}
.footnote {
margin-top: 22px;
text-align: center;
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 480px) {
.card {
padding: 36px 24px 28px;
border-radius: 22px;
}
.brand-bar img {
height: 36px;
}
}
</style>
</head>
<body>
<main class="card" role="main">
<span class="paw" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 10.5c1.1 0 2-1.3 2-3s-.9-3-2-3-2 1.3-2 3 .9 3 2 3Zm9 0c1.1 0 2-1.3 2-3s-.9-3-2-3-2 1.3-2 3 .9 3 2 3ZM4 13.5c1 0 1.8-1.1 1.8-2.5S5 8.5 4 8.5s-1.8 1.1-1.8 2.5S3 13.5 4 13.5Zm16 0c1 0 1.8-1.1 1.8-2.5S21 8.5 20 8.5s-1.8 1.1-1.8 2.5.8 2.5 1.8 2.5ZM12 13.5c-3.3 0-6 2.5-6 5.4 0 1.4 1.1 2.6 2.5 2.6 1 0 1.5-.4 2.2-.8.4-.2.8-.4 1.3-.4s.9.2 1.3.4c.7.4 1.2.8 2.2.8 1.4 0 2.5-1.2 2.5-2.6 0-2.9-2.7-5.4-6-5.4Z"/>
</svg>
</span>
<p class="brand">Goodwalk</p>
<h1>Be right back!</h1>
<p>We're updating the site — should only take a minute. Thanks for your patience.</p>
<div class="meta">
Need us now? Email <a href="mailto:info@goodwalk.co.nz">info@goodwalk.co.nz</a>
or call <a href="tel:+64226421011">(022) 642 1011</a>.
<div class="stage">
<div class="brand-bar">
<img src="/m/logo.png" alt="Goodwalk" width="241" height="48" />
</div>
</main>
<main class="card" role="main">
<span class="paw" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 10.5c1.1 0 2-1.3 2-3s-.9-3-2-3-2 1.3-2 3 .9 3 2 3Zm9 0c1.1 0 2-1.3 2-3s-.9-3-2-3-2 1.3-2 3 .9 3 2 3ZM4 13.5c1 0 1.8-1.1 1.8-2.5S5 8.5 4 8.5s-1.8 1.1-1.8 2.5S3 13.5 4 13.5Zm16 0c1 0 1.8-1.1 1.8-2.5S21 8.5 20 8.5s-1.8 1.1-1.8 2.5.8 2.5 1.8 2.5ZM12 13.5c-3.3 0-6 2.5-6 5.4 0 1.4 1.1 2.6 2.5 2.6 1 0 1.5-.4 2.2-.8.4-.2.8-.4 1.3-.4s.9.2 1.3.4c.7.4 1.2.8 2.2.8 1.4 0 2.5-1.2 2.5-2.6 0-2.9-2.7-5.4-6-5.4Z"/>
</svg>
</span>
<p class="eyebrow">Goodwalk</p>
<h1>Be right back!</h1>
<p>We're updating the site — should only take a minute. Thanks for your patience.</p>
<div class="meta">
Need us now? Email <a href="mailto:info@goodwalk.co.nz">info@goodwalk.co.nz</a>
or call <a href="tel:+64226421011">(022) 642 1011</a>.
</div>
</main>
<p class="footnote">Auckland Central dog walking · Tiny Gang pack walks · 1:1 walks · Puppy visits</p>
</div>
<script>
// Auto-recheck once a minute so visitors don't sit on this page forever.
nginx/nginx.conf
-20
View File
@@ -29,14 +29,6 @@ server {
gzip on;
gzip_types text/plain text/css application/javascript application/json image/svg+xml;
# Served when the SvelteKit upstream is unreachable (deploys, restarts).
# Mounted into the nginx container at /var/www/html/maintenance.html.
location = /maintenance.html {
root /var/www/html;
internal;
add_header Cache-Control "no-store" always;
}
location /api/submit {
proxy_pass http://mail-api:8000/submit;
proxy_http_version 1.1;
@@ -44,10 +36,6 @@ server {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_intercept_errors on;
proxy_connect_timeout 2s;
error_page 502 503 504 = /maintenance.html;
}
location / {
@@ -59,13 +47,5 @@ server {
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# Serve a static maintenance page when the app container is down/restarting,
# rather than nginx's default 502/503. The `=` keeps the original status
# code so search engines treat it as a transient outage, not a real page.
proxy_intercept_errors on;
proxy_connect_timeout 2s;
proxy_next_upstream error timeout http_502 http_503 http_504;
error_page 502 503 504 = /maintenance.html;
}
}