web-dev-qa-db-ja.com

angular i18nアプリケーションのNginx設定

私は、フランス語と英語の両方をサポートするi18nを使用してangular-5アプリケーションを作成しました。次に、サポートされている言語ごとにアプリの個別のバージョンをデプロイしました

-dist 
 | ___ ja /
 | | __ index.html 
 | ___ fr /
 | __ index.html

また、次のnginx構成を追加して、両方の言語でアプリケーションを提供しました。

 server {
 root /var/www/dist;
 index index.html index.htm; 
 server_name Host.local; 
 
場所^ /（fr | en）/（。*）$ {
 try_files $ 2 $ 2//$1/index.html;
} 
}

私がやりたかったのは、両方のアプリケーションに対応し、英語版とフランス語版を切り替えられるようにすることです。

たとえば、私がHost.local/en/something切り替えた場合Host.local/fr/something「something」ページのフランス語版を取得する必要があります。

私が共有したnginx構成では、アプリを閲覧するときにページを更新するたびに404 not foundエラーが表示され、アプリを個別に閲覧したり、アプリを切り替えたりすることもできません。

私は何を取りこぼしたか？それを達成するための適切なNginx confは何ですか？

angularnginxinternationalization
10
Ahmed Siouani

iisでも同じことを行いました。最初に、「base-href」オプションを使用してアプリをビルドする必要があります。

 ng build --output-path=dist/fr --prod --bh /fr/
 ng build --output-path=dist/en --prod --bh /en/

そしてnginxのためにこの設定を使用してください

location /fr/ {
  alias /var/www/dist/fr/;
  try_files $uri$args $uri$args/ /fr/index.html;
}
location /en/ {
 alias /var/www/dist/en/;
 try_files $uri$args $uri$args/ /en/index.html;
}

/ en/somerouteから/ fr/somerouteへのナビゲーションでは、言語スイッチャーがあるコンポーネントの現在のルーターのURLを取得できます

getCurrentRoute() {
    return this.router.url;
}

言語セレクタをクリックすると、選択した言語で同じルートにリダイレクトします。

 <li *ngFor="let language of languages;let i=index" >
    <a  href="/{{language.lang}}/#{{getCurrentRoute()}}"  (click)="changeLanguage(language.lang)">
        {{language.lang}}
    </a>
 </li>

言語メソッドを変更する

changeLanguage(lang: string) {
    const langs = ['en', 'fr'];
    this.languages = this.allLanguages.filter((language) => {
        return language.lang !== lang;
    });
    this.curentLanguage = this.allLanguages[langs.indexOf(lang)].name
    localStorage.setItem('Language', lang);
    if (isDevMode()) {
        location.reload(true);
    }
}
13
Fateh Mohamed

ビルドした後：

ng build --prod --base-href /fr/ --output-path dist/fr
ng build --prod --base-href /en/ --output-path dist/en

ビルドをnginx serveディレクトリにコピーします：

cp -r dist/* /usr/share/nginx/my-app

それから私は私のために働く2つの異なるNGINX設定を見つけました：

ルートパスの使用

server {
    root /usr/share/nginx/my-app;
    location /en/ {
        autoindex on;
        try_files $uri$args $uri$args/ /en/index.html;
    }

    location /fr/ {
        autoindex on;
        try_files $uri$args $uri$args/ /fr/index.html;
    }

    # Default to FR
    location / {
        # Autoindex is disabled here + the $uri$args/ is missing from try_files
        try_files $uri$args /fr/index.html;
    }
}

エイリアスを使用する

server {
    listen 80 default_server;
    index index.html;

    location /en/ {
        alias /usr/share/nginx/my-app/en/;
        try_files $uri$args $uri$args/ /en/index.html;
    }

    location /fr/ {
        alias /usr/share/nginx/my-app/fr/;
        try_files $uri$args $uri$args/ /fr/index.html;
    }

    # Default to FR
    location / {
        alias /usr/share/nginx/my-app/fr/;
        try_files $uri$args $uri$args/ /fr/index.html;
    }
}

注：ルートパスソリューションでは、autoindex onオプションですが、$uri$args/からtry_filesの部分も削除する必要があります。そうしないと、「 「[directory]」のディレクトリインデックスは禁止されているエラーです 」.

[〜＃〜] fyi [〜＃〜]：役立つと思います ROOTとALIASに関するすばらしい説明 。

バージョン

Angular CLI: 6.0.7
Node: 8.11.2
Angular: 6.0.3
4
nyxz

Angular 9には、すべての言語バージョンを一度にビルドする新しいオプションがあります。また、構成されたbaseHrefにロケールを追加することにより、アプリケーションの各バージョンのベースHREFを設定します。

ng build --prod --localize

次に、すべてのビルドをnginx serveディレクトリにコピーする必要があります

COPY /dist/my-app/ /usr/share/nginx/my-app/

そして、前の回答に示されているようにnginxを構成します。

0
lardum

http://nginx.org/r/try_files が機能する方法には、よくある誤解があります。ドキュメント（上記のリンクから）をよく見ると、_try_files_ディレクティブの最初と中間のパラメーターのタイプは「file」ですが、最後のパラメーターは「uri」と呼ばれています。これは、あなたの場合、 http://nginx.org/r/location を修正して正規表現を適切に処理するためです（locationコードに_~_がありません）修飾子）、コメントで確認すると、無限ループになる可能性があります。

一般的に、正規表現をnginxで使用することはお勧めできません。正規表現の使用を回避できる単純な状況で最大のパフォーマンスを得るため、英語とフランス語にそれぞれ1つずつ、2つの独立した場所を用意することをお勧めします。

_location /fr/ {
    try_files $uri /fr/index.html =410;
}
location /en/ {
    try_files $uri /en/index.html =410;
}
_

上記のコードは、webappフロントエンド自体から正しいURL処理を実行することを前提としていることに注意してください。特定のリソースが_/en/_バージョンと_/fr/_バージョン間で共有されている場合、_/_ベース、_/en/_または_/fr/_指定子なし。コードの_=410_部分は、_=404_と同じように動作しますが、エラーがわずかに異なり、どのディレクティブがエラーの原因であるかをデバッグしやすくなっています。

0
cnst