Search code examples
azureazure-storage

When opening my static website on Azure Storage I get a download screen

I'm hosting a ReactJS app on a Azure Storage using the static website feature. Using this script:

$container = "`$web"
$context = New-AzureStorageContext -StorageAccountName $env:prSourceBranchName -StorageAccountKey "e4Nt0********dbFlEG2LN9g2i5/yQ=="
Get-ChildItem -Path $env:System_DefaultWorkingDirectory/_ClientWeb-Build-CI/ShellArtifact/out/build -File -Recurse | Set-AzureStorageBlobContent -Confirm:$false -Force -Container $container -Context $context

I'm uploading the files from my build to the Azure storage $web blob.

enter image description here

When I navigate to the URL of the static page I get a download screen:

enter image description here

When I remove all the files and upload a simpel index.html file I does load the index.html file:

https://gist.github.com/chrisvfritz/bc010e6ed25b802da7eb

EDIT

In Edge I can open the page but Chrome and Firefox load the download screen. But Firefox does show some more information:

enter image description here

enter image description here

So it looks like the content-type is a bit weird.

Solution

  • The root cause should be the content-type is incorrect.

    As you have already mentioned, when manually upload a .html file, it's content type is "text/html". While use Set-AzureStorageBlobContent, it changes to "application/octet-stream".

    The solution is that when use powershell cmdlet Set-AzureStorageBlobContent, you should specify the parameter -Properties, like below: -Properties @{"ContentType" = "text/html"}.

    Sample code like below(It works at my side):

    $context = New-AzureStorageContext -StorageAccountName "xxx" -StorageAccountKey "xxxxx"

#note that the last "\" is necessary
$path = "D:\temp\1\"

Get-ChildItem -Path $path  -File -Recurse | `
 %{ if($_.extension -eq ".html") {Set-AzureStorageBlobContent -File $_.FullName -Blob $_.FullName.Replace($path,'')  -Container "test-1" -Context $context -Properties @{"ContentType" = "text/html"}} `
 else {Set-AzureStorageBlobContent -File $_.FullName -Blob $_.FullName.Replace($path,'') -Container "test-1" -Context $context}}

    The above code just change the content_type of the files whose extension is .html to "text/html". You can feel free to change the code to meet your need.