TechOverflow Logo
TechOverflow

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

English Français 简体中文 Deutsch

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 müssen Sie die nginx.conf-Datei aktualisieren, indem Sie einen neuen Location-Block für die zusätzliche Sprache kopieren, 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;
    # Disable access & error logs
    access_log off;
    error_log /var/log/nginx/error.log;
    # Redirect "/" to Angular application in the preferred language of the browser
    add_header Cache-Control "public, max-age=180";
    # Serve individual languages
    location /en/ {
        try_files $uri$args /en/index.html?$args;
    }
    location /de/ {
        try_files $uri$args /de/index.html?$args;
    }
    # Redirect to default language
    location = / {
      return 302 /$accept_language/;
    }

    # Redirect other URLs to default language
    location / {
      return 302 /$accept_language/$uri$args;
    }
}

Angular-Buildskript

Rufen Sie 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 $@

Dockerfile

Dockerfile
FROM nginx:1.27.5-alpine-slim

WORKDIR /app
# Copy config
COPY nginx.conf /etc/nginx/conf.d/default.conf
# Copy dist files to /app
COPY dist/mytheme/. ./
Check out similar posts by category: Nginx, Angular