Azure存储静态网站404错误求助：资源不存在问题排查

Hey there, I've run into this exact issue before when deploying Angular apps to Azure Static Web Apps—super frustrating, but there are a few common fixes that usually resolve it. Let's break down the steps to troubleshoot:

1. Double-Check Static Site Configuration #

Azure Static Websites rely on correct index and error document settings, especially for SPAs like Angular:

• Go to your Storage Account → Static Website
• Make sure Index document name is set to index.html (this is the default, but it never hurts to confirm)
• For Angular SPAs, you must set Error document path to index.html too. This ensures that when users navigate to routes like /about, Azure serves the index file instead of throwing a 404.

2. Verify File Upload Structure #

Angular builds output files into a dist folder, but you need to upload the contents of dist directly into the $web container—not the dist folder itself.

• ❌ Wrong: $web/dist/index.html
• ✅ Correct: $web/index.html
  If your files are nested inside dist in $web, Azure won't find the index file at the root, hence the 404.

3. Check File Permissions & Integrity #

Even if you see files in $web, they might not be accessible or could be corrupted:

• Download the index.html from $web to your local machine and open it—make sure the content matches what's in your local dist folder (no truncation or upload errors)
• Confirm blob permissions: In the $web container, select your files and ensure their Access tier allows public read (Static Websites should handle this automatically, but misconfigurations happen)

4. Use the Correct Static Site Endpoint #

Don't confuse the Blob Storage URL with the Static Website URL!

• Blob URL (may not work for static site access): https://<storage-account>.blob.core.windows.net/$web/index.html
• Static Site URL (the one you should use): https://<storage-account>.z13.web.core.windows.net/index.html
  The blob URL might throw 404s due to permission restrictions, so always use the dedicated static website endpoint.

5. Clear CDN Cache (If Enabled) #

If you've set up Azure CDN with your static site, old cached content could be causing the 404. Head to your CDN endpoint and manually purge the cache, or wait for the TTL to expire before testing again.

Start with steps 1 and 2—those are the most common culprits for Angular apps on Azure Static Websites. Let me know if any of these fix your issue!

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