如何在 React 的 Docker-Compose 中配置 .env 文件？答案

【问题标题】：How to configure .env file in Docker-Compose in React?如何在 React 的 Docker-Compose 中配置 .env 文件？
【发布时间】：2021-02-10 15:30:41
【问题描述】：

我在 docker ignore 中添加了.env，并且在构建映像后环境变量未定义，那么如何在docker-compose.yml 文件中配置这些环境变量

我们是否也应该将docker-compose.yml 放在忽略中？

docker-compose.yml

version: '3'
services: 
    client:
        build: 
            context: .
            dockerfile: Dockerfile.dev
        command: npm start
        container_name: testReact
        ports:
            - "3000:3000"        
        volumes: 
            - ./:/app
            - /app/node_modules

.env

REACT_APP_CONSTANT = 'MY REACT APP'

.dockerignore

/node_modules
/build
.git
*.md
.gitignore
.env

【问题讨论】：

标签： reactjs docker docker-compose environment-variables dockerignore

【解决方案1】：

您可以在 docker-compose.yml 中通过添加 'environment' 键来设置环境变量，如下所示：

version: '3'
services: 
    client:
        build: 
            context: .
            dockerfile: Dockerfile.dev
        command: npm start
        container_name: testReact
        ports:
            - "3000:3000"        
        volumes: 
            - ./:/app
            - /app/node_modules
        environment:
            - REACT_APP_CONSTANT=MY-REACT-APP

但如果是机密，最好不要推送到 git。您可以像往常一样简单地使用您的 .env 文件，而不是将其放入 .dockerignore 或其他首选方式，即使用 Docker 机密。这是一个关于它的文档https://docs.docker.com/engine/swarm/secrets/

【讨论】：

docker-compose 格式错误，环境小节中的条目不应在= 周围有空格。它应该是REACT_APP_CONSTANT=MY REACT APP。
如果环境有秘密我应该把 docker-compose.yml 放在 .dockerignore 吗？
不，没有意义。 .dockerignore 文件用于告诉 docker 在执行COPY . /www 之类的操作时要省略哪些文件。您真正需要的是避免将秘密推送到 git，通常 .env 文件无论如何都在 .gitignore 中，但您应该仔细检查。

【解决方案2】：

这里的问题是您使用.env 文件而没有在 docker-compose.yml 中声明变量。

.env 是特殊的，如果没有在 env_file 小节中声明，它用于替换 docker-compose.yml 中的变量（查看documentation 了解更多信息）。

解决方案是添加和environment 小节。例如

version: '3'
services: 
    client:
        build: 
            context: .
            dockerfile: Dockerfile.dev
        command: npm start
        container_name: testReact
        ports:
            - "3000:3000"        
        volumes: 
            - ./:/app
            - /app/node_modules
        environment:
            - REACT_APP_CONSTANT

注意：您也可以在environment 小节中使用对象表示法。这有助于定义默认值。例如：

        environment:
            REACT_APP_CONSTANT: ${REACT_APP_CONSTANT:-'another default'}

编辑：顺便说一句，从.env 文件中删除空格。

【讨论】：