angular - 在 Angular 应用程序中使用来自 docker-compose.yml 的环境变量

Question

我的 Angular 应用程序中有 enviroment.prod.ts 文件

export const environment = {
  backendUrl: '127.0.0.1:3000',
};

这是 docker-compose.prod.yml 的一部分:

....
environment:
      - ENV_BACKEND_URI=127.0.0.1:3000
....

如何使用 docker-compose.prod.yml 中的 ENV_BACKEND_URI 设置 backendUrl？ 我想要这样的东西:

export const environment = {
      backendUrl: '${ENV_BACKEND_URI}',
    };

这可能吗？

Answer 1

是的 - 这是可能的，即使 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 镜像中(使用列出的适当包安装程序方法 here )

此命令需要在 docker-compose up 启动容器时运行，以便它可以访问注入(inject)到由 docker-compose 生成的容器中的环境变量。

这可以通过几种方式实现:

1. 替换通常用于启动 Angular 的 ng serve 命令(作为 Dockerfile 中的 CMD，或 docker 中的 command -compose.yml dockerfile with

envsubst < src/environments/environment.template.ts > src/environments/environment.ts && ng serve

或

1. 代替 ng serve 运行 npm run start 作为 docker 命令。这将在您的 package.json 中运行 start 脚本(默认情况下是 ng serve)，但会在“预启动”中运行任何内容先写剧本。所以编辑 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"
  },