angular - 在图像上使用服务器环境变量

Question

我有一个用 angular4 编写的应用程序， 我在生产和沙箱上运行，

我创建一个镜像，然后部署到 kubernetes 上

我有一些不同于沙箱和生产的环境变量，目前我构建了两个不同的图像，一个用于沙箱，一个用于 制作:

src/envirnments 下的环境:

environment.prod.ts

export const environment = {
  production: true,
  server_url: 'https://api.example.com/app/',
};

environment.sandbox.ts

export const environment = {
  production: false,
  server_url: 'https://api-sandbox.example.com/app/',
};

建筑形象:

生产:ng build --prod

沙盒: ng build--prod --env=sandbox

现在，我该如何使用外部环境变量呢？ 像 applicatoion.getEnvirnment('server_url') 这样的东西，我不需要为每个环境创建一个图像吗？

这是我的deployment.yaml:

apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: angular-web-app
  namespace: production
spec:
  replicas: 1
  revisionHistoryLimit: 1
  strategy:
      type: RollingUpdate
  template:
    metadata:
      labels:
        app: angular-web-app
    spec:
      containers:
      - name: angular-web-app
        image: us.gcr.io/my-com/angular-web-app:06.01.2018
        ports:
        - containerPort: 80
        env:
        - name: SERVER_URL
          value: https://api.example.com

这是我的 dockerfile:

FROM nginx
COPY dist /usr/share/nginx/html
EXPOSE 80
EXPOSE 443

构建图像:

ng build --prod --env=sandbox
docker build --rm -t ${REGISTRY}/${CONTAINER}:${TAG} .

我将环境变量添加到部署中，我希望应用程序从那里获取值

Answer 1

或者您可以从本地配置 json 读取，然后使用卷， 为你们每个环境都有单独的配置映射see

在 src/assets/config 下放置配置 json，

在您的代码中，从配置文件中读取 url:

private getConfigJSONFile() {
     return this.http.get("/assets/config/env-vars.json").map((res:any) => res.json())
   }

现在在 kubernetes 上创建配置:

这是配置文件:

configs/env-variables.json

{
  "api_server_url": "https://api.example.com"
}

创建配置

kubectl create configmap angular-env-vars --from-file=env-vars.json=configs/env-variables.json

在您的部署中使用卷:

apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: angular-web-app
spec:
  replicas: 1
  revisionHistoryLimit: 1
  strategy:
      type: RollingUpdate
  template:
    metadata:
      labels:
        app: angular-web-app
    spec:
      containers:
      - name: angular-web-app
        image: us.gcr.io/my-com/angular-web-app:06.01.2018
        volumeMounts:
        - name: env-vars
          mountPath: /usr/share/nginx/html/assets/config
        ports:
        - containerPort: 80
      volumes:
      - name: env-vars
        configMap:
          name: angular-env-vars