[add] add custom error page if upstream fails

proxy/Dockerfile

@@ -22,7 +22,7 @@ COPY ./files/entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh
 
 # copy check file for port 80
-COPY ./files/index.html /service/html/check/index.html
+COPY ./files/html /service/html/
 
 USER $USER_NAME
 

proxy/files/entrypoint.sh

@@ -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://\$upstream:8080;
-            proxy_pass         http://\$web_$rng_number: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;
+
+        }
+
     }
     
     "

proxy/files/html/css/blink.css

@@ -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; }
+}

proxy/files/html/css/font.css

@@ -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;
+}

proxy/files/html/css/logo.css

@@ -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;
+}

proxy/files/html/css/main.css

@@ -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;
+}

proxy/files/html/errors/error.html

@@ -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>

proxy/files/html/errors/error_403.html

@@ -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>

proxy/files/html/errors/error_404.html

@@ -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>

proxy/files/html/errors/error_50x.html

@@ -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>

proxy/files/nginx.conf

@@ -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;