在Docker容器环境中特定配置Angular 2 Webpack App

Question

我们想在不同环境中使用Docker镜像部署我们的Angular 2应用程序(登台/测试,制作......)

在本地开发时,我们通过http:// localhost:8080连接到后端REST API,但是当我们在不同的环境中部署时,我们希望使用相同的Docker镜像并连接到不同的REST API端点.

什么将是首选的方式注入该配置成在运行时多克尔容器？

有没有办法通过环境变量来做到这一点？

我们可以通过包含类似内容的纯文本文件来完成此操作

{
    "BASE_URL": "https://api.test.example.com"
}

Answer 1

在这篇文章和Twitter上进行了一些讨论之后,看起来没有简单的方法可以通过Webpack实现我想要的东西.这些文件仅在运行时作为静态文件提供,并且无法在构建时排除文件并将其包含在运行时.

所以我决定采用我想到的解决方案/解决方法:在启动docker容器时更改静态文件.

我通过这样做来创建我的码头图像

npm run build:prod
docker build -t angularapp .

我使用官方的nginx docker镜像作为我的基本图像,Dockerfile看起来像

FROM nginx:1.11.1

COPY dist /usr/share/nginx/html
COPY run.sh /run.sh

CMD ["bash", "/run.sh"]

将run.sh用于通过修改配置文件sed和nginx的事后开始:

#!/bin/sh

/bin/sed -i "s|http://localhost:8080|${BASE_URL}|" /usr/share/nginx/html/api.config.chunk.js

nginx -g 'daemon off;'

这允许我BASE_URL在我的docker-compose.yml文件中配置via环境变量(简化):

version: '2'

services:
  api:
    image: restapi
  frontend:
    image: angularapp
    environment:
      BASE_URL: https://api.test.example.com

通过此解决方案/解决方法,我可以通过在启动docker容器时配置通过环境变量使用的REST API端点,将我的jenkins作业创建的docker镜像部署到所有环境(开发,登台,生产)中的特定版本部署.