咨询：Nuxt.js生产环境无法读取环境变量的安全解决办法

问题描述 #

我的Nuxt.js网站在开发环境运行正常，但生产环境中虽能启动却无法读取环境变量。已将密钥配置为环境变量，尝试过直接设置环境变量、在部署脚本控制台中配置等方式，均未生效且无报错信息。

相关配置文件 #

nuxt.config.js

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    devtools: { enabled: process.env.NODE_ENV != "production" },
    modules: [
        'nuxt-mongoose',
    ],
    devServer: {
        port: parseInt(process.env.PORT) || 8080
    },
    server: {
        port: parseInt(process.env.PORT) || 8080
    },
    app: {
        head: {
            script: [{
                src: "https://www.google.com/recaptcha/api.js"
            }]
        }
    },
    runtimeConfig: {
        MONGODB_URI: process.env.MONGODB_URI,
        GOOGLE_RECAPTCHA_SERVER_KEY: process.env.GOOGLE_RECAPTCHA_SERVER_KEY,
        public: {
            GOOGLE_RECAPTCHA_CLIENT_KEY: process.env.GOOGLE_RECAPTCHA_CLIENT_KEY
        }
    }
})

Dockerfile

FROM node:18
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
ENV HOST=0.0.0.0
ENV PORT=8080
EXPOSE 8080
CMD ["node", ".output/server/index.mjs"]

cloudbuild.yaml

steps:
- name: "gcr.io/cloud-builders/docker"
  args:
  - build
  - "--tag=(my docker address here)"
  - "--file=./Dockerfile"
  - .
- name: node:18.16.1
  entrypoint: npm
  args: ["install"]
- name: node:v18.16.1
  entrypoint: npm
  args: ["run", "create-env"]
  env:
    - MONGODB_URI=${MONGODB_URI}
    - GOOGLE_RECAPTCHA_SERVER_KEY=${GOOGLE_RECAPTCHA_SERVER_KEY}
    - GOOGLE_RECAPTCHA_CLIENT_KEY=${GOOGLE_RECAPTCHA_CLIENT_KEY}
    - PORT=8080
    - HOST=0.0.0.0
- name: "gcr.io/cloud-builders/gcloud"
  args: ["app", "deploy"]
timeout: "1600s"

核心问题分析 #

你的部署流程存在两个关键问题：

1. Docker构建阶段未注入环境变量：Nuxt执行npm run build时需要读取环境变量生成runtimeConfig，但当前Dockerfile的build步骤未获取到外部传入的环境变量。
2. Cloud Build步骤顺序混乱：先执行Docker构建，之后才处理依赖和环境变量，导致构建镜像时根本没拿到所需变量。

修复步骤 #

1. 调整Dockerfile，支持构建时传入环境变量 #

修改Dockerfile，通过ARG接收构建时的环境变量，并转为构建阶段的ENV供Nuxt使用：

FROM node:18
WORKDIR /app
COPY . .

# 安装依赖
RUN npm install

# 定义构建时参数，接收外部传入的环境变量
ARG MONGODB_URI
ARG GOOGLE_RECAPTCHA_SERVER_KEY
ARG GOOGLE_RECAPTCHA_CLIENT_KEY
ARG PORT=8080
ARG HOST=0.0.0.0

# 将构建参数转为环境变量，供Nuxt build阶段读取
ENV MONGODB_URI=$MONGODB_URI
ENV GOOGLE_RECAPTCHA_SERVER_KEY=$GOOGLE_RECAPTCHA_SERVER_KEY
ENV GOOGLE_RECAPTCHA_CLIENT_KEY=$GOOGLE_RECAPTCHA_CLIENT_KEY
ENV PORT=$PORT
ENV HOST=$HOST

# 执行Nuxt构建
RUN npm run build

# 运行时环境变量（可选，若需运行时覆盖可保留）
ENV HOST=0.0.0.0
ENV PORT=8080

EXPOSE 8080
CMD ["node", ".output/server/index.mjs"]

2. 修正Cloud Build步骤顺序，注入构建变量 #

调整cloudbuild.yaml，确保Docker构建时传入环境变量，移除多余的本地依赖安装步骤（Dockerfile已处理）：

steps:
- name: "gcr.io/cloud-builders/docker"
  args:
  - build
  - "--tag=(your docker address here)"
  - "--file=./Dockerfile"
  - "--build-arg=MONGODB_URI=${_MONGODB_URI}"
  - "--build-arg=GOOGLE_RECAPTCHA_SERVER_KEY=${_GOOGLE_RECAPTCHA_SERVER_KEY}"
  - "--build-arg=GOOGLE_RECAPTCHA_CLIENT_KEY=${_GOOGLE_RECAPTCHA_CLIENT_KEY}"
  - "--build-arg=PORT=8080"
  - "--build-arg=HOST=0.0.0.0"
  - .
- name: "gcr.io/cloud-builders/gcloud"
  args: ["app", "deploy"]
timeout: "1600s"

# 定义Cloud Build替换变量，需在控制台设置保密变量
substitutions:
  _MONGODB_URI: ""
  _GOOGLE_RECAPTCHA_SERVER_KEY: ""
  _GOOGLE_RECAPTCHA_CLIENT_KEY: ""

3. 正确使用Nuxt runtimeConfig #

在应用代码中必须通过useRuntimeConfig()访问环境变量，而非直接读取process.env：

• 服务端（API路由、Server Middleware）：

const config = useRuntimeConfig()
// 访问私有变量
console.log(config.MONGODB_URI)

• 客户端：

const config = useRuntimeConfig()
// 仅能访问public下的变量
console.log(config.public.GOOGLE_RECAPTCHA_CLIENT_KEY)

4. 安全规范遵循 #

• 私有变量（如MONGODB_URI、服务端reCAPTCHA密钥）禁止放入public对象，仅保留在runtimeConfig根节点，确保仅服务端可访问。
• Cloud Build的敏感变量需通过保密变量设置：在Google Cloud Build控制台「设置」->「保密变量」中添加对应密钥，避免明文暴露。
• 禁止在Docker镜像中硬编码环境变量，始终通过构建参数或运行时变量传入，防止敏感信息泄露。

内容的提问来源于stack exchange，提问作者Kamran İbrahimov