使用 Docker 时无法读取 Gatsby 上的 env 文件答案

【问题标题】：Cannot read env file on Gatsby when using Docker使用 Docker 时无法读取 Gatsby 上的 env 文件
【发布时间】：2021-02-08 02:20:51
【问题描述】：

我在使用 Docker 时遇到了问题，基本上我创建了一个 .env 文件，供前端服务使用，如下所示：

  frontend:
    container_name: begreentannery_frontend
    build: 
      context: ./frontend/
      args: 
        API_URL: ${API_URL}
        MAILCHIMP_ENDPOINT: ${MAILCHIMP_ENDPOINT}
        FORM_KEY: ${FORM_KEY}
        GOOGLE_ANALYTICS_ID: ${GOOGLE_ANALYTICS_ID}
        GOOGLE_TAG_MANAGER_ID: ${GOOGLE_TAG_MANAGER_ID}
        FACEBOOK_PIXEL_ID: ${FACEBOOK_PIXEL_ID}
    ports:
      - '3001:80'
    depends_on:
      - backend

后端服务实际上是一个由 Gatsby 制作的网站。当我启动应用程序执行docker-compose up —build 时，我可以看到变量在gatsby-config 中正确传递，例如：

console.log("API_URL:",process.env.API_URL)

但如果我尝试在组件中读取相同的变量，我会得到undefined。

这怎么可能？为什么我可以读取gatsby-config.js 中的所有环境变量，但不能读取组件中的所有环境变量？

【问题讨论】：

标签： docker environment-variables gatsby

【解决方案1】：

这怎么可能？为什么我可以读取里面的所有环境变量 gatsby-config.js 但不在组件中？

因为有server-side environment variables 和client-side environment variables。第一个（服务器端）仅在 Node 服务器（gatsby-config.js、gatsby-node.js 等）中可用，而第二个（客户端）仅在浏览器（其余组件、页面和模板）中可用。

要使浏览器可以使用环境变量，您需要在其前面加上 GATSBY_ 前缀，正如文档指出的那样：

除了.env.* 中定义的这些项目环境变量文件，您还可以定义 OS Env Vars。操作系统环境变量是以 GATSBY_ 为前缀的将在浏览器 JavaScript 中可用。

【讨论】：

您好，感谢您的回复。所以我必须在docker args中调用变量GATSBY_API_URL？
没错。试一试。