在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}',
    };

这是可能的吗？

- ligowsky

---

你尝试过从 process.env.ENV_BACKEND_URI 访问 ENV_BACKEND_URI 吗？ - Fernando Zamperin

是的，构建失败并显示“找不到名称'process'”。 - ligowsky

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

有几种实现方式：

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

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

或

2. 不要使用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"
  },

- SamBob

Answer 2

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

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

将Angular中的environment.ts视为一次性的构建时间标志集合。

在应用程序发货后更改事物的唯一方法是进行API调用。

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

- JohnnyDevNull

---

我的应用程序是在Docker容器内构建的。据我所知，我可以在docker-compose.prod.yml文件中设置环境变量，然后我想将这些变量传递到运行ng build命令的dockerfile中。 - ligowsky

这一切都很好，但是你的Angular应用程序只是被部署而不会在服务器上执行，因此你无法访问系统环境变量。该应用程序在客户端的浏览器上执行。 - JohnnyDevNull

在构建时，这些变量的值不是保存在代码包中吗？ - ligowsky

有没有一种方法可以在docker.compose.yml中设置一个变量，然后在构建应用程序时将其传递给js捆绑包？ - ligowsky

也许可以通过这种方式实现：https://medium.com/@natchiketa/angular-cli-and-os-environment-variables-4cfa3b849659 但不要直接复制。 - JohnnyDevNull