Question

我使用本教程进行了设置：https://codinglatte.com/posts/angular/using-os-environment-variables-in-angular-with-docker/ 将 docker 环境变量传递到 docker 容器中。

我为此使用了一个有角度的自定义 webpack。

但是，当我打开我的 docker 容器并打开应用程序时，似乎我的 docker 变量没有传递到 angular 容器中。

如何将 docker env 变量正确传递到我的 Angular 应用程序中？

这是我的 Angular 应用程序的 Dockerfile：

FROM node:12 AS compile-image

WORKDIR /opt/ng

COPY package.json ./

RUN npm install

COPY . ./

RUN node_modules/.bin/ng build --prod

FROM nginx

VOLUME [ "/usr/share/nginx/html/data" ]

WORKDIR /

COPY --from=compile-image /opt/ng/dist/YomiApp /usr/share/nginx/html

以及我用来打开应用程序的 Angular 容器和后端服务器的 docker-compose.yml：

version: "3"

services:
  webapp:
    image: nlanson/myAngularImage:latest
    environment:
      TZ: Australia/Sydney
      DATABASE_URI: "http://localhost:6969"
    volumes:
      - "./data:/usr/share/nginx/html/data" #Data is mounted to the directory where the Angular App is running.
    ports:
      - "8080:80"
    container_name: webapp
  server:
    image: nlanson/backendImage:latest
    environment:
      TZ: Australia/Sydney
    volumes:
      - "./data:/data"
    ports:
      - "6969:6969"
    container_name: server

这是我的 custom-webpack.config.js 文件，其中列出了我的环境变量：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      $ENV: {
        DATABASE_URI: JSON.stringify(process.env.DATABASE_URI),
      }
    })
  ]
};

以及使用环境变量的服务：

import { environment } from '../../environments/environment'

@Injectable({
    providedIn:root
})
export class DatabaseService {
    URI = environment.DATABASE_URI
}

也许是因为我的 Angular Image 的构建是多阶段的？？

谢谢

Answer 1

webapp 容器使用的环境变量需要在构建过程中传递给容器，而不是初始化。这些环境变量由 RUN node_modules/.bin/ng build --prod 使用。但是这些环境变量不是那个时候设置的，它们会在镜像构建完成后由 docker-compose 设置。您需要在 Dockerfile 中设置这些变量。

将环境变量传递到 Angular Docker 容器

1 个答案: