NextJS 公共环境变量不适用于 Azure 应用服务

Question

我的 NextJS 应用程序中有一个 NEXT_PUBLIC 环境变量。它已在我的 .env.local 文件中设置并正常工作，但在将其部署到 Azure 应用服务后，应用程序无法读取它。它是'未定义'。我已在应用程序服务的配置下配置了它。

对可能出现的问题有什么建议吗？

提前致谢。

Answer 1

我遇到了同样的问题，Azure AppService 上的 NEXT_PUBLIC 环境变量始终具有“未定义”值，尽管它们在 AppService 设置中定义为环境变量。

构建 Docker 镜像时，NEXT_PUBLIC 环境变量在构建过程中直接设置，之后无法覆盖。这就是为什么 NEXT_PUBLIC 的 AppService 设置不起作用的原因。

Renato Pozzi (dev.to) 的以下解决方案帮助了我。

这是我的步骤：（下一个v.12.2.5）：

a) 在“构建”过程开始之前在 Dockerfile 中创建所需的 NEXT_PUBLIC 变量，并用“占位符值”填充它。

RUN NEXT_PUBLIC_API_URL=PLACEHOLDER_NEXT_PUBLIC_API_URL yarn build

b) 创建一个入口点文件 (entrypoint.sh)，当 Docker 映像启动时，该文件将占位符值替换为 AppService 中的真实环境变量。

在我的示例中，占位符“PLACEHOLDER_NEXT_PUBLIC_API_URL”被 AppService 配置（环境变量）中的实际值“NEXT_PUBLIC_API_URL”替换。

#!/bin/sh
test -n "$NEXT_PUBLIC_API_URL"
find /app/.next \( -type d -name .git -prune \) -o -type f -print0 | xargs -0 sed -i "s#PLACEHOLDER_NEXT_PUBLIC_API_URL#$NEXT_PUBLIC_API_URL#g"
exec "$@"

c) 使之前创建的入口点文件在 Dockerfile 中已知。

COPY --chown=nextjs:nodejs entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]
CMD ["node", "server.js"]

Answer 2

我也遇到了这个问题，保罗是对的。您需要在构建时设置变量。我正在运行 CICD github 操作进行部署，这解决了它：

      - name: Create .env.local file
        run: echo "NEXT_PUBLIC_MY_KEY=${{ secrets.NEXT_PUBLIC_MY_KEY }}" > .env.local

从 nextjs 文档来看，.env.local 中的环境变量将优先：

https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#default-environment-variables