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

Question

我们希望使用 Docker 镜像 在不同的环境(暂存/测试、生产...)中部署我们的 Angular 2 应用

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

在运行时注入(inject)此配置到Docker容器的首选方法是什么？

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

我们可以通过包含类似内容的纯文本文件来做到这一点

{
    "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;'

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

version: '2'

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

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