TechOverflow Logo
TechOverflow

nginx-Docker-Konfiguration, um eine öffentliche S3/MinIO Angular-Single-Page-Application über HTTP bereitzustellen

English Français 简体中文 Español Українська Čeština Português Русский Deutsch

Dies ist meine nginx-Konfiguration, die automatisch eine öffentliche S3/MinIO Angular-Single-Page-Application über HTTP bereitstellt. Es wird erwartet, dass sie in einer Konfiguration mit einem externen Proxy verwendet wird, der HTTPS bereitstellt. In meinem Fall ist das Traefik. Siehe Einfaches Traefik docker-compose-Setup mit Lets Encrypt Cloudflare DNS-01 & TLS-ALPN-01 & HTTP-01-Challenges für Details zu meiner Konfiguration.

Diese Konfigurationsvariante enthält keine Konfiguration für @angular/localize-Konfigurationen über S3. Siehe Wie man nginx verwendet, um mehrsprachige I18N Angular-UIs mit @angular/localize bereitzustellen für ein nginx-Beispiel, das eine statische Site mit mehreren Sprachen und automatischer Auswahllogik bereitstellt.

nginx.conf

Du musst hier typischerweise nur die folgenden Variablen ändern:

nginx_minio_spa.conf
    # Ändere dies zu deinem S3-Bucket-Namen. Stelle sicher, dass er auf öffentlich gesetzt ist!
    set $bucket "/my-bucket";
    # Ändere dies zu deinem MinIO/S3-Host (ohne Schema)
    set $minio_host "minio.mydomain.com";

Vollständige Konfiguration:

nginx.conf
# /etc/nginx/nginx.conf
worker_processes auto;

events { worker_connections 1024; }

http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile      on;

  # DNS über den Docker-Host (Docker-eingebettetes DNS)
  resolver 127.0.0.11 valid=24h ipv6=off;
  resolver_timeout 5s;

  # Optionales gzip für Text-Assets
  gzip on;
  gzip_vary on;
  gzip_min_length 1024;
  gzip_proxied any;
  gzip_types
      text/plain text/css application/javascript application/json
      application/xml application/rss+xml image/svg+xml;

  # Festplatten-Cache (Passe die Größe nach Bedarf an)
  proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:100m max_size=10g inactive=30d use_temp_path=off;

  server {
    listen 80;
    server_name _;  # Traefik leitet hierher weiter

    # Hilfsvariable für deinen Bucket-Pfad
    # Hilfsvariablen für deinen Bucket-Pfad und deinen MinIO-Host
    set $bucket "/my-bucket";
    # Ändere dies zu deinem MinIO/S3-Host (ohne Schema)
    set $minio_host "minio.techoverflow.net";

    # Fange Upstream-404s/403s ab und leite zur SPA weiter
    error_page 404 = @spa;
    error_page 403 = @spa;

    # Exaktes Root "/" -> index.html ausliefern
    location = / {
    proxy_pass https://$minio_host$bucket/index.html;
    proxy_set_header Host $minio_host;
      proxy_ssl_server_name on;

      proxy_buffering on;
      proxy_cache STATIC;
      proxy_cache_key $scheme$proxy_host$uri$is_args$args;

      # SPA-HTML nicht in Browsern cachen (optional)
      add_header Cache-Control "no-cache, must-revalidate" always;

      # Fehler abfangen, damit error_page auch aus der Cache-Schicht funktioniert
      proxy_intercept_errors on;

      # Vermeide das Cachen von Upstream-Fehlern
      proxy_no_cache $upstream_status = 404;
      proxy_cache_bypass $upstream_status = 404;
      proxy_no_cache $upstream_status = 403;
      proxy_cache_bypass $upstream_status = 403;

      add_header X-Cache-Status $upstream_cache_status always;
    }

    # Einheitliche Behandlung für alles andere
    location / {
    proxy_pass https://$minio_host$bucket$uri$is_args$args;
    proxy_set_header Host $minio_host;
      proxy_ssl_server_name on;

      proxy_buffering on;
      proxy_http_version 1.1;

      proxy_cache STATIC;
      proxy_cache_key $scheme$proxy_host$uri$is_args$args;

      # Einheitliche TTLs für erfolgreiche Antworten
      proxy_cache_valid 200 301 302 24h;
      # Upstream-Fehler nicht cachen (verhindert das Ausliefern einer einfachen NGINX-404)
      proxy_no_cache $upstream_status = 404;
      proxy_cache_bypass $upstream_status = 404;
      proxy_no_cache $upstream_status = 403;
      proxy_cache_bypass $upstream_status = 403;

      # Optionales Browser-Caching (aktivieren, wenn du versionierte Assets verwendest)
      # add_header Cache-Control "public, max-age=86400, immutable" always;

      add_header X-Cache-Status $upstream_cache_status always;

      # Stelle sicher, dass der SPA-Fallback bei 404/403 vom Origin auslöst
      proxy_intercept_errors on;
    }

    # SPA-Fallback-Ziel
    location @spa {
      proxy_pass https://$minio_host$bucket/index.html;
      proxy_set_header Host $minio_host;
      proxy_ssl_server_name on;

      proxy_buffering on;
      proxy_cache STATIC;
      proxy_cache_key $scheme$proxy_host$uri$is_args$args;

      add_header Cache-Control "no-cache, must-revalidate" always;
      add_header X-Cache-Status $upstream_cache_status always;
    }
  }
}

docker-compose.yml

Die docker-compose-Konfiguration ist ziemlich einfach.

docker-compose.yml
services:
  nginx:
    image: nginx:alpine
    restart: unless-stopped
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
      - ./nginx_cache:/var/cache/nginx
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.app-mydomain.rule=Host(`app.mydomain.com`)"
      - "traefik.http.routers.app-mydomain.entrypoints=websecure"
      - "traefik.http.routers.app-mydomain.tls.certresolver=cloudflare"
      - "traefik.http.routers.app-mydomain.tls.domains[0].main=mydomain.com"
      - "traefik.http.routers.app-mydomain.tls.domains[0].sans=*.mydomain.com"
Ähnliche Beiträge nach Kategorie: Nginx, S3, Angular