Search code examples
azureazure-blob-storageazure-cdn

How do I correctly map Azure CDN endpoint to Angular 7 Project in blob storage container

I have been trying to create Azure CDN endpoint to blob storage container for an Angular 7 Project.

Following steps were followed.

  1. Crated a standard, HOT LRS Blob storage.
  2. Under created blob, created a container with access to blob anonymous read access.

  3. Uploaded dist/* to container.

  4. Created CDN Profile with Standard Verizon

  5. Created an endpoint with origin hostname set to point 1 above and orgin path to blob container.

Now, My Endpoint Hostname looks https://<myendpoint>.azureedge.net

When I navigate to this link from the browser nothing default XML displays. When I navigate to https://<myendpoint>.azureedge.net/<blobcontainer>/index.html, index page displays but ends with net::ERR_ABORTED 404

It trying to download supporting files such as styles.hash.css, runtime.hash.js etc from the path https://<myendpoint>.azureedge.net/ not from the path https://<myendpoint>.azureedge.net/<blobcontainer>/ so as these files do not exists, I get this error.

How do I correctly map Azure CDN endpoint to Angular 7 Project in blob storage container?

What I tried?

  1. I removed orginpath to my endpoints
  2. Blob container access to anonymous for blob and containers
  3. I did purgeall multiple times

Update: Same is working in Azure VM's IIS at port XX and virtual directory in E:\XX

Here is my dist/index.html as generated by angular cli.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.5/jspdf.plugin.autotable.min.js"></script>
<!-- Other CDN content -->

<link rel="stylesheet" href="styles.d53c073df9bdc9d8dc56.css"></head>
<body>
  <app-root> </app-root>
<script type="text/javascript" src="runtime.e34dbbfe0677512b179e.js"></script>
<script type="text/javascript" src="polyfills.24a4835bc4e54cff0563.js">
</script><script type="text/javascript" src="main.3d2c3408bf112b226574.js"></script>
</body>
</html>

Also many blogs suggest to toggle on static web site at blob storage account but I did not find such option in Azure Portal --> Storage Account --> Blob or in Blob --> Container.

Solution

  • Just narrow down the comment as an answer to this question for more references.

    Azure Storage General Purpose v2 accounts allow you to serve static content (HTML, CSS, JavaScript, and image files) directly from a storage container named $web. You can upgrade your current storage account to V2 following Settings--->Configuration--->upgrade in the Azure portal, then you can see the Static website option in the Settings of storage account.

    Next, upload your assets to the $web container via the Azure portal.

    To configure a CDN endpoint for this static website, except storage option, you also can select the custom origin as the origin type. If so, you can put primary endpoint hostname like storageaccount.z19.web.core.windows.net in the static website as the origin hostname.

    For more reference: Static website hosting in Azure Storage