Apache configuration for Angular with i18n

73 Views Asked by At

I'm using Angular's i18n features and I'm now trying to deploy the multiple instances of my webapp: one in French (default language), the other one in English. What I would like to do is to access the webapp on https://qmzclient.inte.fr/[fr/en]/portal or https://qmzclient.inte.fr/portal with a hidden redirection based on the Accept-Language header (both solutions are fine).

Here is the current configuration of the webapp replicated from the production environment. I've skipped the configuration unrelated to the webapp.

<VirtualHost *:443>
    ServerName qmzclient.inte.fr
    SSLEngine on
    SSLCertificateFile /etc/letsencrypt/live/qmz/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/qmz/privkey.pem

    Header always set Strict-Transport-Security "max-age=0;"

    <Location /portal>
        RewriteEngine On
        RewriteBase /portal
        
        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]

        Header always set Cache-Control "no-cache"
    </Location>

    Alias /portal /var/www/html/portal-qmz
</VirtualHost>

Here is my latest attempt, based on Angular's suggested Apache configuration:

<Location /portal>
    Header always set Cache-Control "no-cache"

    RewriteEngine On
    RewriteBase /portal
    RewriteRule ^../index\.html$ - [L]

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule (..) $1/index.html [L]

    RewriteCond %{HTTP:Accept-Language} ^en [NC]
    RewriteRule ^$ /en/ [R]

    RewriteCond %{HTTP:Accept-Language} !^en [NC]
    RewriteRule ^$ /fr/ [R]
</Location>
Alias /portal /var/www/html/portal-qmz

I've tried a few other variations (a mix of the existing config and the Angular one) that were unsuccessful. I'm new to Apache and I believe the alias is what makes me struggle with the redirections. I also don't understand how RewriteRule ^$ /en/ works, which might be the key to solve my issue. This last config seems to lose the alias on the assets:

[09/May/2023:10:55:57 +0200] "GET /portal/connexion= HTTP/1.1" 404 210 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36"
[09/May/2023:10:55:57 +0200] "GET /favicon.ico HTTP/1.1" 404 209 "https://qmzclient.inte.fr/portal/connexion" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36"

The French and English versions are located in /var/www/html/portal-qmz/fr and /var/www/html/portal-qmz/en directories with the base href set to <base href="/portal/"> in both index.html versions. I managed to successfully access the English version by setting the alias to /var/www/html/portal-qmz/en while using the original Location config, so I believe the English build of my webapp is fine and isn't the issue here.

0

There are 0 best solutions below