Skip to main content

Hosting a Static Website with Storin and NGINX

Overview​

Storin allows storing and distributing static files in a highly available and scalable way.

Although Storin does not have a native website hosting feature, it is possible to implement this functionality using a reverse proxy with NGINX.

This approach allows publishing frontend applications, such as React, Vue, or Angular, directly from a bucket, using a custom domain.

Example of S3 endpoint:

https://sp1-s3.saveincloud.io

Example of published domain:

https://seudominio.com

Attention to the region endpoint

The S3 endpoint may vary depending on the region where the bucket was created. In this example, we use the SP1 region.

Always validate the endpoint corresponding to your environment before publishing to production. Endpoint changes can impact the functionality of the custom domain.

It is extremely important to pay attention to announcements about changes to the S3 endpoint of the region, as this will directly impact access to Storin.

Reference Architecture​

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

1. Bucket Structure​

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

2. NGINX Configuration​

HTTP to HTTPS Redirection​

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

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

HTTPS Configuration​

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. Expected Behavior​

  • / → index.html
  • /assets → bucket files
  • /rota → SPA fallback

Support​

If you have any questions, please contact SaveinCloud support.