第 30 型 - 环境配置与建构 (Build)

实务上，因应不同的开发阶段，应用程序会运行在开发环境 (Develop Environment)、预备环境 (Staging Environment) 以及正式环境 (Production Environment) 等不同环境内，因此会利用 environments 目录下的环境设定档，来定义在不同环境下应用程序内部逻辑所需要的资讯。

利用环境变数档定义後端服务位址

在 Angular 应用程序中，会将环境变数定义在 environments 目录之内，并依环境建立各自的设定档。因此，可以在 environment.ts 中定义後端服务的 API 位址，以在未来的建构时依环境变更其值。

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

要在程序中使用环境变数，只要将 environment.ts 汇入即可；因此，可以修改 task-remote.service.ts 档案的後端服务路径。

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

export class TaskRemoteService {
  private _url = `${environment.api}/tasks`;
}

顺带一提，在程序中所汇入的路径，会依照其相对位置而有所不同；此时，可以利用 tsconfig.json 内的定义来统一管理。因此可以在 tsconfig.json 中加入环境变数档案的路径定义，让所有使用环境变数的程序可以从 @environment 汇入。

{
  "compilerOptions": {
	...
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@environment": ["./src/environments/environment"]
    }
  }
}

import { environment } from '@environment';

export class TaskRemoteService {
  private _url = `${environment.api}/tasks`;
}

新增预备环境 (Staging Environment) 定义

预设中，利用 Angular CLI 所建立的专案，会包含生产环境 (Production Environment) 的变数定义。当使用 build、serve 与 test 等 Angular CLI 指令时，皆可透过 --configuration 参数的指定来使用不同的环境变数档案。

若要针对预备环境 (Staging Environment) 设定环境变数，可以先将 environment.ts 复制一份，并将其命名为 environment.staging.ts；接着，在 angular.json 的 configurations 属性下加入 staging 设定，透过 fileReplacements 属性可以定义环境变数档案的替换。

"configurations": {
  "production": { },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.stage.ts"
      }
    ]
  }
}

如此一来就可以执行 ng build --configuration=staging 来建构预备环境的应用程序封装档。若要进一步也在 ng serve 中使用此设定，就需要在 angular.json 中的 serve 属性加入 staging 定义。

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "todo:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "todo:build:production"
    },
    "staging": {
      "browserTarget": "todo:build:staging"
    }
  }
}

利用 ng build 建构 Angular 应用程序

最後，开发完应用程序後，可以执行 ng build --prod 来建构 Angular 应用程序的封装档，其中 --prod 参数与指定 --configuration=production 相同。而所建构出来的档案预设会放在 dist/todo 目录内，只是将此目录的档案复制到服务器内即可；顺带一提，若要变更 build 所输出的目录，可以修改 angular.json 中 build 属性下的 outputPath。

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/todo",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true,
    "assets": ["src/favicon.ico", "src/assets"],
    "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.css"],
    "scripts": []
  },

结论

Angular 框架在每个开发阶段都提供了不少好用的工具，只要擅加利用并搭配 CI 等工具，能简化所需要的常务作业，更能聚焦在功能需求的实作。