客户端环境变量未定义 - NextJS + Docker

Question

我的应用程序在VPS上运行，使用Docker Compose。我在文件目录中有一个.env文件，与docker-compose.yml在同一级别。

在我的docker-compose中，我设置环境变量如下：

当我在本地运行应用程序时，一切都正常，但是在部署的应用程序中出现了问题：

我只能在服务器端的getServerSideProps函数中访问变量。然而，在客户端上（我试图访问以NEXT_PUBLIC_开头的变量），我得到了未定义的结果。

我的解决方法是将我需要的环境变量的值从getServerSideProps传递给我的页面作为props，但这非常不方便，肯定不是正确的解决方案。

您知道是什么原因导致了这个问题吗？

此外，在VPS上，当我检查NextJS应用程序的容器（docker exec -it ...）时，我键入“env”，我看到环境变量都在那里，所以我不明白为什么它们没有被客户端接收。

- Jonathan

Answer 1

根据文档所述，如果您的环境变量具有前缀“NEXT_PUBLIC_”，则可以在客户端上看到它，但是如果没有这种情况，例如在没有使用docker构建并使用“npm start”测试构建文件后，问题存在，可能是由于命令使用的环境错误，如果不是，则必须是docker方面的问题！顺便说一下，您也可以使用env-cmd库。

- shahrooz bazrafshan

Answer 2

根据文档所述：

该值将由于NEXT_PUBLIC_前缀而内联到发送到浏览器的JavaScript中。此内联在构建时发生，因此需要在项目构建时设置各种NEXT_PUBLIC_ envs。

您在docker compose中设置的环境变量在构建时不可用，仅可在运行时使用。

- Garuno

---

谢谢，我明白了。问题有点傻，但我如何在构建时设置它们？ 使用位于NextJS目录根目录的.env文件吗？ 如果是这样，我应该将其添加到.dockerignore文件中吗？ - Jonathan

.env文件可以正常工作。你不一定需要将它添加到.dockerignore中，但如果你想的话可以这样做。 - Garuno

我创建了一个 .env 文件，但是当我在客户端使用 console.log 输出变量时仍然得到未定义（undefined）的结果。 - Jonathan