A la hora de levantar un sitio web dinámico, sobretodo si usas un servidor web como proxy inverso, es posible que visualices una página de error mientras se levantan todos los servicios (base de datos, backend, etc). Para evitar esto, puedes realizar una página de bienvenida intermediaria. Ofreciendo un aspecto más profesional y elegante. Una web informativa que te explique que esta ocurriendo, e incluso que te redirija a la página principal una vez que todo este listo.
En este artículo voy a enseñarte un ejemplo sencillo, dando por sentado que usas Nginx como servidor web. Aunque la tecnología es indiferente, ya que el concepto es el mismo en otros servidores web o sistemas.
Primero debes crear una página estática en HTML, con el nombre starting.html, con un contenido similar al siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Starting...</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
>
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.2/css/bulma.min.css"
integrity="sha512-RpeJZX3aH5oZN3U3JhE7Sd+HG8XQsqmP3clIbu4G28p668yNsRNj3zMASKe1ATjl/W80wuEtCx2dFA8xaebG5w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
>
</head>
<body>
<div class="container">
<section class="hero">
<div class="hero-body">
<h1 class="title">Starting...</h1>
<h2 class="subtitle">Please wait while the system loads</h2>
</div>
</section>
</div>
<script>
// Check if the server is up and redirect to the welcome page
const fullDomain = location.protocol + '//' + location.host;
setInterval(() => {
fetch(fullDomain)
.then((response) => {
if (response.status === 200) {
window.location.href = fullDomain;
}
})
}, 1000)
</script>
</body>
</html>
Lo alojaremos en /usr/share/nginx/html para que Nginx pueda servirlo.
Los puntos a destacar de este código son:
- Se utiliza Bulma como framework CSS, pero puedes usar cualquier otro o incluso no usar ninguno. Lo importante es que el contenido sea sencillo y que se pueda visualizar en cualquier dispositivo.
- Hay un script en JavaScript que comprueba cada segundo si el servidor está levantado. En caso afirmativo, redirige a la página principal.
- No depende de ningún backend, por lo que puedes usarlo aunque el backend no esté levantado.
Si usas Docker, puedes montar un volumen:
volumes:
- ./templates/statics:/usr/share/nginx/html # Ruta donde se aloja el archivo starting.html
- ./static:/var/www/static
- ./media:/var/www/media
- ./nginx.conf:/etc/nginx/nginx.conf
Ahora vamos a añadir la siguente configuración al servidor web (Nginx en este caso):
error_page 404 500 502 503 504 /starting;
location /starting {
root /usr/share/nginx/html;
default_type "text/html";
try_files $uri $uri.html $uri/index.html index.html;
}
Estamos definiendo que en caso de un error, como puede ser un 404, 500, 502, 503 o 504, se redirija a la ruta /starting. En esa ruta, se mostrará la página que hemos creado anteriormente. Doy por sentado que esta alojada en la ruta /usr/share/nginx/html, pero puedes cambiarla a la que necesites.
A continuación puedes ver un ejemplo completo de una configuración para un backend en Django:
events {}
http {
server {
listen 80 default_server;
server_name _;
client_max_body_size 0;
include /etc/nginx/mime.types;
error_page 404 500 502 503 504 /starting;
location /starting {
root /usr/share/nginx/html;
default_type "text/html";
try_files $uri $uri.html $uri/index.html index.html;
}
location / {
proxy_pass http://django:8000;
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "";
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $server_name;
proxy_set_header X-Real-IP $remote_addr;
proxy_redirect off;
proxy_buffering off;
proxy_cache off;
chunked_transfer_encoding off;
}
location /static {
alias /var/www/static;
}
location /media {
alias /var/www/media;
}
location = /favicon.ico { access_log off; log_not_found off; }
}
}
Y ya estará todo. Ahora, cuando levantes tu servidor web, si el backend no está listo, se mostrará la página de starting.html temporalmente. Una vez que esté listo, se redirigirá a la página principal.
Las limitaciones, o temas a afinar más adelante, son los códigos 404 y 5xx. Actualmente, cuando se produzca un error o el usuario acabe en una ruta que no exista, se mostrará la página que acabamos de añadir. Deberás ajustarlo jugando con algún código de error más específico o con la configuración de tu servidor web. Pero para un caso general, el ejemplo es más que suficiente. El resto lo dejo en tus manos.
¡Espero que te haya sido útil!
{{ comments.length }} comentarios