Azure Storage Static website error - Resource not found or content doesn't exist

Question

To see how static websites work in Azure storage, I created a basic angular app and uploaded the files in dist folder to the static website. But when I try to access the URL, I get a 404 error message that says "The requested content doesn't exist".

Also, I can see that files are present under $web path, but when I click on the file URL <azurestorageurl>/$web/index.html the browser throws an error message "Resource not found".

.

Warfore

Please check the ACL of $web blob container. Most likely it is set as Private. – Conformal

@GauravMantri Thank you. That helped. Please add it as an Answer. :) – Warfore

Updated my answer with inputs from Azure Storage team. HTH. – Conformal

Answer 1

The reason you're getting this error is because the ACL of the $web blob container is Private by default.

Please change the ACL to either Blob (recommended) or Container and you should not see this error.

UPDATE

So I reached out to Azure Storage team and brought this question to their attention. They were kind enough to explain the behavior to me.

Essentially if you access the static website's contents through the static website endpoint (e.g. account.z5.web.core.windows.net), there's no need to change the blob container's ACL. Contents should be accessible even if the ACL of $web is Private. Blob container's ACL comes into picture when you access the content through blob storage endpoint (e.g. account.blob.core.windows.net).

Conformal

Thank you, for digging further. Yeah, that's what I thought, since none of the demo videos or blog posts mentioned the ACL change. Unfortunately, the static website endpoint wasn't working for me when ACL was set as Private (default). The moment I changed $web ACL to Blob, I was able to access the page. Not sure what the root cause is. – Warfore

Unfortunately, the static website endpoint wasn't working for me when ACL was set as Private (default) - That's weird! I tried it on my end (before posting the update) and it worked perfectly fine for me. Are you sure you used static website endpoint and not the storage endpoint? – Conformal

Yep, pretty sure. I got different errors for the two end points. The first error (404) highlighted in my question was for the static website endpoint https://storageaccount.z19.web.core.windows.net. The second error (xml) was for the blob endpoint. I uploaded the files to multiple storage accounts just to be sure. – Warfore

I needed to set this for my vue application routes to route back to index.html, vue routes wouldn't work under private (or probably any SPA routes) – Barbarossa

Answer 2

I had quite a similar issue hosting an Angular app on Azure storage account static site, I was getting the below error when reloading the page or navigating by URL. I had to set the Angular Router to use HashLocationStrategy instead of the default strategy. Also, because I am using ASP boilerplate (ASPNetZero) I had to add it to the RootRoutingModule.

This is now working for me on refresh and navigating by changing the URL manually.

Angular Hash Location Strategy

Zulazulch

Is this answer or question ? – Aether

This is an answer for anyone who is having the same issue and setting the ACL of the $web container on the storage account did not help – Zulazulch

No problem @Shree. I edited my answer to just make it clear that it is working for me now. – Zulazulch

Answer 3

I also got a similar error and fixed it by adding index.html to the Index document name.

1. Sign in to the Azure portal to get started.
2. Locate your storage account and display the account overview.
3. Select Static website to display the configuration page for static websites.
4. Select Enabled to enable static website hosting for the storage account.
5. In the Index document name field, specify a default index page (For example: index.html).
6. The default index page is displayed when a user navigates to the root of your static website.
7. In the Error document path field, specify a default error page (For example: 404.html).
8. The default error page is displayed when a user attempts to navigate to a page that does not exist in your static website.
9. Click Save.

https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website-how-to?tabs=azure-portal

Chum