将环境变量值从 docker 文件传递​​到 Angular 应用程序

Pass environment variable value to Angular app from docker file

我有一个 Angular 应用程序,我试图从应用程序外部设置环境变量,即从 docker 撰写文件。

我指的是下面的文章

https://codinglatte.com/posts/angular/using-os-environment-variables-in-angular-with-docker/

docker-compose.yml

version: '3'
services:
  tomcat-server:
    image: "tomcat:latest"
    ports:
      - "8071:8080"
    environment:
      - API_URL=http://demo-production.com

当我执行下面的命令时,我什至可以看到设置的环境变量

docker exec -it <dockerName> sh

env

但不知何故 Angular 应用程序未收到该值,下面是我的 Angular 应用程序代码,根据上述文章

environment.prod.ts

export const environment = {
  production: true,
  API_URL: $ENV.API_URL,
  TEST_ENV: 'testing'
  // API_URL: 'http://production.com'
};

typings.d.ts

declare var $ENV: Env;

interface Env {
    API_URL: string
}

自定义-webpack.config.js

const webpack =  require('webpack');
module.exports = {
        plugins: [
            new webpack.DefinePlugin({
                $ENV: {
                    API_URL: JSON.stringify(process.env.API_URL)
                }
            })
        ]
};

我用来创建构建的命令

ng build --configuration=production --base-href=/demoapp/

我无法弄清楚这里的问题,因为 docker 文件中设置的环境值没有反映在我的应用程序中。

我可以得到一些帮助吗?

问题是您将构建时间与 运行 时间混淆了。 您需要的是在构建时传递的变量。您可以在构建命令中传递它们:

docker build -t my_image --build-arg API_URL=http://demo-production.com .

最后的.给出了context,在本例中是当前目录。它将期望在那里找到一个名为 Dockerfile 的 docker 文件。在您发布的 link 中,您在底部找到一个 docker 文件,您还可以在其中看到按预期定义的环境变量。 在该文件中,他们首先使用节点图像通过环境变量构建应用程序,然后在部署阶段将输出复制到 nginx 容器内的正确位置。

您在 docker-compose 文件中指定了一个 tomcat 容器。该容器不会构建任何东西。即使您正确传递参数,它也无法知道如何处理它。

你可能应该做的是:

  1. 根据示例创建一个 docker 文件,首先使用环境变量构建您的项目。
  2. 使用上述命令构建镜像。
  3. 运行 基于图像的容器:
docker run --name my-container-name -p "8071:8080" my-image

这是假设您在 docker 文件的第二阶段使用 tomcat,它使用您正在映射的端口 8080。 如果您想使用 docker 组合,它可能看起来像:

version: '3'
services:
  tomcat-server:
    build:
      context: .
      args:
        API_URL=http://demo-production.com 
    ports:
      - "8071:8080"

这会为您调用 docker 构建和 运行 命令,因此您显然仍然需要 docker 文件。

如果您有兴趣在 运行 时间内将环境变量传递给 angular,那就另当别论了。如果需要,您可以在我写的博客中阅读 here