NextJS部署至Azure Container App后无法读取环境变量求助

1. 确认Azure Container App的环境变量配置位置 #

• 确保环境变量添加在Azure Portal中Container App的**「应用设置」**下，而非仅在「容器设置」的环境变量列表中（多容器部署场景需注意区分）。
• 对于带NEXT_PUBLIC_前缀的变量：若需在客户端代码中使用，需保证构建时变量已注入；若在服务端逻辑（如API路由、getServerSideProps）中使用，要确认运行时环境能读取到变量。

2. 规范Dockerfile的变量传递逻辑 #

• 区分构建时与运行时变量：
  • 构建时变量：通过ARG声明后用ENV绑定，确保构建过程中Next.js能注入客户端代码，示例：

    ARG NEXT_PUBLIC_API_ENDPOINT
    ENV NEXT_PUBLIC_API_ENDPOINT=$NEXT_PUBLIC_API_ENDPOINT
    RUN npm run build
    

    需在Azure Container App的构建配置中传入对应ARG值，或镜像构建阶段提前传入。
  • 运行时变量：无需构建时注入的变量，直接在Dockerfile的CMD/ENTRYPOINT前用ENV声明，或在Azure应用设置中添加，保证容器启动时能读取。

3. 验证Next.js代码中的变量读取方式 #

• 客户端组件中直接使用process.env.NEXT_PUBLIC_XXX，避免拼写错误或动态拼接变量名的写法。
• 服务端代码（API路由、服务端渲染逻辑）中，无论变量是否带NEXT_PUBLIC_前缀，都要确认运行时环境存在该变量，示例：

  // API路由示例
  export default function handler(req, res) {
    const privateKey = process.env.API_PRIVATE_KEY; // 仅服务端可用，无需NEXT_PUBLIC前缀
    const publicUrl = process.env.NEXT_PUBLIC_API_URL; // 客户端、服务端均可用
    res.status(200).json({ privateKey, publicUrl });
  }
  

• 可在应用中添加测试页面/接口，打印process.env相关变量，部署后访问验证是否能正确获取。

4. 检查启动命令是否正确 #

• 确保启动命令为next start（Next.js 13+ App Router场景）或npm start，避免使用node server.js这类可能跳过环境变量加载的命令。

5. 清除缓存重新部署 #

• 若存在部署缓存残留，尝试删除现有容器实例后重新构建镜像部署，或在Azure Portal中重启Container App，确保新环境变量生效。

内容的提问来源于stack exchange，提问作者LuxuryFi