{"id":1371,"date":"2023-11-11T06:00:04","date_gmt":"2023-11-10T20:00:04","guid":{"rendered":"https:\/\/moneystock.net\/wp_e\/?p=1371"},"modified":"2024-07-13T11:51:55","modified_gmt":"2024-07-13T03:51:55","slug":"how-to-set-up-cdn-for-a-web-application-using-azure","status":"publish","type":"post","link":"https:\/\/moneystock.net\/wp_e\/2023\/11\/11\/how-to-set-up-cdn-for-a-web-application-using-azure\/","title":{"rendered":"How to set up CDN using Azure"},"content":{"rendered":"<p>There could be many ways to set up CDN in <a href=\"https:\/\/azure.microsoft.com\/\">Azure<\/a> cloud. I used Storage and Front Door for this. This approach is cost-effective.<\/p>\n<p>As well known, CDN (Content Delivery Network)is very useful if your website needs to be fast when accessed from anywhere in the world.<\/p>\n<p>However, there is a limitation on CDN.<\/p>\n<ul>\n<li>The first load from a specific region will still be read from the original resource, which might be far from where the user is. It means it can be slow to load.<\/li>\n<li>After the cache expires in a few days, the resource in the CDN edge node needs to be reloaded from the original resource. This process will be slow.<\/li>\n<\/ul>\n<p>To mitigate these limitations, #1, you can pre-load resources in each major Edge. #2 you can set the cache expiry time long enough depending on your context.<\/p>\n<p>Below is the steps needed to set up CDN in Azure cloud.<\/p>\n<ol>\n<li>Azure DevOps Build Pipeline\n<ol>\n<li>Copy the necessary files to a separate folder. e.g. CSS, Javascript (without security concerns), Fonts and IMG files.Build yaml example\n<pre>task: CopyFile@2\r\ndisplayName: 'copy files to cdn folder'\r\ninputs:\r\n  SourceFolder: '$(Build.ArtifactDirectory)\/wwwroot'\r\n  Contents: |\r\n  \u00a0 css\/*.css\r\n  \u00a0 js\/chunk-vendors.*.*js\r\n  \u00a0 fonts\/*.*\r\n  \u00a0 img\/*.*\r\n  TargetFolder: '$(BuildArtifactDirectory)\/cdn'<\/pre>\n<\/li>\n<li>Config the build pipeline to send the files prepared to Azure storage using AzureFileCopy\n<pre>task: AzureFileCopy@5\r\ndisplayName: 'Azure File Copy'\r\ninputs: \r\n  SourcePath: '$(BuildArtifactDirectory)\/cdn'\r\n  azureSubscription: 'azureDevOpsToStorage'\r\n  Destination: AzureBlob\r\n  storage: azurecdn\r\n  ContainerName: azurecdn\r\n  CleanTargetBeforeCopy: false<\/pre>\n<\/li>\n<li>In the Release pipeline, use PowerShell script to update the links to CSS, etc, to point to the CDN URL.Powershell Example\n<pre>param(\r\n  [string]$cdnPath\r\n  [string]$wwwRootPath\r\n)\r\n\r\n# CSS replacement\r\nSet-Location $wwwRootPath\r\n((Get-Content -path index.html -Raw) -replace \"\/css\/\", \"$cdnPath\/css\/\") | Set-Content -Path index.html -Encoding UTF-8<\/pre>\n<\/li>\n<li>We need to provide an Azure DevOps account to have write access to the storage.<br \/>\nThis can be achieved by adding Service connections to the DevOps account. Go to DevOps projects\/Settings\/Service connections. Click New service connection. Select Azure Resource Manager. Provide a connection to the relevant scope of the subscription \/ Resource Group.<\/li>\n<\/ol>\n<\/li>\n<li>Storage\n<ol>\n<li>Link the storage container to a Front Door, which is the endpoint where the users can load the static files.<\/li>\n<\/ol>\n<\/li>\n<li>Front Door\n<ol>\n<li>CORS<br \/>\nIf a javascript file in CDN references another file, CORS will block it from loading to the web browser. In this case, Rule sets configuration can be used in Front Door.<br \/>\nThe rule will be [if origin = &#8216;your site URL&#8217;, then overwrite header, Access-Control-Allow-Origin, as the same as &#8216;your site URL&#8217;.<\/li>\n<li>Rewrite Path<br \/>\nIf the absolute path to a resource has changed, It can be re-written using Rule set configuration. E.g. if \/img has changed to \/cdn\/img during copying the files to CDN server, it&#8217;s possible to add rule that if Request Path contains \/img then URL rewrite from \/img to \/cdn\/img<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There could be many ways to set up CDN in Azure cloud. I used Storage and Front Door for this. This approach is cost-effective. As well known, CDN (Content Delivery Network)is very useful if your website needs to be fast when accessed from anywhere in the world. However, there is a limitation on CDN. The&hellip; <a class=\"more-link\" href=\"https:\/\/moneystock.net\/wp_e\/2023\/11\/11\/how-to-set-up-cdn-for-a-web-application-using-azure\/\">Continue reading <span class=\"screen-reader-text\">How to set up CDN using Azure<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[586,79],"tags":[588,676,674,672],"class_list":["post-1371","post","type-post","status-publish","format-standard","hentry","category-azure","category-web-development","tag-azure","tag-cdn","tag-ci-cd","tag-devops","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/posts\/1371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/comments?post=1371"}],"version-history":[{"count":7,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/posts\/1371\/revisions"}],"predecessor-version":[{"id":1427,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/posts\/1371\/revisions\/1427"}],"wp:attachment":[{"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/media?parent=1371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/categories?post=1371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/tags?post=1371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}