在Cloud Run上运行Next.js时如何获取环境变量

一、Next.js服务端读取环境变量的正确姿势 #

Cloud Run配置的环境变量属于运行时变量，Next.js服务端代码可以直接通过process.env.VAR_NAME读取，不需要额外配置，以下是几种常见场景的写法：

• API路由中读取（pages/api/目录下的文件）：

// pages/api/get-config.js
export default function handler(req, res) {
  // 直接读取Cloud Run配置的环境变量
  const apiSecret = process.env.CLOUD_RUN_API_SECRET;
  res.status(200).json({ secret: apiSecret });
}

• 服务端渲染函数中读取（比如getServerSideProps）：

// pages/dashboard.js
export async function getServerSideProps() {
  const backendUrl = process.env.BACKEND_SERVICE_URL;
  // 这里可以用变量调用后端接口
  const data = await fetch(`${backendUrl}/api/data`);
  return {
    props: { data: await data.json() }
  };
}

• Next.js 13+ App Router服务端组件中读取：

// app/settings/page.js
export default async function SettingsPage() {
  const dbConnection = process.env.DB_CONNECTION_STRING;
  return <div>当前数据库连接串：{dbConnection}</div>;
}

二、Cloud Run环境变量配置的关键注意点 #

1. 正确配置变量：

   • 控制台操作：打开Cloud Run服务详情页，进入「变量与秘密」标签，添加你需要的环境变量
   • 命令行操作：用gcloud命令快速更新：

   gcloud run services update 你的服务名 --set-env-vars CLOUD_RUN_API_SECRET=xxx,BACKEND_SERVICE_URL=https://your-backend.com
   

2. 区分构建时和运行时变量：

   • 别在next build阶段让Next.js把变量硬编码到静态文件里，服务端代码是在Cloud Run运行时执行的，直接读process.env就能拿到实时配置的变量
   • 如果给变量加了NEXT_PUBLIC_前缀，这个变量会被暴露给客户端，服务端用的变量没必要加这个前缀，避免敏感信息泄露

三、排查读不到变量的常见问题 #

• 检查变量名大小写：Cloud Run的环境变量名是大小写敏感的，MY_VAR和my_var是两个不同变量，别写错
• 重启/更新服务：修改环境变量后，必须重启Cloud Run服务或者用gcloud run services update触发部署，新变量才会生效
• 查看Cloud Run日志：可以在服务端代码里临时打印console.log(process.env)（注意别泄露敏感信息），然后去Cloud Run日志里看变量是否存在
• 确认代码运行在服务端：如果是客户端组件（比如用'use client'标记的组件），只能读取NEXT_PUBLIC_前缀的变量，服务端变量在客户端是拿不到的

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