---
title: Static web delivery with optional CDN
description: Referenzarchitektur für statische Web-Auslieferung auf STACKIT mit Object Storage als Origin, optionalem CDN und Observability für schnelle und sichere Seiten.
sidebar:
  badge:
    text: "STACKIT"
    variant: success
scfAsset:
  managed: false
  category: 'blueprint'
  external: false
  tags: ["design-and-mobilize", "design", "target-architecture", "replatform", "static-website", "cdn", "object-storage", "observability"]
  maintainers:
    - user: "lukas.weberruss"
      role: true
      website: true
source_url: "https://framework.stackit.cloud/de/migration/assetcontainer/stackit/architecture-static-web-cdn/"
source_file: "docs/de/migration/assetcontainer/stackit/architecture-static-web-cdn.mdx"
---

## Überblick

Dieses Muster adressiert externe statische Auslieferung auf STACKIT.
Es ist unabhängig von Cloud Foundry und nutzt Object Storage plus CDN für statische Inhalte.

## Einsatz

- **Hoher Anteil statischer Inhalte**: Frontend-Assets dominieren das Traffic-Profil.
- **Viele verteilte Nutzer**: geringe Latenz für statische Inhalte ist zentral.
- **Kontrolliertes Origin-Design**: Object Storage bleibt in STACKIT, Auslieferung am Rand wird optimiert.

## Architekturdiagramm

```d2
vars: {
  d2-config: {
    pad: 32
  }
}

style.font-size: 22

direction: down
grid-columns: 1

Users: "Users" {
  icon: ../../../../../../../public/stackit-icons/networking/ip.svg
}

CDN: "CDN (optional)" {
  icon: ../../../../../../../public/stackit-icons/networking/cdn.svg
  link: https://docs.stackit.cloud/products/network/load-balancing-and-content-delivery/cdn/
}

ObjectStorage: "Object Storage" {
  icon: ../../../../../../../public/stackit-icons/computing/object-storage.svg
  link: https://docs.stackit.cloud/products/storage/object-storage/
}

Obs: "Observability" {
  icon: ../../../../../../../public/stackit-icons/logging-monitoring/observability.svg
  link: https://docs.stackit.cloud/products/logging-and-monitoring/observability/
}

Users -> CDN: "HTTP/HTTPS"
Users -> ObjectStorage: "optionaler direkter Pfad"
CDN -> ObjectStorage: "statische Auslieferung"
ObjectStorage -> Obs: "optionale Origin-Metriken"
CDN -> Obs: "optionale CDN-Metriken"
```

## Designprinzipien

- **CDN nur bei messbarem Nutzen aktivieren**: Wirkung mit Latenz- und Cache-Hit-Metriken prüfen.
- **Cache-Invalidierung früh definieren**: Cache-Aktualisierung und eine Strategie für Versionen in den Release-Prozess aufnehmen.
- **API und statische Auslieferung sauber trennen**: cache-sensitive API-Antworten nicht mit statischen Policies vermischen.
- **Origin-Fallback-Raten beobachten**: hohe Fallback-Last deutet auf Cache-Probleme oder Probleme mit Versionen hin.

## Repository

<LinkCard
  title="STACKIT CMF Replatform Static Webserver repository"
  href="https://github.com/stackitcloud/stackit-cmf-replatform-static-webserver"
/>

1. Datei aus dem Beispiel kopieren: `cp env.tfvars.example env.tfvars`
2. Erforderliche Werte für statische Auslieferung setzen:

```hcl
project_id               = null
parent_container_id      = "cmf-parent-container-id"
project_name             = "cmf-static-webserver"
service_account_key_path = "/path/to/stackit-sa-key.json"
objectstorage_bucket_name = null
cdn_regions               = ["EU", "US"]
```

3. Feature-Flags setzen:

```hcl
setup_project       = true
setup_observability = true
setup_database      = false
setup_workload      = true
setup_loadgen       = false
setup_dns           = false
```

4. Ausführen:

```bash
terraform init
terraform apply -var-file=env.tfvars
```

Erwartetes Ergebnis: `static_web_url` liefert den statischen Endpunkt (`.../index.html`) über das CDN.

Hinweis: Dieses Muster stellt absichtlich keine VM- oder Load-Balancer-Komponenten bereit.