Angular CLI - 爲現在部署而設置生產代理

我目前使用now.sh來部署我的應用。最近，我決定將baseUrl的請求移至proxy.config.json文件。Angular CLI - 爲現在部署而設置生產代理

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

對於now.sh部署我改變scripts在package.json到：

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

所以，首先，我做了ng build。

的事情是，我需要爲proxy.config.json不同target，因爲我部署一個API，我想在生產應用程序使用它

我想在具有兩個文件proxy.config.dev.json和proxy.config.prod.json，但我不知道我是否可以使用cli來定位不同的代理。問題是我正在使用serve進行生產，而不是ng serve，因此proxy-config不可用。

你有什麼建議？我怎樣才能工作呢？

來源

2017-08-26 FacundoGFlores

ng服務使用接受代理文件配置參數的角度cli（詳情在這裏：https://github.com/angular/angular-cli/wiki/serve）。您在製作中使用的'serve'命令是另一個包（我假設這個包含一個https://www.npmjs.com/package/serve），它不支持相同的功能集。您需要一個支持代理服務器的web服務器（例如，nginx看起來像這裏詳述的http://nginx.org/en/docs/beginners_guide.html#proxy），或者是一個代理功能的獨立解決方案，補充了'serve'，'http-server'，'lite-server '例如一些網絡設備也可以提供幫助。如果您/其他人發現其他好的選擇來託管角色應用程序W /代理請分享，因爲我正在尋求評估更多的選擇。

來源

2017-08-28 02:39:32 sarora

我意識到這是一個更好的解決方案，使用默認情況下與angular-cli一起使用的「環境」。

所以我在兩個環境{dev, prod}中設置了baseUrl。然後構建不會改變。然後你必須修改你的服務來使用這個env變量。

來源

2017-08-28 14:24:50 FacundoGFlores

我收集你用ng服務來提供你的prod環境？從我讀過的內容來看，這對生產來說並不理想（我不會在這裏重申原因）。大多數情況下，你應該運行ng build --prod，然後拿出靜態資產並在生產中服務它們（這樣你就可以實現縮小/ uglification/AOT優化等）。如果您需要了解上述關於探索具有代理功能的工具的任何這些好處，請參閱我的回答。 http-server有一個簡單的代理，可以滿足一些。我現在嘗試nginx，因爲它具有更多的代理功能。 – sarora

看到我下面的回覆，讓我知道這是否工作 –

使用Angular Interceptor和Angular 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>`

以下是開發環境，文件夾，如下文件，編輯，編譯過程中

//當前環境中的文件內容將覆蓋這些。

//生成系統默認爲它使用environment.ts的開發環境，但如果你

// ng build --env=prod然後environment.prod.ts將被用來代替。

//在.angular-cli.json中可找到哪個文件的列表。

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

來源

2017-11-25 21:53:31

Angular CLI - 爲現在部署而設置生產代理

回答

相關問題