如何在Nginx部署的Vite/React应用中注入Docker环境变量

Vite的VITE_*前缀环境变量是构建阶段静态注入到打包代码中的。你当前的流程是先构建生成dist文件，再打包成Docker镜像，此时前端代码已经是静态文件，运行时通过docker run传入的环境变量无法被前端代码读取——容器里的环境变量属于系统层面，前端静态页面没有权限直接访问，这就是为什么echo $VITE_APP_TEST能输出，但应用里显示undefined的原因。

核心思路是在容器启动时，将环境变量的值替换到已打包的静态代码中。以下是具体实现步骤：

1. 项目代码添加占位符 #

在你的React/Vite代码中，给目标变量设置一个占位符，比如：

// src/App.jsx
function App() {
  // 用__VITE_APP_TEST__作为占位符，后续启动时替换为实际值
  const testValue = import.meta.env.VITE_APP_TEST || '__VITE_APP_TEST__';
  return <div>测试变量值：{testValue}</div>;
}

2. 编写容器启动脚本 #

创建一个start.sh脚本，负责替换静态文件中的占位符并启动Nginx：

#!/bin/sh

# 替换dist目录下所有JS文件中的占位符为容器环境变量的值
# 若未传入VITE_APP_TEST，用defaultValue作为默认值
sed -i "s/__VITE_APP_TEST__/${VITE_APP_TEST:-defaultValue}/g" /usr/share/nginx/html/assets/*.js

# 启动Nginx（保持前台运行）
nginx -g 'daemon off;'

3. 修改Dockerfile #

调整Dockerfile，将启动脚本复制到镜像中，并设置为容器启动命令：

# 构建阶段：生成dist文件
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 构建时无需传环境变量，用代码中的占位符即可
RUN npm run build

# 运行阶段：托管dist并执行启动脚本
FROM nginx:alpine
# 复制打包好的dist文件到Nginx默认目录
COPY --from=builder /app/dist /usr/share/nginx/html
# 复制启动脚本并赋予执行权限
COPY start.sh /usr/local/bin/
RUN chmod +x /usr/local/bin/start.sh
# 设置容器启动时执行脚本
CMD ["start.sh"]

4. 构建并运行容器 #

执行以下命令构建镜像并启动容器，传入环境变量：

# 构建镜像
docker build -t vite-react-nginx .
# 启动容器，传入VITE_APP_TEST变量
docker run -d -p 8080:80 -e VITE_APP_TEST=testValue vite-react-nginx

此时访问http://localhost:8080，就能看到应用中正确显示testValue了。

• 如果有多个环境变量需要替换，只需在start.sh中添加对应的sed命令即可，比如：

  sed -i "s/__VITE_APP_OTHER__/${VITE_APP_OTHER:-defaultOther}/g" /usr/share/nginx/html/assets/*.js
  

• 若后续迁移到Kubernetes，只需将环境变量通过env或secret注入Pod，容器启动脚本会自动完成替换逻辑，无需额外修改。

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