将 Angular 应用程序部署到 Azure 存储帐户失败，连接超时

Question

我们在 Azure 存储帐户上托管了一个 Angular 应用程序，该应用程序已经运行了很长时间，但在过去的 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

我们最终解决此问题的唯一方法是手动删除该文件。 它总是一个不同的文件，我们可能会删除这个文件，下一次尝试在另一个文件上失败，我们重试几次，它最终可能会成功。

有没有办法让我们不在源代码中包含scss文件夹并在客户端完成？ （我不一定是前端人员）谢谢！

Answer 1

检查以下步骤，使用 GitHub 操作将 Angular 应用程序部署到 Azure 存储帐户。

• 在本地，新建一个 Angular Web App。

感谢@JohannesHoppe提供的npm commands 。

npm install -g @angular/cli
ng new myAngJan24

• 导航到应用程序根目录。

cd myAngJan24
ng serve

• 运行ng build --prod ，将创建包含 output 个文件内容的dist文件夹。

• 将应用从local推送到GitHub Repository 。

• 创建一个新的Storage Account 。

• 在其中创建一个容器。

• 在GitHubRepository 中添加机密。

• 现在我们需要使用 Azure CLI 命令手动创建一个工作流文件。

准备部署 preparing static deploy 尝试部署时出错：

• 确保包含内容的dist文件夹存在于存储库中。

如果存储帐户有任何网络组，这也可能是原因。

如果有，请确保它具有特定存储帐户的出站连接权限。

有没有办法让我们不在源代码中包含scss文件夹并在客户端完成？

创建应用程序时，您将获得 select stylesheet format的选项。 选择CSS选项而不是SCSS 。

• 如果您已经开发了应用程序并想立即更改它。 然后我们可以选择sass-loader 。
• 我们只需要在我们的 angular 组件中导入SASS文件。

参考资料取自MSDoc