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

Question

我有一个 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 文件中设置的环境值没有反映在我的应用程序中。

我可以得到一些帮助吗？

Answer 1

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

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

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

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

你可能应该做的是：

根据示例创建一个 docker 文件，首先使用环境变量构建您的项目。
使用上述命令构建镜像。
运行基于图像的容器：

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。

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

Pass environment variable value to Angular app from docker file

angular

docker-compose

environment-variables

angularbuild

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

Pass environment variable value to Angular app from docker file

angular

docker-compose

environment-variables

angularbuild

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