通过GitHub Actions部署Vite React应用至Azure时环境变量失效

核心问题原因 #

• 构建阶段未传入目标环境变量：GitHub Actions的构建流程在GitHub Runner上执行，无法直接获取Azure Web App的应用设置变量。你的vite.config.js中尝试通过process.env.VITE_SOME_KEY取值，但构建过程中该变量未被注入，最终只能使用默认值ABC；而静态构建产物一旦生成，部署到Azure后无法再替换其中的环境变量值。
• Vite环境变量配置方式错误：通过Rollup的globals配置import.meta.env.VITE_SOME_KEY不符合Vite的环境变量处理逻辑，Vite会自动识别前缀为VITE_的环境变量并注入到构建产物中，无需手动在Rollup配置中声明。

解决方案 #

1. 修正Vite配置文件 #

移除vite.config.js中错误的Rollup全局变量配置，恢复正确的Vite基础配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        inlineDynamicImports: true,
        // 移除globals下的环境变量配置
      },
    },
  },
});

2. 在GitHub Actions构建阶段注入环境变量 #

静态React应用的环境变量是构建时注入的，需在GitHub Actions的构建步骤中传入生产环境的变量值：

1. 打开你的GitHub仓库，进入Settings → Secrets and variables → Actions，添加一个新的Secret，名称为VITE_SOME_KEY，值设置为你在Azure中配置的变量值。
2. 修改GitHub Workflow文件中的构建步骤，注入该环境变量：

- name: npm install, build, and test
  env:
    VITE_SOME_KEY: ${{ secrets.VITE_SOME_KEY }}
  run: |
    npm install
    npm run build --if-present
    npm run test --if-present

3. 验证逻辑 #

• 本地开发时，Vite会自动加载根目录的.env文件，import.meta.env.VITE_SOME_KEY能正常获取本地值。
• GitHub Actions构建时，通过Secrets传入生产环境变量，Vite会自动将其注入到构建产物中，部署到Azure后即可正确显示变量值。

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