在 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 启动容器时运行，以便它可以访问注入到由 docker-compose 生成的容器中的环境变量。

这可以通过两种方式实现：

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

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

或

1. 而不是 ng serve 运行 npm run start 作为 docker 命令。这将在您的package.json（默认为ng serve）中运行start 脚本，但将首先在“预启动”脚本中运行任何内容。所以编辑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"
  },

Answer 2

那么你的系统环境内容应该从哪里来？

您的 Angular 应用程序通过任何网络服务器发送给用户，没有 node.js 进程或其他可以为您提供服务器环境变量的东西。

将 Angular 中的 environment.ts 视为构建时间的单向标志集合。

在应用发布后进行更改的唯一方法是调用 api。

所以设置一种安全的方式来请求 GET /api/config 可能使用单向启动令牌或任何可能安全的方式。