Add static html error page to nginx for 502, 503, 504
This commit is contained in:
Rory Powell
parent
2966018af9
commit
af9a2cfd2f
|
|
@ -27,6 +27,7 @@ services:
|
|||
image: nginx:latest
|
||||
volumes:
|
||||
- ./.generated-nginx.dev.conf:/etc/nginx/nginx.conf
|
||||
- ./proxy/error.html:/usr/share/nginx/html/error.html
|
||||
ports:
|
||||
- "${MAIN_PORT}:10000"
|
||||
depends_on:
|
||||
|
|
|
|||
|
|
@ -28,6 +28,12 @@ http {
|
|||
ignore_invalid_headers off;
|
||||
proxy_buffering off;
|
||||
|
||||
error_page 502 503 504 /error.html;
|
||||
location = /error.html {
|
||||
root /usr/share/nginx/html;
|
||||
internal;
|
||||
}
|
||||
|
||||
location /db/ {
|
||||
proxy_pass http://couchdb-service:5984;
|
||||
rewrite ^/db/(.*)$ /$1 break;
|
||||
|
|
|
|||
|
|
@ -44,11 +44,17 @@ http {
|
|||
proxy_buffering off;
|
||||
# port_in_redirect off;
|
||||
|
||||
error_page 502 503 504 /error.html;
|
||||
location = /error.html {
|
||||
root /usr/share/nginx/html;
|
||||
internal;
|
||||
}
|
||||
|
||||
# Security Headers
|
||||
add_header X-Frame-Options SAMEORIGIN always;
|
||||
add_header X-Content-Type-Options nosniff always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me https://maxcdn.bootstrapcdn.com; object-src 'none'; base-uri 'self'; connect-src 'self' https://api-iam.intercom.io https://app.posthog.com wss://nexus-websocket-a.intercom.io ; font-src 'self' data: https://cdn.jsdelivr.net https://fonts.gstatic.com https://rsms.me https://maxcdn.bootstrapcdn.com; frame-src 'self' https:; img-src http: https: data:; manifest-src 'self'; media-src 'self'; worker-src 'none';" always;
|
||||
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io https://jspm.dev; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me https://maxcdn.bootstrapcdn.com; object-src 'none'; base-uri 'self'; connect-src 'self' https://api-iam.intercom.io https://app.posthog.com wss://nexus-websocket-a.intercom.io ; font-src 'self' data: https://cdn.jsdelivr.net https://fonts.gstatic.com https://rsms.me https://maxcdn.bootstrapcdn.com; frame-src 'self' https:; img-src http: https: data:; manifest-src 'self'; media-src 'self'; worker-src 'none';" always;
|
||||
|
||||
# upstreams
|
||||
set $apps {{ apps }};
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
FROM nginx:latest
|
||||
COPY .generated-nginx.prod.conf /etc/nginx/nginx.conf
|
||||
COPY error.html /usr/share/nginx/html/error.html
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Budibase</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
</head>
|
||||
|
||||
<script src="https://jspm.dev/@spectrum-web-components/bundle/elements.js" type="module" async></script>
|
||||
|
||||
<script>
|
||||
function goToStatus() {
|
||||
window.location.href = "https://status.budibase.com";
|
||||
}
|
||||
function goHome() {
|
||||
window.location.href = window.location.origin;
|
||||
}
|
||||
function getStatus() {
|
||||
var http = new XMLHttpRequest()
|
||||
var url = window.location.href
|
||||
http.open('GET', url, true)
|
||||
http.send()
|
||||
http.onreadystatechange = (e) => {
|
||||
var status = http.status
|
||||
document.getElementById("status").innerHTML = status
|
||||
|
||||
var message
|
||||
if (status === 502) {
|
||||
message = "Bad gateway. Please try again later."
|
||||
} else if (status === 503) {
|
||||
message = "Service Unavailable. Please try again later."
|
||||
} else if (status === 504) {
|
||||
message = "Gateway timeout. Please try again later."
|
||||
} else {
|
||||
message = "Please try again later."
|
||||
}
|
||||
|
||||
document.getElementById("message").innerHTML = message
|
||||
}
|
||||
}
|
||||
|
||||
getStatus()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
background-color: #1a1a1a;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
color: #e7e7e7;
|
||||
}
|
||||
.main {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.info {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
color: var(--spectrum-global-color-gray-600)
|
||||
}
|
||||
.title {
|
||||
font-weight: 400;
|
||||
color: var(--spectrum-global-color-gray-900)
|
||||
}
|
||||
.message {
|
||||
font-weight: 200;
|
||||
color: var(--spectrum-global-color-gray-800)
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.statusButton {
|
||||
margin-left: 20px;
|
||||
border: none;
|
||||
}
|
||||
.hero {
|
||||
height: 160px;
|
||||
width: 160px;
|
||||
margin-right: 80px;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="">
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<sp-theme scale="medium" color="dark">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<div class="hero">
|
||||
<img src="https://raw.githubusercontent.com/Budibase/budibase/master/packages/builder/assets/bb-space-man.svg" alt="Budibase Logo">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div>
|
||||
<h4 id="status" class="status"></h4>
|
||||
<h1 class="title">
|
||||
Houston we have a problem!
|
||||
</h1>
|
||||
<h3 id="message" class="message">
|
||||
</h3>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<sp-button onclick=goHome()>Return home</sp-button>
|
||||
<sp-button class="statusButton" quiet variant="secondary" onclick=goToStatus()>Check out status</sp-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</sp-theme>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue