部署于Azure Web App的Create-React-App项目：不同环境配置是否需重新构建及免重构配置方案咨询

Great question—this is a common pain point with Create React App (CRA) since its default behavior bakes environment variables into the build artifact. Let’s break this down clearly:

Your Initial Hunch is Correct #

Yes, by default, you do need to update your .env file and re-run yarn build to change values like process.env.REACT_APP_API_URL. CRA uses webpack's DefinePlugin under the hood to replace these variables with their actual values during the build process—once the static files are generated, those values are hardcoded into the bundle and can’t be modified without rebuilding the app.

No-Recompile Workarounds for Azure Web App #

Luckily, there are several practical ways to adjust environment-specific configs without rebuilding your React app. Here are the best options tailored for Azure Web App:

• Runtime config file in the public folder
  Create a plain JSON file (e.g., public/config.json) with your environment values:

  {
    "apiUrl": "https://your-production-api.azurewebsites.net"
  }
  

  Then, fetch this file when your app initializes (e.g., in App.js):

  useEffect(() => {
    fetch('/config.json')
      .then(res => res.json())
      .then(config => {
        // Store the config in state or context for app-wide use
        setAppConfig(config);
      });
  }, []);
  

  Pros: Dead simple, no extra tooling required. Just update the config.json file in your Azure Web App's wwwroot folder (via Kudu or the Azure Portal) and refresh the app.
  Cons: Adds a small network request on app load; you’ll need to handle loading states.

• Leverage Azure Web App Application Settings
  Azure lets you define environment variables directly in the portal (Configuration > Application Settings). To make these accessible to your static React app:

  1. Add a lightweight Node.js script that reads Azure's environment variables and generates the config.json file on app startup. For example, generate-config.js:

     const fs = require('fs');
     const config = {
       apiUrl: process.env.REACT_APP_API_URL || 'https://default-api-url.com'
     };
     fs.writeFileSync('./build/config.json', JSON.stringify(config));
     

  2. Update your Azure Web App's startup command to run this script before serving static files:

     node generate-config.js && serve -s build
     

  Pros: Ties directly into Azure's native configuration system—no manual file edits needed. Just update the app setting in Azure and restart the Web App.
  Cons: Requires a minimal Node.js layer (though it’s trivial to implement).

• Inject config into index.html at runtime
  Add a placeholder in your public/index.html file:

  <script>
    window.appConfig = {
      apiUrl: '__API_URL__'
    };
  </script>
  

  Then, use Azure's startup command to replace the placeholder with the value from your Application Settings. For Linux App Service plans, use sed:

  sed -i "s/__API_URL__/$REACT_APP_API_URL/g" /home/site/wwwroot/index.html && serve -s build
  

  For Windows plans, use a PowerShell command instead:

  (Get-Content index.html) -replace '__API_URL__', $env:REACT_APP_API_URL | Set-Content index.html; serve -s build
  

  Your React app can then directly access window.appConfig.apiUrl without any network requests.
  Pros: Fast (no fetch required), fully integrated with Azure's tooling.
  Cons: Syntax varies between Linux and Windows plans.

Final Recommendation #

If you want the quickest, lowest-effort solution, go with the public config file. If you want seamless integration with Azure's management tools, the Application Settings + startup script method is the way to go.

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