當我們完成程序的開發後,緊接著就會依照不同的目的將程序部署到各個環境(Development, Staging, Production ...等環境),以利後續任務的進行,諸如測試人員功能驗證或是用戶UAT,或是產品上綫等。
.NET提供了appsettings.[env].json的方式讓開發人員可以簡單的配置各個環境的設定,如:
- appsettings.Development.json 提供開發環境設定配置(慣例)
- appsettings.Staging.json 提供Staging環境設定配置(慣例)
- appsettings.Production.json 提供生產環境設定配置(慣例)
- appsettings.XXX.json 提供自定義環境設定配置
至於Angular呢?
所幸Angular也提供了類似的方式,environment.[env].ts,開發人員一樣可以輕鬆配置各個環境的設定,如:
- environment.ts 提供開發環境設定配置(慣例)
- environment.staging.ts 提供Staging環境設定配置(慣例)
- environment.prod.ts 提供生產環境設定配置(慣例)
- environment.XXX.ts 提供自定義環境設定配置
建立專案預設情況下只會有environment.ts與environment.prod.ts這2個文件,其他環境需要自行複製貼上修改,範例中我們新增了environment.staging.ts這個文件:
接著我們打開angular.json這個文件,找到architect/build/configurations這個節點,在這個節點下新增對應的環境(staging):
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "2.5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"staging": {
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "2.5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
}
注意到fileReplacements的with就是要替換的來源文件,也就是前面我們提到的新增的配置文件。
最後,在build Angular的時候,指定--configuration即可:
ng build --configuration=staging
留言
張貼留言