azure - 在 Azure 存储上打开我的静态网站时,我会看到一个下载屏幕

标签 azure azure-storage

我使用静态网站功能在 Azure 存储上托管 ReactJS 应用程序。使用此脚本:

$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

我正在将文件从我的构建上传到 Azure 存储 $web blob。

enter image description here

当我导航到静态页面的 URL 时,我会看到一个下载屏幕:

enter image description here

当我删除所有文件并上传简单的index.html 文件时,我确实加载了index.html 文件:

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

编辑

在 Edge 中我可以打开页面,但 Chrome 和 Firefox 会加载下载屏幕。但 Firefox 确实显示了更多信息:

enter image description here

enter image description here

所以看起来内容类型有点奇怪。

最佳答案

根本原因应该是内容类型不正确。

正如您已经提到的,当手动上传 .html 文件时,它的内容类型是“text/html”。使用Set-AzureStorageBlobContent时,它会更改为“application/octet-stream”。

解决方案是,在使用powershell cmdlet Set-AzureStorageBlobContent时,应指定参数-Properties,如下所示:-Properties @{"ContentType"=“文本/html”}

示例代码如下(它在我这边工作):

$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}}

上面的代码只是将扩展名为.html的文件的content_type更改为“text/html”。您可以随意更改代码以满足您的需要。

关于azure - 在 Azure 存储上打开我的静态网站时,我会看到一个下载屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56976567/

相关文章:

azure - 开发多个 Azure DevOps 自定义任务时的正确文件结构

c# - 无法从 Azure Blob 流式传输图片

linux - 获取 blobfuse(Azure 存储)中的文件同步状态

Java-Azure 列表 Blob 目录

azure - 无法从 Java 进程将消息添加到 Azure 模拟器

mongodb - 无法从 Azure Functions 连接到 Atlas MongoDB

node.js - Azure 部署管道在 "react-scripts build"处失败

azure - 如何使用 terraform 创建 azure 事件网格系统主题?

c# - 在 Azure 中将 tuespechkin 与 MVC 项目结合使用

Azure 队列触发功能 - 本地集成