Saltar al contenido principal

Hospedar sitio web estático con Storin y NGINX

Visión general​

Storin permite almacenar y distribuir archivos estáticos de forma altamente disponible y escalable.

Aunque Storin no posee una función nativa de alojamiento de sitios web, es posible implementar esta funcionalidad utilizando un proxy inverso con NGINX.

Este enfoque permite publicar aplicaciones frontend, como React, Vue o Angular, directamente desde un bucket, utilizando un dominio personalizado.

Ejemplo de endpoint S3:

https://sp1-s3.saveincloud.io

Ejemplo de dominio publicado:

https://seudominio.com

Atención al endpoint de la región

El endpoint S3 puede variar según la región donde se creó el bucket. En este ejemplo, utilizamos la región SP1.

Siempre valide el endpoint correspondiente a su entorno antes de publicar en producción. Cambios en el endpoint pueden afectar el funcionamiento del dominio personalizado.

Es de suma importancia estar atento a los comunicados sobre cambios en el endpoint S3 de la región, ya que esto impactará directamente el acceso a Storin.

Arquitectura de referencia​

Cliente → Domínio → NGINX → Bucket no Storin (arquivos estáticos)

1. Estructura del bucket​

meu-site/
├── index.html
├── assets/
├── css/
├── js/
└── favicon.ico

2. Configuración de NGINX​

Redireccionamiento HTTP a HTTPS​

server {
    listen 80;
    listen [::]:80;
    server_name seudominio.com;

    return 301 https://$host$request_uri;
}

Configuración HTTPS​

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name seudominio.com;

    ssl_certificate     /var/lib/jelastic/SSL/jelastic.chain;
    ssl_certificate_key /var/lib/jelastic/SSL/jelastic.key;

    set $bucket meu-site;
    set $upstream sp1-s3.saveincloud.io;

    location = / {
        proxy_ssl_server_name on;
        proxy_pass https://$upstream;
        rewrite ^ /$bucket/index.html break;

        proxy_set_header Host $upstream;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location / {
        proxy_ssl_server_name on;
        proxy_pass https://$upstream;
        rewrite ^/(.*)$ /$bucket/$1 break;

        proxy_set_header Host $upstream;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_intercept_errors on;
        error_page 404 = @spa;
    }

    location @spa {
        proxy_ssl_server_name on;
        proxy_pass https://$upstream;
        rewrite ^ /$bucket/index.html break;

        proxy_set_header Host $upstream;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

3. Comportamiento esperado​

  • / → index.html
  • /assets → archivos del bucket
  • /rota → fallback SPA

Soporte​

En caso de dudas, contacte con el soporte de SaveinCloud.