在特定于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容器时更改静态文件。

我通过做来创建我的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映像部署到我所有环境（开发，登台，生产）中部署的特定版本。