web-dev-qa-db-ja.com

Angular 2CLIの環境に基づいた異なるプロキシ構成

Angular 2 CLIプロジェクトで開発環境と本番環境の2つの異なるプロキシURLを宣言するにはどうすればよいですか？たとえば、開発モードで使用したいのですが

{
    "/api/*": {
        "target": "http://localhost:3000",
        "secure": false
    }
}

しかし、本番モードでは、

{
    "/api/*": {
        "target": "http://api.exampledomain.com",
        "secure": false
    }
}
angularangular2-cli
8
Tu Shams

環境ファイルを介してプロキシ機能を制御できるとは思いません。別の方法として、環境ファイルでAPIドメインを定義することもできます。

// environment.ts
export const environment = {
    production: false,
    api: 'http://localhost:3000'
};

// environment.prod.ts
export const environment = {
    production: true,
    api: 'http://api.exampledomain.com'
}

次に、tsソースファイルで環境ファイルからドメインをプルします

// some service
import { Injectable } from '@angular/core';
import { environment } from '../../../environment.ts';
import { Http } from '@angular/http';

@Injectable()
export class SomeService {
    constructor(private http: Http);

    getData(){
        return this.http.get(environment.api + '/rest-of-api');
    }
}

これで、ビルドまたはサーブコマンドを実行すると、環境ファイルで定義されたAPIパスが使用されます。

0
LLai

実際、あなたはそれを行うことができます、あなたはただルーターを設定する必要があります：

{
    "/api": {
        "target": "https://api.exampledomain.com",
        "secure": false,
        "logLevel": "debug",
        "router": {
          "localhost:4200" : "http://localhost:3000/exampledomain",
          "staging.exampledomain.com" : "http://api.staging.exampledomain.com"
        }
    }
}

これは何をしますか：

  • yout url match the proxy =>定義されたターゲットを呼び出します
  • ホストURLが1つのルーター構成に一致する=>新しいターゲットを使用する

例えば ​​：

localhost：4200my angular app、url "api/callMeMaybe"を呼び出すと、ルーターはそれを検出し、「 http：// localhost：3000/exampledomain "」でリダイレクトします。
staging.exampledomain.comを使用している場合、リダイレクトは「 http：// api.stagging.exampledomain.com "。
次に、一致するものがない場合は、元のターゲットリダイレクトが保持されます。

順序が重要なので注意してください（最初の試合が行われます）

これが ドキュメント と 例

編集

ホスト値はchromeデバッガーの[ネットワーク]タブでAPI呼び出しを選択すると、次の詳細が表示されます： api call header screenshot

7
LE GALL Benoît