在 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
....

如何设置backendUrl使用ENV_BACKEND_URIdocker -compose.prod.yml？我想要这样的东西：

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 映像中（使用 此处列出的适当的包安装程序方法）

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

这可以通过以下几种方式实现：

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

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

或者

2. 而不是作为 docker 命令ng serve运行。npm run start这将运行start您的脚本package.json（默认情况下是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"
  },

Answer 2

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

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

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

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

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