部署服务器上无法获取Nuxt3环境变量的求助

在Digital Ocean服务器上通过Dockerfile和Github Action脚本部署Nuxt3应用时，遇到客户端无法获取环境变量的问题。已知Nuxt默认不会为客户端读取环境变量，本以为在构建阶段注入变量就能解决，但至今未成功。

关键现象 #

• 进入容器后可确认.env文件已正确创建且值无误，执行printenv命令也能得到正确的变量值
• 浏览器中运行应用时出现「invalid firebase api key」错误，说明变量未被客户端读取，但本地运行一切正常
• 已为私有变量添加NUXT_前缀，为公开变量添加NUXT_PUBLIC_前缀
• 尝试从Nuxt服务端接口获取变量可行，但变量值会暴露在网络请求中

相关代码片段 #

Dockerfile 片段

FROM node:alpine AS base

WORKDIR /code

ARG NUXT_FIREBASE_API_KEY
ENV NUXT_FIREBASE_API_KEY=$NUXT_FIREBASE_API_KEY
RUN echo "NUXT_FIREBASE_API_KEY=$NUXT_FIREBASE_API_KEY" >> /code/.env

<other envs here>

# Stage 2 - builder
FROM base AS builder

WORKDIR /code

COPY package*.json ./

COPY ./ ./

COPY --from=base /code/.env /code/.env

RUN npm install

RUN npm run build

# Stage 3 - run
FROM base AS final

RUN apk add --no-cache \
    git \
    wget curl \
    nginx \
    supervisor

WORKDIR /code

ADD package.json ./
ADD nuxt.config.ts ./
ADD .docker/nuxt/nginx-app.conf ./

COPY --from=builder /code/.output /code/.output
COPY --from=builder /code/node_modules /code/node_modules
COPY --from=builder /code/.env /code/.env

RUN \
    # copy nginx site config \
    mv ./nginx-app.conf /etc/nginx/nginx.conf

EXPOSE 3000

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

nuxt.config.ts 片段

runtimeConfig: {
    FIREBASE_API_KEY: process.env.NUXT_FIREBASE_API_KEY,
    FIREBASE_AUTH_DOMAIN: process.env.NUXT_FIREBASE_AUTH_DOMAIN,
    FIREBASE_PROJECT_ID: process.env.NUXT_FIREBASE_PROJECT_ID,
    FIREBASE_STORAGE_BUCKET: process.env.NUXT_FIREBASE_STORAGE_BUCKET,
    FIREBASE_MESSAGE_SENDER_ID: process.env.NUXT_FIREBASE_MESSAGE_SENDER_ID,
    FIREBASE_APP_ID: process.env.NUXT_FIREBASE_APP_ID,
    FIREBASE_MEASUREMENT_ID: process.env.NUXT_FIREBASE_MEASUREMENT_ID,
    public: {
      BASE_URL_API: process.env.NUXT_PUBLIC_BASE_URL_API,
      HOST: '0.0.0.0'
    }
}

Docker 构建命令

run: >
          docker build --build-arg NUXT_FIREBASE_SERVICE_ACCOUNT_JSON=$(echo $FIREBASE_SERVICE_ACCOUNT_JSON) 
          --build-arg NUXT_FIREBASE_API_KEY=$(echo $FIREBASE_API_KEY) 
          --build-arg NUXT_FIREBASE_AUTH_DOMAIN=$(echo $FIREBASE_AUTH_DOMAIN) 
          --build-arg NUXT_FIREBASE_PROJECT_ID=$(echo $FIREBASE_PROJECT_ID) 
          --build-arg NUXT_FIREBASE_STORAGE_BUCKET=$(echo $FIREBASE_STORAGE_BUCKET) 
          --build-arg NUXT_FIREBASE_MESSAGE_SENDER_ID=$(echo $FIREBASE_MESSAGE_SENDER_ID) 
          --build-arg NUXT_FIREBASE_APP_ID=$(echo $FIREBASE_APP_ID) 
          --build-arg NUXT_FIREBASE_MEASUREMENT_ID=$(echo $FIREBASE_MEASUREMENT_ID) 
          --build-arg NUXT_PUBLIC_BASE_URL_API=$(echo $BASE_URL_API) 
          -t $(echo $REGISTRY)/$(echo $IMAGE_NAME):$(echo $REF-$(echo $SHA | head -c7)) -f .docker/nuxt/Dockerfile .

Docker 运行命令

docker run -d \
            -p 3030:3000 \
            --restart always \
            --name $(echo $IMAGE_NAME) $(echo $REGISTRY)/$(echo $IMAGE_NAME):$(echo $REF-$(echo $SHA | head -c7))

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