Nuxt3：Docker构建后如何通过process.env设置运行时环境变量

我的Nuxt3应用通过docker-compose结合环境变量在本地构建运行时一切正常，但将构建好的Docker镜像推送到远程生产环境后，无法在runtimeConfig中应用生产环境变量。推测是process.env["SECRET_KEY"]在构建阶段被替换为本地值。使用NUXT_PUBLIC_XXXX/NUXT_XXXX命名的环境变量可在构建后更新runtimeConfig，但由于我使用PaaS服务部署生产环境，无法控制变量命名，导致始终使用本地构建时的clientId等值。

请问是否有方法在镜像构建后通过自定义命名的process.env设置runtimeConfig？或其他动态提供runtimeConfig的方案？我希望避免为每个环境单独构建容器。

附nuxt.config.ts代码示例：

// nuxt.config.ts
...
runtimeConfig: {
  // 生产环境下环境变量通过"VCAP_SERVICES"获取，不存在则使用本地开发环境变量
  clientId: process.env["VCAP_SERVICES"] ? process.env["VCAP_SERVICES"]["clientId"] : process.env["UAA_CLIENT_ID"],
  secretKey: process.env["NUXT_SECRET_KEY"],

  public: {
    backendApi: 'http://127.0.0.1:5000',  // 会被NUXT_PUBLIC_BACKEND_API环境变量覆盖
    environment: "production", // 会被NUXT_PUBLIC_ENVIRONMENT环境变量覆盖
  }
},

解决方案 #

1. 服务器端插件动态注入runtimeConfig（推荐） #

通过服务器端插件在应用启动时读取自定义命名的环境变量，再注入到runtimeConfig中，彻底避免构建阶段的静态替换问题。

操作步骤：

• 在项目中创建server/plugins/runtime-config.ts文件：

export default defineNitroPlugin((nitroApp) => {
  // 解析VCAP_SERVICES（如果存在）
  const vcapServices = process.env.VCAP_SERVICES ? JSON.parse(process.env.VCAP_SERVICES) : null;
  // 动态获取clientId和secretKey
  const clientId = vcapServices?.clientId || process.env.UAA_CLIENT_ID;
  const secretKey = process.env.SECRET_KEY || process.env.NUXT_SECRET_KEY;

  // 更新runtimeConfig
  nitroApp.runtimeConfig.clientId = clientId;
  nitroApp.runtimeConfig.secretKey = secretKey;
});

• 修改nuxt.config.ts，将原有的硬编码值改为空默认值，交由插件动态设置：

// nuxt.config.ts
runtimeConfig: {
  clientId: '', // 由服务器插件在运行时赋值
  secretKey: '', // 由服务器插件在运行时赋值
  public: {
    backendApi: 'http://127.0.0.1:5000',
    environment: "production",
  }
},

容器启动时，插件会读取当前环境的VCAP_SERVICES或UAA_CLIENT_ID，完全不受构建阶段本地变量的影响。

2. Docker入口脚本映射环境变量 #

如果无法修改Nuxt代码，可通过Docker入口脚本将自定义环境变量映射为Nuxt识别的NUXT_前缀变量，再启动应用。

操作步骤：

• 创建entrypoint.sh脚本：

#!/bin/sh

# 映射VCAP_SERVICES中的clientId到NUXT_CLIENT_ID
if [ -n "$VCAP_SERVICES" ]; then
  CLIENT_ID=$(echo "$VCAP_SERVICES" | jq -r '.clientId')
  export NUXT_CLIENT_ID="$CLIENT_ID"
fi
# 映射UAA_CLIENT_ID到NUXT_CLIENT_ID（备用）
if [ -n "$UAA_CLIENT_ID" ]; then
  export NUXT_CLIENT_ID="$UAA_CLIENT_ID"
fi
# 映射SECRET_KEY到NUXT_SECRET_KEY
if [ -n "$SECRET_KEY" ]; then
  export NUXT_SECRET_KEY="$SECRET_KEY"
fi

# 启动Nuxt应用
node .output/server/index.mjs

• 修改Dockerfile，将脚本设置为入口：

FROM node:18-alpine
WORKDIR /app
COPY .output .output
COPY entrypoint.sh .
RUN chmod +x entrypoint.sh
ENTRYPOINT ["./entrypoint.sh"]

容器启动时，脚本会自动完成变量映射，Nuxt的runtimeConfig就能正确读取生产环境变量。

3. 用Getter函数动态读取环境变量 #

在nuxt.config.ts中使用Getter函数定义runtimeConfig值，确保变量在服务器端运行时才被读取，避免构建阶段被静态替换。

操作步骤：

修改nuxt.config.ts的runtimeConfig部分：

// nuxt.config.ts
runtimeConfig: {
  get clientId() {
    const vcapServices = process.env.VCAP_SERVICES ? JSON.parse(process.env.VCAP_SERVICES) : null;
    return vcapServices?.clientId || process.env.UAA_CLIENT_ID;
  },
  get secretKey() {
    return process.env.SECRET_KEY || process.env.NUXT_SECRET_KEY;
  },
  public: {
    backendApi: 'http://127.0.0.1:5000',
    environment: "production",
  }
},

注意：这种方式仅对服务器端生效，客户端无法访问这些敏感变量，符合安全要求。

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