[add] add custom error page if upstream fails

This commit is contained in:
2020-06-06 18:13:13 -04:00
parent 9378ae4a00
commit 55823e6cfa
22 changed files with 625 additions and 3 deletions
+34 -2
View File
@@ -151,6 +151,8 @@ function gen_server_config()
server {
listen 8443 ssl;
error_page 502 503 504 @error;
# prevent redirecting to 8080 port
# (e.g. when trailing slash is missed)
port_in_redirect off;
@@ -159,13 +161,13 @@ function gen_server_config()
ssl_certificate /service/ssl/$root_domain/fullchain.pem;
ssl_certificate_key /service/ssl/$root_domain/privkey.pem;
set \$upstream $server;
location / {
# allow for upstream to be offline by setting
# docker dns resolver and a variable for the server
resolver 127.0.0.11 valid=30s;
set \$web_$rng_number $server;
proxy_pass http://\$web_$rng_number:8080;
proxy_pass http://\$upstream:8080;
proxy_redirect off;
proxy_set_header Host \$host;
@@ -173,6 +175,36 @@ function gen_server_config()
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host \$server_name;
}
location /0x90 {
ssi on;
error_page 502 503 504 404 @error;
# 403 needs to be on its own, get default 503 otherwise
error_page 403 /0x90/errors/error_403.html;
# set alias (instead of root) to not append /0x90 to path
include /etc/nginx/mime.types;
alias /service/html;
}
location ~/0x90/?$ { error_page 404 @error; deny all; return 404; }
location ~/0x90/css/?$ { error_page 404 @error; deny all; return 404; }
location ~/0x90/fonts/?$ { error_page 404 @error; deny all; return 404; }
location /0x90/errors { error_page 404 @error; deny all; return 404; }
location /0x90/check { error_page 404 @error; deny all; return 404; }
location @error {
root /service/html;
internal;
# replace variables in html
ssi on;
try_files
/errors/error_\$status.html
/errors/error_\${status_prefix}x.html
/errors/error_\${status_category}xx.html
/errors/error.html;
}
}
"
+243
View File
@@ -0,0 +1,243 @@
.blinking-cursor{
animation:blinkingCursor 1.25s infinite;
}
@keyframes blinkingCursor{
0%{ color: transparent; }
24%{ color: transparent; }
25%{ color: #ccc; }
75%{ color: #ccc; }
76%{ color: transparent; }
100%{ color: transparent; }
}
.loader {
position: absolute
}
.loader.pipe {
top: 5px;
font-size: 12px;
margin-left: 2px;
}
.loader-0-3 {
animation:loader0-3 0.5s infinite;
}
@keyframes loader0-3 {
0%{ color: #ccc; }
24%{ color: #ccc; }
25%{ color: transparent; }
100%{ color: transparent; }
}
.loader-1-3 {
animation:loader1-3 0.5s infinite;
}
@keyframes loader1-3 {
0%{ color: transparent; }
24%{ color: transparent; }
25%{ color: #ccc; }
49%{ color: #ccc; }
50%{ color: transparent; }
100%{ color: transparent; }
}
.loader-2-3 {
animation:loader2-3 0.5s infinite;
}
@keyframes loader2-3 {
0%{ color: transparent; }
49%{ color: transparent; }
50%{ color: #ccc; }
74%{ color: #ccc; }
75%{ color: transparent; }
100%{ color: transparent; }
}
.loader-3-3 {
animation:loader3-3 0.5s infinite;
}
@keyframes loader3-3 {
0%{ color: transparent; }
74%{ color: transparent; }
75%{ color: #ccc; }
100%{ color: #ccc; }
}
/* <span class="blinking-cursor">&#x258a;</span> */
.loader-0-9 {
animation:loader0-9 1s infinite;
}
@keyframes loader0-9 {
0%{ color: #ccc; }
9%{ color: #ccc; }
10%{ color: transparent; }
100%{ color: transparent; }
}
.loader-1-9 {
animation:loader1-9 1s infinite;
}
@keyframes loader1-9 {
0%{ color: transparent; }
9%{ color: transparent; }
10%{ color: #ccc; }
19%{ color: #ccc; }
20%{ color: transparent; }
100%{ color: transparent; }
}
.loader-2-9 {
animation:loader2-9 1s infinite;
}
@keyframes loader2-9 {
0%{ color: transparent; }
19%{ color: transparent; }
20%{ color: #ccc; }
29%{ color: #ccc; }
30%{ color: transparent; }
100%{ color: transparent; }
}
.loader-3-9 {
animation:loader3-9 1s infinite;
}
@keyframes loader3-9 {
0%{ color: transparent; }
29%{ color: transparent; }
30%{ color: #ccc; }
39%{ color: #ccc; }
40%{ color: transparent; }
100%{ color: transparent; }
}
.loader-4-9 {
animation:loader4-9 1s infinite;
}
@keyframes loader4-9 {
0%{ color: transparent; }
39%{ color: transparent; }
40%{ color: #ccc; }
49%{ color: #ccc; }
50%{ color: transparent; }
100%{ color: transparent; }
}
.loader-5-9 {
animation:loader5-9 1s infinite;
}
@keyframes loader5-9 {
0%{ color: transparent; }
49%{ color: transparent; }
50%{ color: #ccc; }
59%{ color: #ccc; }
60%{ color: transparent; }
100%{ color: transparent; }
}
.loader-6-9 {
animation:loader6-9 1s infinite;
}
@keyframes loader6-9 {
0%{ color: transparent; }
59%{ color: transparent; }
60%{ color: #ccc; }
69%{ color: #ccc; }
70%{ color: transparent; }
100%{ color: transparent; }
}
.loader-7-9 {
animation:loader7-9 1s infinite;
}
@keyframes loader7-9 {
0%{ color: transparent; }
69%{ color: transparent; }
70%{ color: #ccc; }
79%{ color: #ccc; }
80%{ color: transparent; }
100%{ color: transparent; }
}
.loader-8-9 {
animation:loader8-9 1s infinite;
}
@keyframes loader8-9 {
0%{ color: transparent; }
79%{ color: transparent; }
80%{ color: #ccc; }
89%{ color: #ccc; }
90%{ color: transparent; }
100%{ color: transparent; }
}
.loader-9-9 {
animation:loader9-9 1s infinite;
}
@keyframes loader9-9 {
0%{ color: transparent; }
89%{ color: transparent; }
90%{ color: #ccc; }
100%{ color: #ccc; }
}
/* 0-4 */
.loader-0-4 {
animation:loader0-4 0.5s infinite;
}
@keyframes loader0-4 {
0%{ color: #ccc; }
19%{ color: #ccc; }
20%{ color: transparent; }
100%{ color: transparent; }
}
.loader-1-4 {
animation:loader1-4 0.5s infinite;
}
@keyframes loader1-4 {
0%{ color: transparent; }
19%{ color: transparent; }
20%{ color: #ccc; }
39%{ color: #ccc; }
40%{ color: transparent; }
100%{ color: transparent; }
}
.loader-2-4 {
animation:loader2-4 0.5s infinite;
}
@keyframes loader2-4 {
0%{ color: transparent; }
39%{ color: transparent; }
40%{ color: #ccc; }
59%{ color: #ccc; }
60%{ color: transparent; }
100%{ color: transparent; }
}
.loader-3-4 {
animation:loader3-4 0.5s infinite;
}
@keyframes loader3-4 {
0%{ color: transparent; }
59%{ color: transparent; }
60%{ color: #ccc; }
79%{ color: #ccc; }
80%{ color: transparent; }
100%{ color: transparent; }
}
.loader-4-4 {
animation:loader4-4 0.5s infinite;
}
@keyframes loader4-4 {
0%{ color: transparent; }
79%{ color: transparent; }
80%{ color: #ccc; }
100%{ color: #ccc; }
}
+72
View File
@@ -0,0 +1,72 @@
/* latin-ext */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Overpass Mono Light'), local('OverpassMono-Light'), url(fonts/OverpassMono-Light_ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Overpass Mono Light'), local('OverpassMono-Light'), url(fonts/OverpassMono-Light.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Overpass Mono Regular'), local('OverpassMono-Regular'), url(fonts/OverpassMono-Regular_ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Overpass Mono Regular'), local('OverpassMono-Regular'), url(fonts/OverpassMono-Regular.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('Overpass Mono SemiBold'), local('OverpassMono-SemiBold'), url(fonts/OverpassMono-SemiBold_ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('Overpass Mono SemiBold'), local('OverpassMono-SemiBold'), url(fonts/OverpassMono-SemiBold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Overpass Mono Bold'), local('OverpassMono-Bold'), url(fonts/OverpassMono-Bold_ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Overpass Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Overpass Mono Bold'), local('OverpassMono-Bold'), url(fonts/OverpassMono-Bold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
+38
View File
@@ -0,0 +1,38 @@
.logo {
font-weight: 700;
color: #fff;
font-size: 20px;
padding: 10px;
margin-bottom: 10px;
float: left;
background-color: rgb(46, 46, 46);
clear: both;
/*width: 100%;*/
}
.logo > div {
float: left;
}
.logo .left {
color: #fff;
}
.logo .hash {
margin-left: 5px;
margin-right: 5px;
color: rgb(241, 118, 3);
}
.logo .right {
color: #fff;
}
.right .blinking-cursor {
font-size: 30px;
vertical-align:top;
position: relative;
display:inline-block;
transform:scale(1,1.34);
top: 2px;
}
+43
View File
@@ -0,0 +1,43 @@
.spacer:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 10px;
}
body {
font-family: 'Overpass Mono', monospace;
background-color: rgb(46, 46, 46);
color: #fff;
}
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
/* pure.css font */
font-family: 'Overpass Mono', monospace;
}
.center-elements {
display:flex;
justify-content:center;
align-items:center;
text-align: center;
}
.vert-10 { height: 10vh }
.vert-20 { height: 20vh }
.vert-30 { height: 30vh }
.vert-40 { height: 40vh }
.vert-50 { height: 50vh }
.vert-60 { height: 60vh }
.vert-70 { height: 70vh }
.vert-80 { height: 80vh }
.vert-90 { height: 90vh }
.status-code .code{
font-size: 40px;
}
.status-code .msg{
font-size: 20px;
}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+57
View File
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="">
<head>
<link href="/0x90/css/pure/pure.css" rel="stylesheet">
<link href="/0x90/css/font.css" rel="stylesheet">
<link href="/0x90/css/logo.css" rel="stylesheet">
<link href="/0x90/css/blink.css" rel="stylesheet">
<link href="/0x90/css/main.css" rel="stylesheet">
<meta charset="utf-8">
<title>pdev Studio</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-1">
<div class="logo">
<div class="left"><!--# echo var="server_domain" default="pdev" --></div>
<div class="hash">#</div>
<div class="right"><!--# echo var="upstream" default="Studio" --></div>
</div>
</div>
<div class="pure-u-1-1"></div>
<div class="pure-u-1-1 center-elements vert-70 status-code">
<div class="pure-g">
<div class="pure-u-1-1 center-elements code">
<div style="top: -23px; position: relative;">
<div class="loader loader-0-4">1</div>
<div class="loader loader-1-4">2</div>
<div class="loader loader-2-4">3</div>
<div class="loader loader-3-4">4</div>
<div class="loader loader-4-4">5</div>
</div>
<div style="top: -23px; position: relative; margin: 23px;">
<div class="loader loader-0-4">0</div>
<div class="loader loader-1-4">1</div>
<div class="loader loader-2-4">2</div>
<div class="loader loader-3-4">3</div>
<div class="loader loader-4-4">5</div>
</div>
<div style="top: -23px; position: relative;">
<div class="loader loader-0-9">0</div>
<div class="loader loader-1-9">1</div>
<div class="loader loader-2-9">2</div>
<div class="loader loader-3-9">3</div>
<div class="loader loader-4-9">4</div>
<div class="loader loader-5-9">5</div>
<div class="loader loader-6-9">6</div>
<div class="loader loader-7-9">7</div>
<div class="loader loader-8-9">8</div>
<div class="loader loader-9-9">9</div>
</div>
</div>
<div class="pure-u-1-1 center-elements msg" style="font-size: 18px;">Kernel panic - not syncing: Attempted to kill developer</div>
</div>
</div>
</div>
</body>
</html>
+30
View File
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="">
<head>
<link href="/0x90/css/pure/pure.css" rel="stylesheet">
<link href="/0x90/css/font.css" rel="stylesheet">
<link href="/0x90/css/logo.css" rel="stylesheet">
<link href="/0x90/css/blink.css" rel="stylesheet">
<link href="/0x90/css/main.css" rel="stylesheet">
<meta charset="utf-8">
<title>pdev Studio</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-1">
<div class="logo">
<div class="left"><!--# echo var="server_domain" default="pdev" --></div>
<div class="hash">#</div>
<div class="right"><!--# echo var="upstream" default="Studio" --></div>
</div>
</div>
<div class="pure-u-1-1"></div>
<div class="pure-u-1-1 center-elements vert-70 status-code">
<div class="pure-g">
<div class="pure-u-1-1 center-elements code">403</div>
<div class="pure-u-1-1 center-elements msg">this incident will be reported</div>
</div>
</div>
</div>
</body>
</html>
+30
View File
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="">
<head>
<link href="/0x90/css/pure/pure.css" rel="stylesheet">
<link href="/0x90/css/font.css" rel="stylesheet">
<link href="/0x90/css/logo.css" rel="stylesheet">
<link href="/0x90/css/blink.css" rel="stylesheet">
<link href="/0x90/css/main.css" rel="stylesheet">
<meta charset="utf-8">
<title>pdev Studio</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-1">
<div class="logo">
<div class="left"><!--# echo var="server_domain" default="pdev" --></div>
<div class="hash">#</div>
<div class="right"><!--# echo var="upstream" default="Studio" --></div>
</div>
</div>
<div class="pure-u-1-1"></div>
<div class="pure-u-1-1 center-elements vert-70 status-code">
<div class="pure-g">
<div class="pure-u-1-1 center-elements code">404</div>
<div class="pure-u-1-1 center-elements msg">error: target not found</div>
</div>
</div>
</div>
</body>
</html>
+47
View File
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="">
<head>
<link href="/0x90/css/pure/pure.css" rel="stylesheet">
<link href="/0x90/css/font.css" rel="stylesheet">
<link href="/0x90/css/logo.css" rel="stylesheet">
<link href="/0x90/css/blink.css" rel="stylesheet">
<link href="/0x90/css/main.css" rel="stylesheet">
<meta charset="utf-8">
<title>pdev Studio</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-1">
<div class="logo">
<div class="left"><!--# echo var="server_domain" default="pdev" --></div>
<div class="hash">#</div>
<div class="right"><!--# echo var="upstream" default="Studio" --></div>
</div>
</div>
<div class="pure-u-1-1"></div>
<div class="pure-u-1-1 center-elements vert-70 status-code">
<div class="pure-g">
<div class="pure-u-1-1 center-elements code">50
<div style="top: -23px;
position: relative;">
<div class="loader loader-0-9">0</div>
<div class="loader loader-1-9">1</div>
<div class="loader loader-2-9">2</div>
<div class="loader loader-3-9">3</div>
<div class="loader loader-4-9">4</div>
<div class="loader loader-5-9">5</div>
<div class="loader loader-6-9">6</div>
<div class="loader loader-7-9">7</div>
<div class="loader loader-8-9">8</div>
<div class="loader loader-9-9">9</div>
</div>
</div>
<div class="pure-u-1-1 center-elements msg" style="font-size: 18px;">Kernel panic - not syncing: Attempted to kill developer</div>
</div>
</div>
</div>
</body>
</html>
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+12
View File
@@ -18,6 +18,18 @@ http {
# set larger name bucket for large domain names
server_names_hash_bucket_size 64;
map $status $status_category {
"~^(?<code>(?<prefix>(?<category>[1-5])[0-9])[0-9])$" "$category";
}
map $status $status_prefix {
"~^(?<code>(?<prefix>(?<category>[1-5])[0-9])[0-9])$" "$prefix";
}
map $server_name $server_domain {
"~(?<domain_name>[a-zA-Z0-9-]*)(\.[a-z]*)$" "$domain_name";
}
server {
listen 8080 default_server;