Vai al contenuto

Hosting di siti web statici con Ceph S3

Con lo storage a oggetti compatibile S3 di Ceph, può ospitare siti web statici in modo semplice, con alta disponibilità e con un uso efficiente delle risorse. Invece di gestire un server web tradizionale (come Apache o NGINX), può memorizzare i file HTML, CSS e JavaScript e le immagini direttamente in un bucket S3 e renderli accessibili su Internet.

Questo tipo di hosting è ideale per:

  • Siti web statici e blog (ad es. generati con Hugo, Jekyll o MkDocs)
  • Applicazioni a pagina singola (SPA) (ad es. React, Vue.js, Angular)
  • Documentazione, portfolio e cataloghi online

Vantaggi dell'hosting web S3

  • Nessuna gestione del server: non è necessario aggiornare sistemi operativi né configurare e mantenere server web.
  • Elevata scalabilità e prestazioni: Ceph gestisce la distribuzione e la replica dei dati in background. Il sito resta performante e accessibile anche in caso di picchi di traffico improvvisi.
  • Conveniente: i costi per l'esecuzione di macchine virtuali complete vengono eliminati; viene utilizzato solo lo storage a oggetti effettivo.

Nelle sezioni seguenti apprenderà come preparare un bucket per l'hosting web, caricare i file del sito e impostare le autorizzazioni di accesso corrette (Bucket Policy) affinché il sito diventi accessibile pubblicamente.

Come funziona la distribuzione

Il diagramma seguente illustra come le richieste dei visitatori vengono gestite direttamente dal gateway oggetti Ceph, senza bisogno di un server web dedicato (come Apache/NGINX) nel mezzo:

graph LR
    Client([Visitor / Web Browser]) -- "GET Request\nhttps://my-bucket.sites..." --> Gateway{Ceph S3 Gateway}
    Gateway --> Bucket[(S3 Bucket)]
    Bucket -. "index.html,\nImages, CSS, JS" .-> Gateway
    Gateway -. "Delivers website" .-> Client

Prerequisiti

Affinché il sito venga servito correttamente tramite Ceph S3, devono essere soddisfatti alcuni prerequisiti:

Nome del bucket

  • Unicità: il nome del bucket S3 deve essere univoco a livello globale, poiché gli URL di accesso si basano sul nome del bucket (ad es. s3://my-bucket).
  • Regole: segua le convenzioni di denominazione standard per i bucket S3 (ad es. lettere minuscole, trattini, nessun carattere speciale o spazio).

Contenuto del sito

  • File statici: serve almeno un file index.html. È la pagina di atterraggio predefinita caricata quando un utente visita l'URL del sito.
  • Pagina di errore facoltativa: si consiglia di fornire un file error.html. Viene visualizzata quando un utente tenta di accedere a una pagina o a un file inesistente.
  • Struttura dei file: mantenga la struttura del sito chiara. Le strutture complesse con sottocartelle funzionano, ma richiedono riferimenti di percorso precisi nei link del file HTML.

Autorizzazioni di accesso

  • Accesso in lettura pubblico: il bucket deve essere configurato in modo che gli utenti anonimi (chiunque su Internet) possano leggere i file.
  • Nessun accesso in scrittura: assicuri che solo gli utenti autorizzati dispongano dei permessi di scrittura per modificare il contenuto.
  • Bucket Policy: deve creare una bucket policy che consenta esplicitamente l'accesso pubblico agli oggetti (file) nel bucket.

Una volta soddisfatti questi prerequisiti, può procedere con la configurazione.

Tutorial

Passo 1: installare e preparare l'AWS CLI

Per interagire con lo storage S3, abbiamo bisogno dell'AWS CLI.

Suggerimento: una guida dettagliata per l'installazione consigliata dell'AWS CLI (tramite venv Python) e informazioni sulle funzionalità IAM avanzate sono disponibili nella nostra documentazione separata: AWS CLI e funzionalità IAM.

Se ha già installato l'AWS CLI in un ambiente virtuale, assicuri che sia attivato per i passi successivi:

source ~/ceph.venv/bin/activate

Passo 2: testare gli endpoint S3 (facoltativo)

Può verificare in anticipo che gli endpoint del sito siano raggiungibili:

curl http://sites.ewstorage.ch
curl https://sites.ewstorage.ch

Passo 3: configurare l'AWS CLI e impostare le variabili d'ambiente

Imposti le credenziali e i parametri di configurazione necessari come variabili d'ambiente. Sostituisca i xxx di AWS_ACCESS_KEY_ID e AWS_SECRET_ACCESS_KEY con le sue credenziali S3 effettive. Adatti anche il nome del bucket alle sue esigenze.

# Zugangsdaten und Einstellungen
export AWS_ACCESS_KEY_ID=xxx
export AWS_SECRET_ACCESS_KEY=xxx
export AWS_REQUEST_CHECKSUM_CALCULATION=when_required
export AWS_RESPONSE_CHECKSUM_VALIDATION=when_required
export AWS_MAX_ATTEMPTS=1

# Regionale Parameter und Bucket-Name
export AWS_ENDPOINT_URL=https://s3.ewstorage.ch 
export AWS_DEFAULT_REGION=ch-zh1
export bucket=meine-website-bucket

Passo 4: creare il bucket

Ora creiamo il bucket S3 che in seguito fungerà da server web:

# List existing buckets
aws  s3 ls

# Create new bucket
aws  s3 mb s3://${bucket}

# Verify the bucket was created
aws  s3 ls s3://${bucket}

Passo 5: impostare la Bucket Policy (accesso in lettura pubblico)

Affinché i visitatori possano visualizzare il sito, i file nel bucket devono essere leggibili pubblicamente. A tal fine, assegniamo una policy al bucket:

Non combinabile con l'access fencing

Questa policy rende il bucket leggibile pubblicamente. Non applichi una bucket policy di access fencing (DenyAllWithoutRole, vedere Bucket Policies e access fencing) a un bucket di un sito web: il deny esplicito prevale e il sito smette di funzionare.

aws  s3api put-bucket-policy --bucket="${bucket}" --policy '
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::'${bucket}'/*"
        }
    ]
}'

# Query the policy for verification (requires jq)
aws  s3api get-bucket-policy --bucket="${bucket}" --output text | jq .

Passo 6: abilitare l'hosting web sul bucket

Questo comando indica al bucket di comportarsi come un server web e di cercare per impostazione predefinita un file index.html.

aws s3api put-bucket-website \
  --bucket=${bucket} \
  --website-configuration='{"IndexDocument":{"Suffix":"index.html"}}'

Passo 7: creare e caricare un sito di test (index.html)

Creiamo un index.html semplice e lo carichiamo direttamente nel bucket:

echo '<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Page</title>
</head>
<body>
    <h1>Hello, World</h1>
    <p>This is a simple test file for index.html.</p>
</body>
</html>' | aws s3 cp - s3://${bucket}/index.html --content-type "text/html"

Passo 8: accedere al sito e testarlo

Il sito statico è ora online! Può accedervi tramite il sottodominio specifico del bucket.

# Access the root directory (automatically loads index.html)
curl https://${bucket}.sites.ewstorage.ch/

# Direct access to index.html
curl https://${bucket}.sites.ewstorage.ch/index.html

# List bucket contents
aws s3 ls s3://${bucket}

Endpoint per altre regioni (ad es. regione 2: ch-ge1)

Se desidera ospitare il bucket in un'altra regione (come ch-ge1), adatti l'URL e la regione di conseguenza:

export url=https://s3.ch-ge1.ewstorage.ch
export region=ch-ge1

# Test access for the second region
curl https://${bucket}.sites.ch-ge1.ewstorage.ch/index.html

Configurazioni avanzate

Configurare CORS (Cross-Origin Resource Sharing)

Che cos'è CORS? CORS è un meccanismo di sicurezza dei browser web moderni. Per impostazione predefinita, impedisce a un sito web (ad es. https://www.my-website.com) di accedere tramite JavaScript o fogli di stile a risorse di un dominio diverso (ad es. https://my-bucket.sites.ewstorage.ch).

Quando serve CORS in S3? Se utilizza il bucket S3 per ospitare font web (.woff, .ttf), moduli JavaScript o dati JSON (API) che intende poi incorporare su un dominio diverso, il browser bloccherà il caricamento per motivi di sicurezza. Negli strumenti per sviluppatori del browser vedrà quindi il tipico «errore CORS».

Per comunicare al bucket S3 che questo accesso è esplicitamente consentito, deve definire una policy CORS per il bucket.

Impostare la policy CORS tramite l'AWS CLI

Creiamo un semplice file di configurazione (cors.json) che consente le operazioni di lettura (GET, HEAD) da tutti i domini (*), poi lo assegniamo al bucket.

# 1. Create configuration file cors.json
cat <<EOF > cors.json
{
  "CORSRules": [
    {
      "AllowedOrigins": ["*"],
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET", "HEAD"],
      "MaxAgeSeconds": 3000
    }
  ]
}
EOF

# 2. Apply CORS policy to the bucket
aws s3api put-bucket-cors \
  --bucket ${bucket} \
  --cors-configuration file://cors.json

# 3. Query for verification
aws s3api get-bucket-cors --bucket ${bucket}

Suggerimento di sicurezza: se sa esattamente su quale dominio viene eseguito il suo sito (ad es. https://www.my-website.com), dovrebbe sostituire il carattere jolly "*" nel file cors.json alla voce "AllowedOrigins" con il suo dominio specifico (ad es. ["https://www.my-website.com"]) per aumentare la sicurezza.