Angular应用部署至Azure存储账户时出现连接超时故障

部署超时问题处理 #

现象 #

Angular应用托管在Azure存储账户，此前运行正常，近2-3个月通过GitHub Actions部署更新时频繁失败，报错均为连接超时，示例如下：

Preparing for deployment
preparing static deploy
Error when trying to deploy: 
request to https://<storagename>.blob.core.windows.net/%24web/assets%2Fscss%2Fcore%2Fmixins%2F_utilities.scss?comp=blocklist failed, reason: connect ETIMEDOUT 20.150.66.4:443

每次失败的文件不固定，需手动删除出错文件后多次重试才可能成功。

解决办法 #

• 给部署步骤加自动重试：不用手动删文件，直接在GitHub Actions的部署脚本里加重试逻辑。比如用Azure CLI上传文件时，添加--max-retries 5参数；或者借助GitHub Actions的重试动作包，遇到超时错误自动触发重试。
• 检查存储账户网络权限：排查近几个月是否修改过存储账户的防火墙/虚拟网络设置，导致GitHub Actions的Runner IP被拦截。可先临时允许所有网络访问存储账户，测试能否正常部署；若恢复正常，再将Runner的IP段加入允许列表。
• 清理存储账户旧文件：如果存储账户内积累了大量历史文件，部署时遍历或操作文件易触发超时。定期清理无用旧文件，或部署前用az storage blob delete-batch命令清空$web容器（操作前记得备份重要文件）。

SCSS文件部署疑问解答 #

完全不需要把SCSS文件夹上传到Azure存储。Angular项目在本地构建阶段会将SCSS源码编译为浏览器可识别的CSS文件，最终只需部署构建生成的dist文件夹内容：

• 正常执行ng build命令后，SCSS会被编译成CSS并打包到dist目录中，SCSS源码本身无需出现在生产环境。
• 检查你的GitHub Actions脚本，大概率是误将项目根目录的SCSS文件夹（而非构建后的dist内容）传到了存储账户。修改脚本，仅上传dist文件夹内的所有文件到$web容器即可。

内容的提问来源于stack exchange，提问作者David O'Brien