问题标签 [azure-static-web-app]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
67 浏览

django - Azure 上的 Django 应用程序从静态文件中获取图像,而不是从 Bootstrap、Jquery 或 CSS 文件中获取图像

在 Azure 上部署了一个具有以下结构的 Django 应用程序:

问题是,当我以这种方式在模板上调用静态时:

图像可以完美呈现,但 CDN 数据表和 css 样式不能,并且浏览器控制台会向我抛出此错误:

和 :

没有意义,在模板上调用脚本的顺序没问题(已经尝试过不同的顺序),此外,图像从那里的同一个静态文件夹加载得很好,如果我在本地机器上运行它,一切都很好......知道怎么了?

提前致谢。

编辑 ////// :settings.py

STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

0 投票
1 回答
409 浏览

azure - Azure 静态 Web 应用程序的更深入分析?

是否可以访问诸如浏览器、网站点击的日期和时间、IP 地址等分析?

此处的文档来看,Azure App Insights 似乎仅适用于使用 Azure Functions 的静态 Web 应用程序。我只有一个静态网站,没有 API。

这是尝试启用 App Insights 时显示的消息: 在此处输入图像描述

理想情况下,我想设置一个Diagnostic Setting并使用 Azure Log Analytics 来查看分析。

如何在没有函数 API 的情况下对静态 Web 应用程序进行更深入的分析?

编辑1:我想至少在某处捕捉点击次数。

  • Azure Metrics 抓住了它们,但似乎没有在任何地方公开日志,只有这些可视化。

在此处输入图像描述

0 投票
1 回答
28 浏览

azure-durable-functions - 无法查询从 Azure 静态网站链接的 Durable Functions 工作流的状态

我已成功将 Blazor WASM 应用程序部署为 Azure 静态 Web 应用程序,并将其链接到单独部署的 Durable Functions 工作流。从 Blazor 应用程序我可以成功启动工作流。我知道这一点是因为标准响应与各种 Uri 一起返回,用于查询和停止工作流。我还可以在 Azure 门户概述中看到该活动。

当我尝试statusQueryGetUri从普通浏览器窗口访问 Durable Functions Workflow 时,我收到一个Bad Request响应,我认为这是因为请求未经过身份验证。

当我尝试statusQueryGetUri使用相对 URL 从我的 Blazor 应用程序访问时(即从/runtime...我得到错误We couldn’t find that page, please check the URL and try again..

当我尝试statusQueryGetUri使用完全限定的 Url 从我的 Blazor 应用程序访问时(即从https://...Blazor 应用程序炸弹中出现 CORS 错误。

有没有人成功地得到这样的配置?

0 投票
0 回答
318 浏览

.net-core - Azure Devops Release Pipeline 的 Azure Static Web App (SWA) 步骤与 dotnet api

我尽可能地遵循持续交付的基本原则:“构建一次,随处部署”。

TL;博士

在 Azure Devops Release Pipeline 的 SWA 步骤中:有没有办法让 Oryx 不构建 api 或识别它是一个 dotnet 项目?

我更喜欢 Azure Devops 进行部署,而不是目前的任何其他产品,因为 Release Pipeline 易于使用,产品所有者或项目经理可以批准和控制何时在不同环境中进行部署。此外,这些批准者可以免费获得“利益相关者”许可证。即使 GitHub 操作通过此功能毕业,我仍然必须向用户颁发企业许可证。

我宁愿为 Azure 静态 Web 应用程序 (SWA) 提供一个工作流,就像我为其他所有事情做的那样:

  1. 将代码推送到 GitHub 存储库中的“主”分支
  2. Azure Devops CI Pipeline 启动构建
  3. 构建 Angular 前端代码并将其保存到目录$(Build.ArtifactStagingDirectory)/web
  4. 构建dotnet函数后端代码并保存到目录$(Build.ArtifactStagingDirectory)/api
  5. 发布可用于发布管道的构建工件
  6. 发布管道 (CD) SWA 步骤将获取工件并将它们部署到 Azure SWA 环境

我知道 Azure DevOps 中的 SWA 发布步骤仍处于 0.X 版中,并且注意到它会随着时间的推移而发展。让我描述一下我的经历以及它是如何演变的:

  1. 大约一个月前,由于 Azure SWA 令牌不可用,它无法工作
  2. 这个问题已经解决了,我注意到它只能在 Linux 主机上运行(没什么大不了的)
  3. 运行 SWA 步骤的 docker 容器会出现以下错误:

泊坞窗:来自守护进程的错误响应:OCI 运行时创建失败:安装无效 {Destination::/working_dir Type:bind Source:/var/lib/docker/volumes/3b6743ba34608e986186d5057ae6cd4ed36a773d5ca9c9f2cb5fa8894f411c6d/_data 选项:[rbind]}:安装目标:/working_dir not绝对:未知。

  1. 要解决此问题,只需使用此代码在 SWA 步骤之前添加一个 Bash 步骤:(在此处归功于 Claire Novotny:https ://github.com/microsoft/azure-pipelines-tasks/pull/14807#issuecomment-868593099 )
  1. 我认为最后一个问题是Microsoft Oryx(发布管道中 SWA 步骤背后的构建引擎)想要构建api 或识别已编译的语言。无论我做什么,我都无法让 Oryx 识别它是一个 dotnet 项目,并且它默认为节点:

Oryx 无法确定构建步骤。继续假设此文件夹中的资产已构建。如果这是意外行为,请联系支持人员。

无法检测到函数语言。语言将默认为节点。

这里有 Oryx 的文档:https ://github.com/microsoft/Oryx/blob/master/doc/configuration.md#oryx-configuration确实指出了 Oryx 可以被告知它是什么项目类型的可能性(在我的案例 dotnet)查看PLATFORM_NAMEPLATFORM_VERSION设置。我假设我将它放在发布管道的“ Api Build Command ”字段中,看起来 Oryx 识别它,但仍然想要识别模式并默认返回节点。

我现在的解决方法是不在 CI 管道中构建 dotnet 函数应用程序,而是让 Oryx 每次我需要它作为 CD 管道的一部分部署到环境时构建它。这打破了我通过任何其他 Azure 资源部署实现的持续交付的“一次构建,随处部署”原则,并且想知道如何让 Oryx 不构建它,而是重用已经构建和编译的工件。

0 投票
0 回答
97 浏览

azure - 如何使用 GitHub 工作流操作将多个分支部署到 Azure 静态 Web 应用程序?

main一旦我们将 Azure 静态 Web 应用程序连接到 GitHub 上的代码,就会在为分支(又名)发出拉取请求时自动创建暂存环境master。那部分工作正常。

但是,当为不同的分支发出拉取请求时,我想创建登台环境。这是用于该工作流的分支方案的基本思想:

  • main: 生产
  • dev: 暂存/集成环境
  • feature-[XYZ]: 新的功能

dev因此,例如,当为分支发出拉取请求时,我想在我的 Azure 静态 Web 应用程序中创建一个暂存环境。

我还没有找到如何做到这一点的例子。我尝试的一件事是dev在工作流操作文件的分支列表中添加分支,如下所示:

虽然该更改确实为分支创建了到我的 Azure 静态 Web 应用程序的部署dev,但它也使我的main分支部署使用了dev分支的代码。

显示 Azure 环境结果的屏幕截图

Azure 概述页面还确认它现在使用该dev分支进行生产:

Azure 概述页面

实现我的目标的正确方法是什么?

0 投票
0 回答
112 浏览

aurelia - 使用纱线时 Oryx 构建失败

我有一个静态的 azure web 应用程序,其中包含一个使用 aurelia 框架的 SPA 构建和一个使用 .net 3.1 的 api 构建。使用了纱线包管理器。构建运行正常,直到几天前我发现在进行推送时,github 上的 CI 开始失败,并出现错误,表明 yarn 包管理器无法从 git 获取依赖项:

我找不到与此问题直接相关的信息。所以,我可以通过更改为 npm 包管理器来解决这个问题,现在它可以正常工作了。

0 投票
1 回答
75 浏览

deep-linking - 将 apple-app-site-association 文件与 azure static-web-app 一起使用

我正在使用 Azure 静态 Web 应用程序来托管网站。我想在后端托管苹果文件以进行深度链接。我遇到了这个问题,但是苹果文档要求上传文件时没有扩展名。我试图通过路由规则、通用标头和扩展规则将内容类型/mime 方法覆盖为“application/json”。使用内容类型“application/octet-stream”检索此文件似乎没有任何改变。任何关于如何让这两种实现协同工作的指导都会令人惊叹。先感谢您。

0 投票
1 回答
89 浏览

authentication - 在对 Azure 静态网站进行身份验证时检索组

我创建了一个 Azure 静态网站,并按照有关如何添加基本 Azure 身份验证身份提供程序的说明进行操作。

我有一个自定义身份验证部分:

在此处输入图像描述

我已将组添加到 ID 令牌:

在此处输入图像描述

我正在努力解决如何告诉身份验证过程将组详细信息包含在通过发出 http 请求以/.auth/me遵循成功身份验证返回的声明中

0 投票
0 回答
520 浏览

azure - 对 Azure 静态 Web 应用程序进行身份验证时出现 404 错误

我在 Azure 中创建了一个静态 Web 应用程序。这只是一个只有 HTML 页面的普通网站。我能够部署和访问该应用程序。

问题是当我尝试将 Azure Active Directory 与此服务集成时。我的 staticwebapp.config.json 如下。

在此之后,当我尝试访问任何页面时,它会被重定向到 /login 并且我得到一个 404 页面。我希望它会转到 azure 身份验证页面(由于重定向规则)。对静态 Web 应用程序进行身份验证是否需要进行任何其他配置?

0 投票
0 回答
205 浏览

azure-functions - Securing Azure Function API with Blazor WASM Static Web App using Google Authentication

I'm working on a Blazor WASM app, and have managed to get it working as a Static Web App using Google authentication (we do not want to use any other type of auth). I am using Bring Your Own Functions as well for my Azure Function API.

The way it works, is that once a user logs in using their Google account, my app takes their email, and compares it to a list of "registered users" in a database to determine the role of the user. I then use a custom account factory to add these roles, and this allows me to show/hide various elements of my WASM app depending on the roles of the currently logged in user. All of this works both in dev and once I publish the Static Web App to Azure.

The challenge is that I cannot seem to secure the API, it's completely open at the moment but I want it to only be available for certain roles. I've done a tonne of research on the internet, but everything seems fairly out of date (I'm using NET 5.0, since Static Web Apps don't seem to support NET 6.0 preview yet). So far I've got the following options:

  1. Use EasyAuth instead, and secure the API using routes in staticwebapp.config.json. This sorts out my API authorisation issue completely, but the .auth/me endpoint only gives me the user's email address (not all the other Google profile info that I currently get using the OIDC authorization flow). I also need to add the relevant roles from the database so they are emitted when calling the API.

  2. Pass the Google access token to the HTTP request via AddHttpMessageHandler(), which seems to work as I see a "Bearer XXX" in the authorisation header, but I'm not sure how to get my Azure Function API to consume it. Also - this doesn't take care of the roles requirement, somehow I need to get the user info from the token as well.

Which of the above two makes more sense or am I missing a more obvious third option?

Please note that the users and roles need to be added via the app, not via the Azure portal, hence why I'm using a database to store the email addresses and roles.

My WASM code is as follows:

#xA;

CustomAccountFactory.cs

#xA;