将环境变量值从 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 容器。该容器不会构建任何东西。即使您正确传递参数,它也无法知道如何处理它。
你可能应该做的是:
- 根据示例创建一个 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。
我有一个 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 容器。该容器不会构建任何东西。即使您正确传递参数,它也无法知道如何处理它。
你可能应该做的是:
- 根据示例创建一个 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。