是的——即使 Angular 运行在客户端环境上,它仍会在部署所在的环境中运行构建步骤。
通常可以使用 envsubst
程序将环境变量注入文件中。因此,对于您上面提到的 environment.ts
文件:
export const environment = {
backendUrl: '${ENV_BACKEND_URI}',
};
如果我们将其命名为
src/environments/environment.template.ts
,则命令为:
envsubst < src/environments/environment.template.ts > src/environments/environment.ts
执行此命令将生成一个“environments.ts”文件,其中的${ENV_BACKEND_URI}将根据环境变量进行替换。
不要忘记在Dockerfile中安装它(使用这里列出的适当的软件包安装程序方法)。
此命令需要作为docker-compose up
启动容器时运行,以便它可以访问由docker-compose生成的容器注入的环境变量。
有几种实现方式:
- 将通常用于启动Angular的
ng serve
命令替换为Dockerfile
中的CMD
或docker-compose.yml
文件中的command
envsubst < src/environments/environment.template.ts > src/environments/environment.ts && ng serve
或
- 不要使用
ng serve
命令,而是使用npm run start
作为docker命令。这将运行您的package.json
中的start
脚本(默认情况下为ng serve
),但会首先运行任何在"prestart"脚本中定义的内容。因此请编辑package.json
文件如下:
"scripts": {
"ng": "ng",
"prestart": "envsubst < src/environments/environment.template.ts > src/environments/environment.ts",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},