Angular Cli 設定不同打包 environment 設定

日期：

Summary

建立一個給 QA 測試用的 environment 設定檔。讓 REST API 的 target URL 可以根據 angular cli 的參數變更到不同的 URL。

Background

因為 Angular 預設只有一般非production的 environment.ts 與要build production的 environment.prod.ts 兩個檔案，但是公司這邊會需要再deploy到一個server給QA測試。不過由於開發環境的 Backend API Gateway 與前端是不同IP domain(API Gateway 有開 cross-domain 權限)，但是QA測試的 API Gateway 則是會與前端在同一個 IP domain 因此在不想與 Production的building 設定混亂下而外要多一個給QA的 building 設定檔。
簡單的說就是假設 QA的伺服器上的 backend IP 為 192.168.2.3 但是開發人員用的伺服器上的 backend IP為 192.168.12.9 然後希望 angular cli 在打包的時候可以透過參數自動更換 REST API 的 URL。

Solution

  1. 首先到專案下的 "environment" 資料夾下多建立一個檔案叫做 "environment.qa.ts"(我偷懶直接複製environment.prod.ts 做修改)。
  2. 在 environment.qa.ts 內的 environment JSON 物件多給一個屬性如下：
     export const environment = {
   production: false,
   API_URL: 'https://你的測試環境API Gateway IP/'
 }
  3. 為了執行 ng build 比較方便所以修改 "angular.json" 內的 build → configuration 這個 json 內容，我們在這邊可以看到 "production" 這個 json 內容，這是 angular cli 在打包production時會做的一些設定。因此我們可以在新增一個叫做 "qa" 的 key: value json 內容在要求 angular cli 在做打包 "QA" 環境的設定。然而我為了讓 QA的與Production的一致所以直接複製 Production 的設定到 "qa" 這個 json 物件內並且主要修改 "fileReplacements" 這段設定改成 "with": "src/environments/environment.qa.ts" 便可以達到我們要的環境設定。
    大致如下：
     "configurations": {
             "production": {
               "fileReplacements": [{
                 "replace": "src/environments/environment.ts",
                 "with": "src/environments/environment.prod.ts"
               }],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
               "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
               "budgets": [{
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "6kb",
                   "maximumError": "10kb"
                 }
               ]
             },
             "qa": {
               "fileReplacements": [{
                 "replace": "src/environments/environment.ts",
                 "with": "src/environments/environment.qa.ts"
               }],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
               "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
               "budgets": [{
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "6kb",
                   "maximumError": "10kb"
                 }
               ]
             }
  4. 之後要打包的時候或是要用 Jenkins 做 auto deploy的時候把 angular cli 的指令改成 "ng build --configuration="qa" " 就會把 environment.qa.ts 的 API_URL 值給有參照這個設定的檔案。
例如： 我的 REST API 的 url 會寫在一個叫做 "rest-api-url.ts" 內如下：


import { environment } from './../environments/environment'

var API_URL = environment.API_URL

/**
 * All rest api url address.
 */
export const apiURL = {
  login: {
    signInMethod: `${API_URL}/rsdbase/v1/signmethod`,
    signIn: `${API_URL}/rsdbase/v1/login`
  }, 
  ........ 
  ......
}
這樣每個 REST API 的開頭網址就會根據實際打包時候的 angular.json 裡面去替換 "environment.ts" 到我們指定的 " environment.qa.ts" 然後變更 API_URL的值到qa用的API_URL值。

Ref


留言

張貼留言