通过FTP部署React应用至Azure WebApp后遇权限及白屏问题求助

Hey there, let's work through these issues step by step to get your React app running smoothly on Azure Web Apps. I’ve helped debug similar problems plenty of times, so let’s break this down:

First: Fixing the "You do not have permission to view this directory or page" error #

This usually happens because Azure can’t find your app’s entry point, or the static file handling isn’t configured correctly. Here’s what to check:

• Double-check your upload path: Make sure you’re uploading the contents of your local build folder directly into Azure’s site/wwwroot directory—not the entire build folder itself. When you open site/wwwroot via FTP or Kudu, you should see index.html, the static folder, and other build files immediately, not a nested build folder. If you uploaded the folder by mistake, move all the contents up to wwwroot and delete the empty build folder.

• Verify default document settings: Head to the Azure Portal, navigate to your Web App → Configuration → Default documents. Ensure index.html is at the top of the list. If it’s not there, add it and drag it to the first position—Azure uses this list to find the entry point for your app.

• Add a basic web.config (if missing): Azure relies on web.config to handle static files and routing for non-.NET apps. If you didn’t upload one, creating a basic config is a critical first step.

Next: Fixing the blank page (with correct title) #

If the title shows up but the rest of the page is blank, this is almost always a routing or static file loading issue. Here’s how to resolve it:

• Use a SPA-friendly web.config: React is a single-page app (SPA), so direct requests to routes like /about will fail unless you configure Azure to rewrite those requests to index.html. Replace any existing web.config with this one:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
    <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

This config does two key things:

• Ensures correct MIME types for static files (like fonts and JSON) so browsers can load them without errors.

• Rewrites all requests that aren’t for actual files/directories (or API routes, if you have them) to index.html, letting React handle client-side routing.

• Check for missing or corrupted build files: Sometimes FTP uploads can skip files (especially large ones in the static folder). Go to your Web App’s Advanced Tools → Kudu → Debug console → CMD, then navigate to site/wwwroot. Compare the files here to your local build folder—make sure static/js/main.*.js and static/css/main.*.css exist and aren’t empty. If any are missing, re-upload them.

• Verify your app’s public path: If you set a homepage value in your package.json, make sure it matches your Azure Web App’s URL path. For a root-level Web App, you can either set "homepage": "./" or remove the field entirely (Create React App defaults to the root path). A mismatched public path can cause the browser to fail loading static assets, resulting in a blank page.

• Clear browser cache: Sometimes old cached assets can cause issues. Open your browser’s dev tools (F12), check "Disable cache" in the Network tab, then refresh the page.

Final Checks #

After making these changes:

1. Restart your Azure Web App (Portal → Overview → Restart) to ensure all config changes take effect.
2. Visit your app’s URL again—you should see your React app load correctly.

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