Wie man nginx verwendet, um mehrsprachige I18N Angular-UIs mit @angular/localize bereitzustellen

Dies ist meine nginx-Konfiguration, die automatisch eine de- und en-mehrsprachig internationalisierte Angular-UI über Docker bereitstellt.

Wenn der Benutzer nicht bereits eine sprachspezifische Version der Site aufgerufen hat, wird er auf die Version umgeleitet, die den Spracheinstellungen seines Browsers entspricht (oder einem Standard von de).

Beim Hinzufügen zusätzlicher Sprachen musst du die nginx.conf-Datei aktualisieren, indem du einen neuen Location-Block für die zusätzliche Sprache kopierst, plus die $accept_language-Zeile, um eine neue Sprache automatisch zu akzeptieren.

Nginx-Konfigurationsdatei

nginx_i18n_conf.conf

map $http_accept_language $accept_language {
    ~*^de de;
    ~*^en en;
    default de;
}
server {
    listen 80 default_server;
    root /app/browser;
    index index.html;
    # Zugriffs- und Fehlerprotokolle deaktivieren
    access_log off;
    error_log /var/log/nginx/error.log;
    # "/" zur Angular-Anwendung in der bevorzugten Sprache des Browsers umleiten
    add_header Cache-Control "public, max-age=180";
    # Einzelne Sprachen ausliefern
    location /en/ {
        try_files $uri$args /en/index.html?$args;
    }
    location /de/ {
        try_files $uri$args /de/index.html?$args;
    }
    # Zur Standardsprache umleiten
    location = / {
      return 302 /$accept_language/;
    }

    # Andere URLs zur Standardsprache umleiten
    location / {
      return 302 /$accept_language/$uri$args;
    }
}

map $http_accept_language $accept_language {
    ~*^de de;
    ~*^en en;
    default de;
}
server {
    listen 80 default_server;
    root /app/browser;
    index index.html;
    # Zugriffs- und Fehlerprotokolle deaktivieren
    access_log off;
    error_log /var/log/nginx/error.log;
    # "/" zur Angular-Anwendung in der bevorzugten Sprache des Browsers umleiten
    add_header Cache-Control "public, max-age=180";
    # Einzelne Sprachen ausliefern
    location /en/ {
        try_files $uri$args /en/index.html?$args;
    }
    location /de/ {
        try_files $uri$args /de/index.html?$args;
    }
    # Zur Standardsprache umleiten
    location = / {
      return 302 /$accept_language/;
    }

    # Andere URLs zur Standardsprache umleiten
    location / {
      return 302 /$accept_language/$uri$args;
    }
}

Angular-Buildskript

Rufe dieses Shell-Skript direkt vor dem Erstellen des Docker-Images auf

build_angular_i18n.sh

ng build --aot --named-chunks=true --optimization --output-hashing=all --stats-json $@

ng build --aot --named-chunks=true --optimization --output-hashing=all --stats-json $@

Dockerfile

FROM nginx:1.27.5-alpine-slim

WORKDIR /app
# Konfiguration kopieren
COPY nginx.conf /etc/nginx/conf.d/default.conf
# dist-Dateien nach /app kopieren
COPY dist/mytheme/. ./

FROM nginx:1.27.5-alpine-slim

WORKDIR /app
# Konfiguration kopieren
COPY nginx.conf /etc/nginx/conf.d/default.conf
# dist-Dateien nach /app kopieren
COPY dist/mytheme/. ./

Ähnliche Beiträge nach Kategorie: Nginx, Angular

Wenn dieser Beitrag dir geholfen hat, erwäge, mir einen Kaffee zu spendieren oder per PayPal zu spenden, um die Recherche und Veröffentlichung neuer Beiträge auf TechOverflow zu unterstützen

Buy me a coffee