如何为Azure SWA托管的纯前端React.js网站安全配置环境变量？

核心原则先明确 #

首先要区分可公开的客户端变量和敏感变量：

• 可公开变量（如API基础地址）：构建后出现在JS文件是正常行为，无需过度担心；
• 敏感变量（如API密钥、加密密钥）：绝对不能直接注入客户端代码——无论怎么加密处理，客户端可获取的资源都能被用户解析出来。

1. 用GitHub Secrets安全传递构建时变量 #

如果你的变量是非敏感但不想硬编码到仓库中，或者是必须在客户端使用的低敏感变量，可以通过GitHub Secrets传递到CI/CD流程中，避免直接写在yml或代码里：

操作步骤： #

1. 进入GitHub仓库的「Settings」→「Secrets and variables」→「Actions」，添加需要的变量（比如VITE_API_BASE_URL）；
2. 在GitHub Actions的构建配置yml中，将secrets注入为环境变量，让Vite在构建时读取：

   jobs:
     build-deploy:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v4
         - name: 安装依赖
           run: npm install
         - name: 构建项目
           env:
             # 引用GitHub Secrets中的变量，前缀必须符合Vite要求（VITE_）
             VITE_API_BASE_URL: ${{ secrets.VITE_API_BASE_URL }}
           run: npm run build
         - name: 部署到SWA
           uses: Azure/static-web-apps-deploy@v1
           with:
             azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
             app_location: "/"
             output_location: "dist"
   

3. 项目中直接通过import.meta.env.VITE_API_BASE_URL使用即可。

这种方式下，变量值不会暴露在仓库代码或yml文件中，GitHub会自动保护secrets的实际值，不会在日志或仓库内容中显示。

2. 敏感变量必须通过后端代理处理 #

如果是真正的敏感变量（比如API密钥），无论怎么处理都不能放到客户端代码里，此时可以借助Azure Static Web Apps的无服务器API功能做代理层，即使你原本没有后端：

操作步骤： #

1. 在项目中创建SWA的API文件夹（默认是api目录），编写一个无服务器函数（比如Node.js）作为代理：

   // api/proxy.js
   module.exports = async function (context, req) {
     // 从SWA的Application Settings中读取敏感变量
     const apiKey = process.env.API_KEY;
     const targetUrl = `https://your-target-api.com/data?key=${apiKey}`;
   
     // 转发请求到目标API
     const response = await fetch(targetUrl);
     const data = await response.json();
   
     context.res = {
       body: data
     };
   };
   

2. 进入Azure Static Web Apps的管理后台，在「Configuration」→「Application settings」中添加敏感变量API_KEY；
3. 客户端代码直接请求这个代理接口，不需要接触敏感密钥：

   async function fetchData() {
     const response = await fetch('/api/proxy');
     const data = await response.json();
     // 使用返回的数据
   }
   

这种方式下，敏感变量只存在于SWA的服务器环境中，完全不会出现在客户端代码里。

3. 动态加载配置文件（非敏感变量灵活调整） #

如果是非敏感但需要在部署后灵活修改的变量，可以通过动态加载独立配置文件的方式，避免构建时将变量硬编码到JS中：

操作步骤： #

1. 在GitHub Actions的构建流程中，从Secrets生成一个config.json文件，放到dist目录：

   - name: 生成配置文件
     run: |
       echo '{"apiBaseUrl": "${{ secrets.VITE_API_BASE_URL }}", "appTitle": "${{ secrets.APP_TITLE }}"}' > dist/config.json
   

2. 客户端在应用初始化时异步加载这个配置文件：

   async function loadAppConfig() {
     try {
       const res = await fetch('/config.json');
       window.appConfig = await res.json();
       // 初始化应用逻辑
       initApp();
     } catch (err) {
       console.error('加载配置失败', err);
     }
   }
   
   loadAppConfig();
   

这种方式下，变量值存储在单独的json文件中，构建后的JS文件不会包含变量内容，后续需要调整时也无需重新构建，直接修改部署后的config.json即可。

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