如何在Azure Web Apps容器中动态设置React应用的VITE_URL环境变量

问题根源 #

Vite默认是构建时注入环境变量，打包后变量会直接固化在静态资源文件中。你之前在Azure Web Apps设置的是运行时环境变量，无法修改已打包好的静态文件内容，所以变量不会生效。

推荐解决方案：运行时动态注入变量（支持多环境无重新构建） #

这种方案不需要为每个环境单独构建镜像，启动容器时自动读取Azure配置的变量替换静态文件中的占位符，灵活适配多环境。

1. 调整代码与构建配置 #

• 修改React代码，将原有的import.meta.env.VITE_URL替换为占位符（比如__VITE_URL__），兼容开发环境可加判断：

  // 开发环境用本地.env变量，生产环境留占位符
  const apiUrl = import.meta.env.MODE === 'development' 
    ? import.meta.env.VITE_URL 
    : '__VITE_URL__';
  

• 修改Dockerfile，构建时用占位符代替真实变量，不固化值：

  # 构建阶段
  FROM node:18-alpine as builder
  WORKDIR /app
  COPY package*.json ./
  RUN npm install
  COPY . .
  # 构建时传入占位符，不注入真实URL
  RUN VITE_URL=__VITE_URL__ npm run build
  
  # 运行阶段
  FROM nginx:alpine
  COPY --from=builder /app/dist /usr/share/nginx/html
  

2. 配置Azure启动命令 #

在Azure Web Apps的「配置」→「常规设置」中，设置启动命令为：

sed -i "s/__VITE_URL__/$VITE_URL/g" /usr/share/nginx/html/assets/*.js && nginx -g 'daemon off;'

这条命令会在容器启动时，把静态JS文件中的__VITE_URL__占位符替换为Azure配置的VITE_URL变量值，再启动nginx服务。

3. 配置Azure环境变量 #

在对应环境的Azure Web Apps「配置」→「应用设置」中添加VITE_URL变量，设置对应环境的URL即可。修改后重启容器，变量会自动生效。

备选方案：构建阶段注入变量（需多环境单独构建） #

如果你的业务需要在构建阶段使用环境变量（比如根据变量打包不同资源），可以通过GitLab CI/CD传递对应环境的变量：

1. GitLab CI/CD配置 #

在GitLab项目的「设置」→「CI/CD」→「变量」中，为每个环境（开发/预发布/生产）添加对应的VITE_URL变量。

2. 修改GitLab CI脚本 #

在.gitlab-ci.yml中构建镜像时传入构建参数：

build-production:
  stage: deploy
  environment: production
  script:
    - docker build --build-arg VITE_URL=$VITE_URL -t your-image-repo/prod:latest .
    - docker push your-image-repo/prod:latest

3. 修改Dockerfile接收构建参数 #

FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 接收构建参数并设置为环境变量
ARG VITE_URL
ENV VITE_URL=$VITE_URL
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html

这种方式每个环境需要单独构建镜像，部署到对应Azure环境即可。

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