Merge pull request #147 from ONLYOFFICE/feature/nginx-standart-errors

feature/nginx-standart-errors
ONLYOFFICE · Feb 26, 2024 · 31ae1eb · 31ae1eb
2 parents 31a07c5 + 7ecccec
commit 31ae1eb
Show file tree

Hide file tree

Showing 6 changed files with 375 additions and 0 deletions.
diff --git a/config/nginx/html/custom_401.html b/config/nginx/html/custom_401.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>401 Error Page</title>
+    <style>
+      body,
+      html {
+        height: 100%;
+        margin: 0px;
+        font-family: "Open Sans", Arial, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #f0f0f0;
+      }
+
+      .error-container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        cursor: default;
+        width: auto;
+        height: 100vh;
+        overflow-x: hidden;
+        margin: 0px auto;
+        padding-top: 36px;
+        border: 0px;
+        box-sizing: border-box;
+        text-align: center;
+      }
+
+      .error-image {
+        max-width: 100%;
+        height: auto;
+        margin-bottom: 40px;
+      }
+
+      .error-header {
+        font-size: 23px;
+        line-height: 28px;
+        font-weight: 700;
+        color: #333333;
+        margin: 0px;
+        margin-bottom: 8px;
+      }
+
+      .error-text {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 400;
+        color: #555f65;
+        margin: 0px;
+        margin-bottom: 24px;
+      }
+
+      @media (max-width: 600px) {
+        .error-container {
+          width: 343px;
+        }
+        .error-image {
+          width: 200px;
+          height: 200px;
+        }
+
+        .error-text {
+          max-width: 287px;
+          text-align: center;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="error-container">
+      <img
+        src="/static/images/error401.svg"
+        alt="Error Character"
+        class="error-image"
+      />
+      <h1 class="error-header">401 Error!</h1>
+      <p class="error-text">
+        Unauthorized request. To access this file, you must enter a password or
+        be a registered user.
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/config/nginx/html/custom_403.html b/config/nginx/html/custom_403.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>403 Error Page</title>
+    <style>
+      body,
+      html {
+        height: 100%;
+        margin: 0px;
+        font-family: "Open Sans", Arial, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #f0f0f0;
+      }
+
+      .error-container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        cursor: default;
+        width: auto;
+        height: 100vh;
+        overflow-x: hidden;
+        margin: 0px auto;
+        padding-top: 36px;
+        border: 0px;
+        box-sizing: border-box;
+        text-align: center;
+      }
+
+      .error-image {
+        max-width: 100%;
+        height: auto;
+        margin-bottom: 40px;
+      }
+
+      .error-header {
+        font-size: 23px;
+        line-height: 28px;
+        font-weight: 700;
+        color: #333333;
+        margin: 0px;
+        margin-bottom: 8px;
+      }
+
+      .error-text {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 400;
+        color: #555f65;
+        margin: 0px;
+        margin-bottom: 24px;
+      }
+
+      @media (max-width: 600px) {
+        .error-container {
+          width: 343px;
+        }
+        .error-image {
+          width: 200px;
+          height: 200px;
+        }
+
+        .error-text {
+          max-width: 287px;
+          text-align: center;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="error-container">
+      <img
+        src="/static/images/error403.svg"
+        alt="Error Character"
+        class="error-image"
+      />
+      <h1 class="error-header">403 Error!</h1>
+      <p class="error-text">
+        Forbidden. You don't have permissions to access the requested resource.
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/config/nginx/html/custom_404.html b/config/nginx/html/custom_404.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>404 Error Page</title>
+    <style>
+      body,
+      html {
+        height: 100%;
+        margin: 0px;
+        font-family: "Open Sans", Arial, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #f0f0f0;
+      }
+
+      .error-container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        cursor: default;
+        width: auto;
+        height: 100vh;
+        overflow-x: hidden;
+        margin: 0px auto;
+        padding-top: 36px;
+        border: 0px;
+        box-sizing: border-box;
+        text-align: center;
+      }
+
+      .error-image {
+        max-width: 100%;
+        height: auto;
+        margin-bottom: 40px;
+      }
+
+      .error-header {
+        font-size: 23px;
+        line-height: 28px;
+        font-weight: 700;
+        color: #333333;
+        margin: 0px;
+        margin-bottom: 8px;
+      }
+
+      .error-text {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 400;
+        color: #555f65;
+        margin: 0px;
+        margin-bottom: 24px;
+      }
+
+      @media (max-width: 600px) {
+        .error-container {
+          width: 343px;
+        }
+        .error-image {
+          width: 200px;
+          height: 200px;
+        }
+
+        .error-text {
+          max-width: 287px;
+          text-align: center;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="error-container">
+      <img
+        src="/static/images/error404.svg"
+        alt="Error Character"
+        class="error-image"
+      />
+      <h1 class="error-header">404 Error!</h1>
+      <p class="error-text">
+        Page not found. The server cannot find the requested resource.
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/config/nginx/html/custom_50x.html b/config/nginx/html/custom_50x.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>500 Error Page</title>
+    <style>
+      body,
+      html {
+        height: 100%;
+        margin: 0px;
+        font-family: "Open Sans", Arial, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #f0f0f0;
+      }
+
+      .error-container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        cursor: default;
+        width: auto;
+        height: 100vh;
+        overflow-x: hidden;
+        margin: 0px auto;
+        padding-top: 36px;
+        border: 0px;
+        box-sizing: border-box;
+        text-align: center;
+      }
+
+      .error-image {
+        max-width: 100%;
+        height: auto;
+        margin-bottom: 40px;
+      }
+
+      .error-header {
+        font-size: 23px;
+        line-height: 28px;
+        font-weight: 700;
+        color: #333333;
+        margin: 0px;
+        margin-bottom: 8px;
+      }
+
+      .error-text {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 400;
+        color: #555f65;
+        margin: 0px;
+        margin-bottom: 24px;
+      }
+
+      @media (max-width: 600px) {
+        .error-container {
+          width: 343px;
+        }
+        .error-image {
+          width: 200px;
+          height: 200px;
+        }
+
+        .error-text {
+          max-width: 287px;
+          text-align: center;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="error-container">
+      <img
+        src="/static/images/error500.svg"
+        alt="Error Character"
+        class="error-image"
+      />
+      <h1 class="error-header">500 Error!</h1>
+      <p class="error-text">
+        The server is currently unable to handle this request.
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/config/nginx/onlyoffice.conf b/config/nginx/onlyoffice.conf
@@ -378,4 +378,28 @@ server {
 		rewrite /healthchecks/(.*)$ /$1 break;
 		proxy_pass http://127.0.0.1:5033;
     }
+
+	error_page 401 /custom_401.html;
+    location = /custom_401.html {
+        root /etc/nginx/html;
+        internal;
+    }
+
+	error_page 403 /custom_403.html;
+    location = /custom_403.html {
+        root /etc/nginx/html;
+        internal;
+    }
+
+	error_page 404 /custom_404.html;
+    location = /custom_404.html {
+        root /etc/nginx/html;
+        internal;
+    }
+
+    error_page 500 502 503 504 /custom_50x.html;
+    location = /custom_50x.html {
+        root /etc/nginx/html;
+        internal;
+    }
 }
diff --git a/install/docker/Dockerfile.runtime b/install/docker/Dockerfile.runtime
@@ -15,6 +15,7 @@ RUN find config/ -maxdepth 1 -name "*.json" | grep -v test | grep -v dev | xargs
     tar -C "/app/onlyoffice/" -xvf config.tar && \
     cp config/*.config /app/onlyoffice/config/ && \
     mkdir -p /etc/nginx/conf.d && cp -f config/nginx/onlyoffice*.conf /etc/nginx/conf.d/ && \
+    mkdir -p /etc/nginx/html && cp -f config/nginx/html/* /etc/nginx/html/ && \
     mkdir -p /etc/nginx/includes/ && cp -f config/nginx/includes/onlyoffice*.conf /etc/nginx/includes/ && \
     sed -i "s/\"number\".*,/\"number\": \"${PRODUCT_VERSION}.${BUILD_NUMBER}\",/g" /app/onlyoffice/config/appsettings.json && \
     sed -e 's/#//' -i /etc/nginx/conf.d/onlyoffice.conf
@@ -92,6 +93,7 @@ RUN apt-get -y update && \
 
 # copy static services files and config values 
 COPY --from=base /etc/nginx/conf.d /etc/nginx/conf.d
+COPY --from=base /etc/nginx/html /etc/nginx/html
 
 COPY /buildtools/install/docker/config/nginx/docker-entrypoint.sh /docker-entrypoint.sh
 COPY /buildtools/install/docker/config/nginx/docker-entrypoint.d /docker-entrypoint.d