TechOverflow Logo
TechOverflow

Comment utiliser nginx pour délivrer des UI Angular multilingues I18N avec @angular/localize

English Deutsch 简体中文 Français

Ceci est ma configuration nginx qui sert automatiquement une UI Angular internationalisée multilingue de et en via Docker.

Si l’utilisateur n’a pas déjà accédé à une version linguistique spécifique du site, il sera redirigé vers la version correspondant aux paramètres de langue de son navigateur (ou par défaut de).

Lors de l’ajout de langues supplémentaires, vous devez mettre à jour le fichier nginx.conf en copiant un nouveau bloc location pour la langue supplémentaire, plus la ligne $accept_language pour accepter automatiquement une nouvelle langue.

Fichier de configuration Nginx

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;
    # Désactiver les logs d'accès et d'erreur
    access_log off;
    error_log /var/log/nginx/error.log;
    # Rediriger "/" vers l'application Angular dans la langue préférée du navigateur
    add_header Cache-Control "public, max-age=180";
    # Servir les langues individuelles
    location /en/ {
        try_files $uri$args /en/index.html?$args;
    }
    location /de/ {
        try_files $uri$args /de/index.html?$args;
    }
    # Rediriger vers la langue par défaut
    location = / {
      return 302 /$accept_language/;
    }

    # Rediriger les autres URLs vers la langue par défaut
    location / {
      return 302 /$accept_language/$uri$args;
    }
}

Script de build Angular

Appelez ce script shell juste avant de construire l’image Docker

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
# Copier la configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf
# Copier les fichiers dist vers /app
COPY dist/mytheme/. ./
Check out similar posts by category: Nginx, Angular