Azure存储静态站点多客户端部署：客户端ID存储方案咨询

Great question! Azure Storage Static Websites don’t have built-in support for environment variables like traditional app hosting platforms, but there are two solid workarounds to store and access that unique client _id for each of your customer-specific storage accounts. Let’s walk through them:

1. Inject the Client ID at Build Time (Recommended for Slightly Sensitive IDs) #

Since React apps are statically built, you can inject the client _id as an environment variable during the build process, then deploy the unique build artifact to each customer’s storage account. Here’s how:

• Use React’s built-in environment variable convention: prefix your variable with REACT_APP_ (React only exposes variables starting with this prefix in the final build).
• For each customer, run a build command with their specific ID:

  REACT_APP_CLIENT_ID=customer123 npm run build
  

• This bakes the process.env.REACT_APP_CLIENT_ID value directly into your React app’s bundled code. You can access it anywhere in your app like this:

  const clientId = process.env.REACT_APP_CLIENT_ID;
  // Use this ID to fetch customer-specific data from your backend
  

• Automate this with CI/CD tools (like Azure DevOps Pipelines or GitHub Actions): set up a pipeline that triggers for each customer, injects their ID, builds the app, and deploys the build folder to their dedicated Azure Storage account.

2. Store a Client-Specific Config File in the Storage Account (Best for Flexibility) #

If you don’t want to rebuild the app for each customer, you can add a plain JSON config file to each storage account’s static website container, then fetch it when your React app loads. Here’s the workflow:

• Create a config.json file for each customer with their unique ID:

  {
    "clientId": "customer123"
  }
  

• Upload this file to the root of the customer’s Azure Storage static website container (alongside your React build files).
• In your React app’s initialization code (e.g., in App.js or a custom hook), fetch this config file on load:

  useEffect(() => {
    fetch('/config.json')
      .then(res => res.json())
      .then(config => {
        const clientId = config.clientId;
        // Use clientId to fetch backend data
      })
      .catch(err => console.error('Failed to load config:', err));
  }, []);
  

• Note: This method makes the clientId publicly accessible (anyone can navigate to your-customer-site.com/config.json), so only use this if the ID isn’t sensitive. The upside is you can update the ID anytime by replacing the config file—no rebuild required.

Quick Comparison #

Whichever method you choose, automating the deployment process will save you a ton of time when onboarding new customers.

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