프로젝트의 배포 파일이 myapp 디렉터리에 있다면, 일반적으로 지역별 디렉터리에 각 지역에 맞는 버전을 제공합니다.
예를 들어 프랑스어 버전은 myapp/fr 디렉터리에, 스페인어 버전은 myapp/es 디렉터리에 둡니다.
HTML base 태그의 href 어트리뷰트는 상대 링크의 기준 URI 또는 URL을 지정합니다.
angular.json 작업 공간 빌드 설정 파일의 "localize" 옵션을 true나 지역 ID 배열로 설정하면, CLI가 애플리케이션 버전별로 기준 href를 조정합니다.
각 애플리케이션 버전의 기준 href를 조정하기 위해 CLI는 설정된 "subPath"를 해당 지역의 URL 경로 구간으로 사용합니다.
"subPath"를 설정하지 않으면 지역 ID가 기본값으로 사용됩니다.
각 지역의 "subPath"는 angular.json 작업 공간 빌드 설정 파일에서 지정하세요.
다음 예제에서는 "subPath"를 빈 문자열로 설정합니다.
angular.json
"projects": {
"angular.io-example": {
// ...
"i18n": {
"sourceLocale": "en-US",
"locales": {
"fr": {
"translation": "src/locale/messages.fr.xlf",
"subPath": ""
}
}
},
"architect": {
// ...
}
}
}
// ...
}
서버 설정하기
여러 언어를 배포할 때는 일반적으로 각 언어를 서로 다른 하위 디렉터리에서 제공합니다.
Accept-Language HTTP 헤더를 사용해 브라우저에 설정된 사용자의 선호 언어로 리디렉션합니다.
사용자가 선호 언어를 설정하지 않았거나 해당 언어를 제공하지 않는 경우, 서버는 기본 언어를 사용합니다.
언어를 변경하려면 현재 위치를 다른 하위 디렉터리로 변경하세요.
이러한 하위 디렉터리 변경은 보통 애플리케이션에 구현된 메뉴를 통해 이루어집니다.
원격 서버에 앱을 배포하는 방법에 대한 자세한 내용은 배포를 참고하세요.
중요: outputMode를 server로 설정한 서버 렌더링을 사용하는 경우, Angular가 Accept-Language HTTP 헤더에 따라 리디렉션을 동적으로 자동 처리합니다.
서버나 설정을 수동으로 조정할 필요가 없어 배포 과정이 간단해집니다.
Nginx 예제
다음 예제는 Nginx 설정을 보여줍니다.
http {
# Browser preferred language detection (does NOT require
# AcceptLanguageModule)
map $http_accept_language $accept_language {
~*^de de;
~*^fr fr;
~*^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 application in the preferred language of the browser
rewrite ^/$ /$accept_language permanent;
# Everything under the Angular application is always redirected to Angular in the
# correct language
location ~ ^/(fr|de|$) {
if ($accept_language = "") {
try_files $uri /index.html?$args;
}
try_files $uri /$1/index.html?$args;
}
# ...
}
Apache 예제
다음 예제는 Apache 설정을 보여줍니다.
<VirtualHost *:80>
ServerName localhost
DocumentRoot /www/data
<Directory "/www/data">
# Enable rewrite engine for URL manipulation
RewriteEngine on
RewriteBase /
# Serve 'index.html' for root-level access
RewriteRule ^../index\.html$ - [L]
# If the requested file or directory does not exist, redirect to 'index.html'
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (..) $1/index.html [L]
# Language-based redirection based on HTTP Accept-Language header
# Redirect German users to the '/de/' directory
RewriteCond %{HTTP:Accept-Language} ^de [NC]
RewriteRule ^$ /de/ [R]
# Redirect English-speaking users to the '/en/' directory
RewriteCond %{HTTP:Accept-Language} ^en [NC]
RewriteRule ^$ /en/ [R]
# Redirect users with unsupported languages (not 'en' or 'de') to the '/fr/' directory
RewriteCond %{HTTP:Accept-Language} !^en [NC]
RewriteCond %{HTTP:Accept-Language} !^de [NC]
RewriteRule ^$ /fr/ [R]
</Directory>
</VirtualHost>
사전 렌더링
outputMode를 static으로 설정하면 CLI는 서버 라우팅 규칙에서 RenderMode.Prerender로 설정한 경로를 빌드 시점에 지역별로 사전 렌더링하며, 서버를 생성하지 않습니다.
자세한 내용은 완전히 정적인 애플리케이션 생성하기를 참고하세요.
언어를 선택하는 서버가 없으므로 호스팅 설정에서 리디렉션과 페이지를 찾을 수 없는 경우를 처리해야 합니다.
출력 구조
CLI는 각 지역의 파일을 browser/ 내 별도 디렉터리에 출력합니다.
각 디렉터리에는 해당 지역의 사전 렌더링된 HTML, 번들, public/ 파일의 복사본이 포함됩니다.
사전 렌더링된 페이지의 lang 어트리뷰트와 <base href>는 해당 지역에 맞게 설정됩니다.
다음 구조는 다음 섹션에서 설명하는 것처럼 원본 지역을 루트에서 제공한다고 가정합니다.
browser/
├── index.html
├── about/index.html
├── tr/
│ ├── index.html
│ └── about/index.html
└── es/
├── index.html
└── about/index.html
루트 페이지는 lang="en"과 <base href="/">를 사용합니다.
tr/ 페이지는 lang="tr"과 <base href="/tr/">를, es/ 페이지는 lang="es"와 <base href="/es/">를 사용합니다.
루트에서 원본 지역 제공하기
원본 지역을 /에서 제공하고 다른 지역을 그 아래에 배치하려면 sourceLocale을 객체 형식으로 지정하고 "subPath"를 빈 문자열로 설정하세요.
{
"i18n": {
"sourceLocale": {
"code": "en",
"subPath": ""
},
"locales": {
"tr": "src/locale/messages.tr.xlf",
"es": "src/locale/messages.es.xlf"
}
}
}
"subPath"를 빈 문자열로 설정하지 않으면 CLI는 /en/처럼 지역 코드로 이름을 지정한 별도 디렉터리에 원본 지역의 파일을 배치합니다.
사용자의 언어로 리디렉션하기
정적 출력물은 Accept-Language HTTP 헤더에 따라 리디렉션하지 않습니다.
해당 헤더에 따라 리디렉션하도록 호스트를 설정하세요.
Nginx와 Apache 예제는 기본 지역을 포함한 모든 지역이 별도 하위 디렉터리에 있다고 가정합니다.
원본 지역을 루트에서 제공한다면 다른 지역에 대해서만 /에서 리디렉션하도록 예제를 조정하세요.
페이지를 찾을 수 없는 경우
CLI는 ** 와일드카드 라우팅 규칙의 페이지를 사전 렌더링하지 않습니다.
페이지를 찾을 수 없을 때 표시할 페이지를 만들려면 404처럼 구체적인 라우팅 규칙을 선언하고 서버 라우팅 규칙에서 해당 페이지를 사전 렌더링하도록 설정하세요.
그러면 /404/index.html과 /tr/404/index.html처럼 지역별 페이지가 생성됩니다.
존재하지 않는 URL의 지역 경로에 맞는 페이지를 제공하도록 호스트를 설정하세요.
예를 들어 Nginx에서는 error_page, Apache에서는 ErrorDocument를 사용할 수 있습니다.