azure - Next.js 中的公共(public)环境变量在 Azure 静态 Web 应用程序中不起作用

Question

我的应用程序之前部署在 Vercel 上，但由于我在 Azure 上使用 Azure AD 和 MongoDB，因此我也将应用程序的托管迁移到 Azure，以减少网络延迟。

我在生产环境中的“配置”->“应用程序设置”下设置了所有环境变量。私有(private)变量(例如客户端 secret )可以被我的 Next.js 后端完全读取，但我的前端无法读取以 NEXT_PUBLIC 为前缀的环境变量，即使这之前在 Vercel 和 Google Cloud Platform 上的其他项目中也有效。

将公共(public)环境变量 (NEXT_PUBLIC_*) 打印到控制台会返回 undefined。

如何区分全栈环境变量和服务器端环境变量？因为 NEXT_PUBLIC 似乎不起作用。

Answer 1

我找到了解决方法。在 build_and_deploy_job -> steps 下，添加一个名为 env 的字段。在此之下，您可以像这样放置环境变量:

env:
  NEXT_PUBLIC_VARIABLE: "value1"
  NEXT_PUBLIC_ANOTHER_VARIABLE: "value2"

您可以找到我的完整 .yml 文件 here .

我想表达这样一个事实:这是一个次优的解决方案，对于 Microsoft 这样一家值(value)数十亿美元的公司来说，您应该能够通过 Azure Web 将公共(public)/客户端环境变量直接放置在您的静态 Web 应用程序中门户网站。