如何在部署于Azure的React应用中通过Azure门户读取应用设置，实现无需修改代码及重新部署的UI配置

Hey there! I totally get what you're looking for—mirroring that .NET Core workflow where you can tweak configs right from the Azure portal without redeploying your React app. Let’s break down the best ways to make this happen:

1. Azure App Service App Settings + Runtime Config Injection #

Since React apps are static by default, we need a way to inject Azure’s app settings into your UI at runtime (not build time, which would require redeploys). Here’s how to set this up:

• Step 1: Add configs in Azure Portal
  Head to your App Service’s "Configuration" > "Application settings" and add key-value pairs for your UI configs (e.g., API_BASE_URL, APP_DISPLAY_NAME).

• Step 2: Create a runtime config file
  We’ll generate a dynamic config.js file when the App Service starts, pulling values from the environment variables you just set. Add a startup script (e.g., start.sh) to your project:

  #!/bin/bash
  # Generate config.js with Azure app settings
  cat > /home/site/wwwroot/config.js << EOF
  window.UI_CONFIG = {
    apiBaseUrl: "${API_BASE_URL}",
    appDisplayName: "${APP_DISPLAY_NAME}"
  };
  EOF
  # Serve your React build folder (adjust if you use a different static server)
  npx serve -s build
  

• Step 3: Load the config in your React app
  Add a script tag to your public/index.html to load config.js before your React bundle:

  <script src="%PUBLIC_URL%/config.js"></script>
  

  Now you can access these configs anywhere in your React components like this:

  const apiUrl = window.UI_CONFIG.apiBaseUrl;
  

• Step 4: Set the startup command in Azure
  Go to your App Service’s "Configuration" > "General settings" and set the startup command to ./start.sh (make sure the script has execute permissions—you can set this in your deployment pipeline or via Azure CLI).

2. Azure App Configuration (For Scalable, Centralized Configs) #

If you’re managing multiple environments or need more advanced features like real-time config refresh, Azure App Configuration is the way to go:

• Step 1: Create an App Configuration instance
  In the Azure portal, spin up an App Configuration resource and add your UI config key-value pairs (you can even label them for different environments like dev, prod).

• Step 2: Fetch configs in your React app
  Use the Azure App Configuration client library (or call its REST API directly) to pull configs when your app initializes. For example:

  async function loadConfig() {
    const response = await fetch('https://your-app-config-name.azconfig.io/kv?api-version=1.0');
    const configData = await response.json();
    // Store configs in context or state for your app to use
    window.UI_CONFIG = configData.reduce((acc, item) => {
      acc[item.key] = item.value;
      return acc;
    }, {});
  }
  
  // Call this before rendering your app
  loadConfig().then(() => {
    ReactDOM.render(<App />, document.getElementById('root'));
  });
  

  Pro tip: Use Azure Managed Identity to authenticate your app with App Configuration, so you don’t have to hardcode keys.

• Step 3: Enable real-time refresh
  App Configuration supports push notifications via SignalR, so you can update configs in the portal and have your React app pick them up without a page refresh. Just set up a listener for config changes.

Key Notes to Avoid Common Pitfalls #

• Skip build-time env vars: The REACT_APP_ prefix variables are injected at build time—changing them requires redeploying, which is exactly what you want to avoid. Stick to runtime injection or external config fetching.
• Static website considerations: If you’re hosting your React app as an Azure Storage Static Website, you can pair it with an Azure Function to fetch configs from App Service settings or App Configuration, then return them to your UI.

Either of these methods will let you adjust UI configurations directly from the Azure portal, no code changes or redeploys needed—just like your .NET Core workflow. The first approach is perfect for quick setups, while Azure App Configuration scales better for larger projects with complex config needs.

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