azure - 服务器端环境变量在 Azure Web App 上的 nextjs 应用程序中不起作用

Question

我已经在 .env.local 中定义了环境变量，这对于本地开发非常有用。下一个 v13.2.4、React v18.2.0、Node v18 LTS。

在 Azure 上，我创建了一个包含相同键值对的变量组。我的理解是，这些变量应该在节点上下文中可用，即在我的 nextjs 应用程序的服务器端。但是，当我尝试访问 process.env.API_CLIENT_SECRET(例如)时，它始终是未定义的。

如果我将进程环境变量添加到 next.config.js 中的 env(见下文)，那么这些值将在我的应用程序(服务器端)中定义，但当然它们也可以在客户端上使用- 我不想要这样，因为我有 API 的客户端 ID 和 secret 值:

module.exports = {
  reactStrictMode: true,
  output: "standalone",
   env: {
     API_CLIENT_SECRET: process.env.API_CLIENT_SECRET,
   },
}

这似乎也是旧的(v9 之前)的做事方式。

我知道添加 NEXT_PUBLIC_ 前缀可以使您的环境变量在客户端可用。

我在这里遗漏了什么吗？如何仅在 Azure 上的 nextjs 中通过服务器端的 process.env 提供我的环境变量？

Answer 1

经过多次尝试和错误，我找到了一个有效的解决方案:

1. 在库中为 Azure 中的管道创建变量组，并定义 .env.local 文件中的所有变量
2. 确保管道可以访问变量组，并使变量在管道中可用:

variables:
  - group: EnvironmentVariables-Dev

向构建管道添加一个步骤，将变量组写入 .env.local 文件:

steps
  - script: |
      echo "JWT_SECRET=$(JWT_SECRET)" >> .env.local
      # add your own items here
    displayName: "Create .env.local"

(在 npm 安装和构建步骤之前执行此操作)

现在，部署的站点的行为就像本地站点一样，将所需的环境变量从 .env.local 文件读取到 process.env 中以在代码中使用，例如process.env.JWT_SECRET，并且只有前缀为 NEXT_PUBLIC_ 的变量在浏览器中可用，这正是所需要的。