角度CLI - 今すぐ導入するプロダクションプロキシを設定する

Question

私は現在、自分のアプリケーションを展開するためにnow.shを使用しています。最近、私はproxy.config.jsonファイルに要求のためにbaseUrlを移動することに決めました。 now.shで展開するための

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

私はにpackage.jsonでscriptsを変更しますので、

"start": "serve dist/ --single", 
"build": "ng build --prod", 

、最初、私はng buildをしました。

事は、私はAPIを展開しているため、私は、proxy.config.jsonに異なるtargetを必要としていると私は、私は二つのファイルproxy.config.dev.jsonとproxy.config.prod.jsonを持つに考えていた生産アプリ

でそれを使用したいが、私cliで別のプロキシをターゲットに設定できるかどうかわかりません。問題は私が生産のためにserveを使用していて、ng serveでないのでproxy-configが利用できないということです。

あなたはどう思いますか？どのように私はそれを働くことができますか？

Answer 1

ng serveは、プロキシファイルconfig（詳細はhttps://github.com/angular/angular-cli/wiki/serve）のパラメータを受け付ける角度cliを使用します。プロダクションで使用している 'serve'コマンドは、同じ機能セットをサポートしていない別のパッケージです（私はこれをhttps://www.npmjs.com/package/serveとします）。 プロキシ機能をサポートしているWebサーバーが必要です（nginxはここではhttp://nginx.org/en/docs/beginners_guide.html#proxyのように表示されています）。あるいは、 'serve'、 'http-server'、 'lite-server'などの一般的なhttpサーバーパッケージを補完するプロキシ機能のスタンドアロンソリューション'例えば一部のネットワーク機器も同様に役立ちます。あなた/他の誰かが角度アプリをホスティングするための他の良いオプションを見つけたら、もっと多くのオプションも評価したいと思っています。

Answer 2

これは、デフォルトではangular-cliという「環境」を使用するより良い解決策であることを認識しました。

したがって、両方の環境でbaseUrlを設定しました。{dev, prod}そして、ビルドは変わらないでしょう。次に、このenv変数を使用するようにサービスを変更する必要があります。

Answer 3

上記の説明のように角度のインターセプターと角度のcliの方法でbaseUrlを設定し、ヒントを与えるために投票しました。場合には、以下の、より多くの情報を探している誰かが、前方

`<pre> 
import { environment } from './../../environments/environment'; 
import { Injectable } from '@angular/core'; 
import { 
    HttpInterceptor, 
    HttpRequest, 
    HttpHeaders, 
    HttpHandler, 
    HttpEvent, 
    HttpEventType 
} from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/do'; 

@Injectable() 
export class WebApiBaseURLInterceptor implements HttpInterceptor { 

    className = "WebApiBaseURLInterceptor"; 

    constructor() { 
     // add more http options here like OAuth2 access token 
     const httpOptions = { 
      headers: new HttpHeaders({ 'Content-Type': 'application/json' }) 
     }; 
    } 

    /** 
    * 
    * @param {HttpRequest<any>} req 
    * @param {HttpHandler} next 
    * @returns {Observable<HttpEvent<any>>} 
    */ 
    intercept(req: HttpRequest<any>, next: HttpHandler): 
Observable<HttpEvent<any>> { 

//the baseURL set in environment folder which has both Dev and Prod 
     const url = environment.baseUrl; 
     req = req.clone({ 
      url: url + req.url 
     }); 
     // return next.handle(req); 

     // lets add elapse time difference 
     const started = Date.now(); 
     return next.handle(req).do(event => { 
      if (event.type == HttpEventType.Response) { 
       const elapsed = Date.now() - started; 
       console.log(`${this.className}: Request for ${req.urlWithParams} took ${elapsed} ms.`); 
      } 
     }); 
    } 
} 
</pre>` 

後に移動するのに役立ちますDevの環境フォルダとファイルはそう、現在の環境のファイルの内容は、ビルド時にこれらが上書きされます//、以下のように

を編集しています。

// environment.tsを使用しますが、あなたは

// ng build --env=prodをすれば、その後environment.prod.tsが代わりに使用されるのdevの環境へのビルドシステムのデフォルト。

//どのファイルにどのenvがマップされているかのリストは、.angular-cli.jsonにあります。

`<pre> 
export const environment = { 
    production: false, 
    baseUrl: 'http://localhost:8080/' 
}; 
</pre>`