0

我有一个 Angular 应用程序，我试图从应用程序外部（即从 docker compose 文件）设置环境变量。

我指的是下面的文章

https://codinglatte.com/posts/angular/using-os-environment-variables-in-angular-with-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 应用程序代码，根据上面的文章

环境.prod.ts

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

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

我可以在这里得到一些帮助吗？

4

1 回答 1

1

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

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

最后.给出context, 在这种情况下是当前目录。它将期望找到一个在那里命名的 dockerfile Dockerfile。在您发布的链接中，您在底部找到了一个 dockerfile，您还可以看到按预期定义的环境变量。在该文件中，他们首先使用节点映像使用您的环境变量构建应用程序，然后在部署阶段将输出复制到 nginx 容器内的正确位置。

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

你可能应该做的是：

  1. 根据示例制作一个 dockerfile 以首先使用 env 变量构建您的项目。
  2. 使用上述命令构建映像。
  3. 运行基于图像的容器：
docker run --name my-container-name -p "8071:8080" my-image

这是假设在 dockerfile 的第二阶段您使用的是 tomcat，它使用您正在映射的端口 8080。如果您想使用 docker compose，它可能如下所示：

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

然后这将为您调用 docker build 和 run 命令，因此您显然仍然需要 dockerfile。

如果您有兴趣在运行时将环境变量传递给 Angular，那就另当别论了。如果你愿意，你可以在我写的博客中阅读它。

于 2022-02-13T19:33:32.587 回答