docs: integrate webserver configuration (#36553)

The article previously referred was out of date. Most of the article content
was already duplicated here, or described how to generate multiple bundles. But
creating multiple bundles manually is now obsolete and the parameter `--localize`
should be preferred instead, because it is much faster.

This commit integrate the only interesting part left, relating to webserver configuration.

Co-authored-by: David Shevitz <dshevitz@google.com>

PR Close #36553
This commit is contained in:
Adrien Crivelli 2020-04-10 14:54:40 +09:00 committed by Jessica Janiuk
parent 4def19f39f
commit 07f2e0c34e
1 changed files with 77 additions and 2 deletions

View File

@ -774,8 +774,83 @@ The HTML `base` tag with the `href` attribute specifies the base URI, or URL, fo
You can also use the CLI `--baseHref` option with [`ng build`](cli/build "CLI reference for ng build") to declare the base `href` at compile time.
Configuring servers for hosting multiple locales is outside the scope of this guide.
For details on how to deploy apps to a remote server, see [Deployment](guide/deployment "Deployment guide").
### Configuring servers
Typical deployment of multiple languages serve each language from a different subdirectory.
Users are redirected to the preferred language defined in the browser using the
`Accept-Language` HTTP header. If the user has not defined a preferred language,
or if the preferred language is not available, then the server falls back to the default language.
Users can change the language by navigating to other subdirectories, which often occurs using a
menu implemented in the application.
For more information on how to deploy apps to a remote server, see [Deployment](guide/deployment "Deployment guide").
#### Nginx
The following is an example of an Nginx configuration.
```
http {
# Browser preferred language detection (does NOT require AcceptLanguageModule)
map $http_accept_language $accept_language {
~*^de de;
~*^fr fr;
~*^en en;
}
# ...
}
server {
listen 80;
server_name localhost;
root /www/data;
# Fallback to default language if no preference defined by browser
if ($accept_language ~ "^$") {
set $accept_language "fr";
}
# Redirect "/" to Angular app in browser's preferred language
rewrite ^/$ /$accept_language permanent;
# Everything under the Angular app is always redirected to Angular in the correct language
location ~ ^/(fr|de|en) {
try_files $uri /$1/index.html?$args;
}
# ...
}
```
#### Apache
The following is an example of an Apache configuration.
```
<VirtualHost *:80>
ServerName localhost
DocumentRoot /www/data
<Directory "/www/data">
RewriteEngine on
RewriteBase /
RewriteRule ^../index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (..) $1/index.html [L]
RewriteCond %{HTTP:Accept-Language} ^de [NC]
RewriteRule ^$ /de/ [R]
RewriteCond %{HTTP:Accept-Language} ^en [NC]
RewriteRule ^$ /en/ [R]
RewriteCond %{HTTP:Accept-Language} !^en [NC]
RewriteCond %{HTTP:Accept-Language} !^de [NC]
RewriteRule ^$ /fr/ [R]
</Directory>
</VirtualHost>
```
{@a app-pre-translation}