docker - 如何将环境变量从docker-compose传递到项目？

Question

我正在将AWS ECS存储库用于Docker镜像。

我的docker-compose.yml文件如下所示:

version: "3"
services:
  my-front-end:
    image: myFrontEndImage:myTag
    links:
      - my-back-end
    ports:
      - "8080:8080"
    logging:
      driver: 'json-file'
      options:
        max-size: "50m"
  my-back-end:
    image: myBackEndImage:myTag
    ports:
      - "3000:3000"
    logging:
      driver: 'json-file'
      options:
        max-size: "50m"

我需要的是能够将docker-compose文件中的环境变量传递到我的docker镜像中。

我试图在环境中添加行(在example之后)。

version: "3"
services:
  my-front-end:
    image: myFrontEndImage:myTag
    links:
      - my-back-end
    environment:
      - BACKEND_SERVER_PORT=3001
    ports:
      - "8080:8080"
    logging:
      driver: 'json-file'
      options:
        max-size: "50m"
  my-back-end:
    image: myBackEndImage:myTag
    ports:
      - "3000:3000"
    logging:
      driver: 'json-file'
      options:
        max-size: "50m"

然后在我的项目(这是一个VueJS项目)中，我尝试通过process.env.BACKEND_SERVER_PORT访问它。但是我看不到我的值，当我尝试console.log(process.env);时，我看到它只有值{NODE_ENV: "development"}。

所以我的问题是，如何将env变量从docker-compose传递到我的docker镜像，以便可以在项目中使用它？

项目中的所有内容都可以正常运行，我在该项目上工作了很长时间，而docker-compose文件也可以正常工作，只是，现在当我需要添加此环境变量时，我无法使其正常工作。

编辑:根据注释中的每个请求添加几个文件。
.Dockerfile的my-front-end看起来像:

FROM node:8.11.1
WORKDIR /app
COPY package*.json ./
RUN npm i npm@latest -g && \
    npm install
COPY . .
CMD ["npm", "start"]

如前所述，这是一个VueJS应用程序，这是package.json的一部分，您可能对此感兴趣:

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
},

虽然.Dockerfile的my-back-end看起来像:

FROM node:8.11.1
WORKDIR /app/server
COPY package*.json ./
RUN npm i npm@latest -g && \
    npm install
COPY . .
CMD ["npm", "start"]

我的后端实际上是一个express.js应用程序，它正在单独的端口上侦听，并且该应用程序放置在项目根目录下的server文件夹中。
这是package.json的一部分，您可能对此感兴趣:

"scripts": {
  "start": "nodemon src/app.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

Answer 1

我认为您在配置docker-compose方面所做的一切正确。在将环境变量传递给VueJS应用程序时似乎有些细微差别。

根据this question的答案，您需要使用VUE_APP_*命名变量，以便能够从客户端获取它们