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

有没有人有在新的 Azure 资源静态 Web 应用程序中托管 Angular PWA 应用程序的经验？

我试图修改routes.json文件：

但没有成功。

当我将相同的应用程序部署到 Azure Web App 时web.config

PWA 是可安装的。

演示项目在那里。

谢谢。

作为我们发布管道的一部分，我们部署到 Azure blob 存储（静态网站）。因此，每次发布管道运行时，它都会使用创建的新构建工件覆盖 blob 存储的内容，并且我们会看到最新的更改。

对于调试和内部测试，我们要求每个部署而不是覆盖 blob 存储的现有内容，而是创建一个版本。

因此，如果开发人员检查他们对 master 的更改并生成新的工件，它将被部署到https://abc.z22.web.core.windows.net/1。下次将新更改签入到 master 时，它会在 - https://abc.z22.web.core.windows.net/2创建一个新版本。

最近添加的 blob 存储中有版本控制，但您必须手动进入 blob 存储并将版本标记为当前版本。

有没有办法做到这一点？任何其他 Azure 产品可以帮助解决这个问题？

我正在尝试将 Next.js 静态 Web 应用程序部署到 Azure，该应用程序将无服务器功能用于 API 路由（Auth、SSR 等）。我遵循了本指南：https ://docs.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs 。有一个将 API 添加到 Azure SWA 的一般指南，但我无法将其应用于我的 Next.js 应用程序。

Next.js 有一个配置选项，用于将无服务器应用程序设置为构建目标。

我想我基本上需要的是一个构建后步骤，可以将 api 函数的构建输出转换为 Azure 可以理解的格式。这将在 GitHub Action 构建和部署步骤中运行。

有一个为 Netlify 执行此操作的节点模块，https://github.com/netlify/next-on-netlify但构建输出与 Azure 不直接兼容。AWS Serverless也有这个。

有没有人在 Azure 上进行过这种设置？

我试图在 Azure 上测试不同的东西，我试图设置一个静态 webapp。github 存储库实际上什么都没有。

这些文件几乎是空的。每当我将某些东西推送到仓库时，构建都会触发，但会因错误而失败Oryx built the app folder but was unable to determine the location of the app artifacts. Please specify the app artifact location through the Github workflow file.

我不确定它对文物意味着什么。这个小小的 webapp 没有任何真正的构建或任何东西在azure-static-web-apps-xxxxxx-xxxx-xxxxxxx.yml文件中 app_artifact_location 是“”

不太确定它在寻找哪些文物，或者它们到底是什么。

我正在开发一个带有 React 的 SPA，它作为 Azure 静态 Web 应用程序托管。该应用程序受到 Azure AD 身份验证的保护，效果很好，我已经构建了一个运行良好的登录，我可以使用我获得的令牌调用 Azure (Graph) API 并检索授予范围的信息（例如用户个人资料图片）。为此，我使用了一个名为React AAD MSAL的包装器，它巧妙地包装了 Microsoft 身份验证库 (msal@1.4.0)。

到目前为止一切顺利，这里没有问题。但我当然需要一个后端。我决定使用 Azure Functions，因为无服务器对我来说是最好的方式。因此，我制作了一个快速 HTTP 触发原型，该原型在 Azure 中运行，当我使用正确的参数调用 URL 时，Azure Function und 可以正常工作。

但是当然 Azure Function 需要被保护，所以只有我的 React App 可以调用这个函数。所以我认为应该有办法通过 Azure AD 来做到这一点，因为我的用户已经这样登录了。

我尝试并尝试了我在网上找到的不同方法，但它们似乎都不起作用，或者我做错了什么。

我尝试遵循的一般教程是来自MS 本身的教程。我尝试使用“Express”设置，这当然不起作用。我尝试了高级配置，但也没有用。高级教程说您需要为该服务注册一个应用程序，我什至不确定这是否可以是我的静态 Web 应用程序或新的（我都尝试过但没有成功）。告诉 Azure 函数它现在受 AAD 保护并且只能接受来自由包含我的应用程序的应用程序 ID（在设置中提供）的访问令牌保护的源的调用还不够吗？您可以轻松提供所有这些设置，但它似乎不起作用。

所以我很早就在这里停滞不前。要调用函数本身，我首先需要获取一个授权令牌。根据MS 的本教程（请参阅“验证来自提供商的令牌”），我需要将登录到我的 SPA Web 应用程序时获得的访问令牌发送到以.auth/login/aad. 获取这个令牌很容易，因为 React AAD MSAL 提供了一种authProvider.getAccessToken()我可以用来提取它的方法。https://<My Azure Function URI>/.auth/login/aad然后，我使用正文中的访问令牌作为 JSON发出 POST 请求{ 'access_token': authToken.accessToken }。我应该得到一个身份验证令牌，然后我可以用它来调用实际的函数，但无论我尝试什么，我总是得到相同的响应：You do not have permission to view this directory or page.

所以这就是我所在的地方。我尝试了不同的方法和解决方案，但发现无济于事。也许我从头开始做错了什么，也许我使用了错误的方法，我现在真的不知道。这个事情谁有经验？我的一般方法有问题吗，我需要做其他事情吗？还是只是我需要更改的配置中的某些内容？

编辑

既然有人问了，这就是我检索令牌的方式。这背后的概念是使用 aredux-thunk将异步操作分派到 react-redux 存储。我不仅在这里简化了这个问题，还简化了我的测试。现在我只是想获取身份验证令牌并记录 POST 请求给我的答案：

这authProvider是一个组件，react-aad msal配置如下所示：

编辑 2

我调整了一些额外的设置，试图与用户模拟一起工作，但仍然没有成功。下面是对我当前重要的 Azure 设置的概述（我忘记了吗？）。

蔚蓝功能：

身份验证已激活，仅 AAD 身份验证，高级设置：

Azure 功能 - 应用注册：

身份验证设置：

客户端密码：

公开 API - 公开 user_impersonation API，以便 Web 应用可以使用它：

Azure 静态 Web 应用 (React SPA) - 应用注册：

在 Azure 函数中用作令牌受众的应用程序 URI ID（高级身份验证设置）：

API 权限 - 使用 Azure Function App Registration 公开的 user_impersonation API：

这个配置有什么问题吗？很可能是，但我不知道是什么，因为我按照 MSDN 上的教程进行操作。之后我只添加了 user_impersonation，因为它不起作用。

在我作为静态 Web 应用程序托管在 Azure 上的 React 应用程序中，我使用 MSAL 库进行身份验证。为了创建一个新的 Msal.UserAgentApplication，我需要传递一个配置对象 - 特别是包含 redirectUri。就像是：

我想知道：如何使用相对重定向 url，而不是绝对的？

我要解决的具体问题如下：当我在本地启动和测试应用程序时，我想重定向到localhost:3000/start而不是www.example.org/start。到目前为止，我还没有找到比在每次运行/部署之前切换配置文件更好的方法，但这很烦人，当然很容易忘记......

我不确定我是否正确执行此操作，但我想要的是在 Azure 的静态 Web 应用程序中向我的应用程序添加自定义域。不幸的是，在静态应用程序中，它只接受开头带有 www 的自定义域（假设我购买的域是www.myperson.com），我正在寻找的是如何将根域添加到它。

我试图研究，我所做的是在我的 DNS 主机站点上创建了一堆 CNAME。我创建的第一个 CNAME 是

之后我创建了另一个 CNAME

但是在我创建的静态 Web 应用程序的 Azure 端，它不验证 url myperson.com 并且仍然只接受www.myperson.com

请告知我接下来应该尝试什么。谢谢

我正在尝试使用 Azure AD 和 MSAL 对使用 Azure 静态 Web 应用程序创建和公开的 Azure 函数进行身份验证和授权。如果我将应用程序配置为使用较旧的 AAD v1 流而不是 MSAL，则用户可以成功访问 API。设置/用例：

• 使用基本 HTML 和 JS 作为 Azure 静态 Web 应用程序部署和托管的单页应用程序 (SPA)（这是一个演示“Hello World”应用程序）
• 该应用程序使用 MSAL 集成了身份验证。特别是 msal-browser.js版本 2.6.1。使用以下方式检索身份令牌：

其中 msalConfig 包含：

• 用户通过身份验证并返回身份令牌。

• 静态 Web 应用程序公开了一个示例函数GetMessage，它返回一些虚拟文本

• 如果到函数的路由不受保护，SPA 可以成功调用函数并将文本返回到浏览器/SPA

• 如果到函数的路由通过routes.json保护，则对函数的请求（正确）返回 401，除非用户经过身份验证和授权。

为了通过 MSAL 对用户进行身份验证，我尝试检索放入函数调用的 Bearer 标头的访问令牌：

在 jwt.ms 中检索并验证令牌，但该函数始终返回 403 - 禁止。如果更改范围或用户角色似乎没有什么区别，尽管我可能缺少一个神奇的组合。

如果我调用的函数是 Micrsoft Graph（即https://graph.microsoft.com/v1.0/me ），则此过程完美运行——它仅在我们自己的静态 Web 应用程序功能上失败。我看不到访问 Azure 服务器端日志的方法，以了解它可能失败的原因。

使用 AAD v1 流程，即调用 http://APP_URL/.auth/login/aad 可以完美运行 - 但它不使用访问令牌。它使用一个名为 StaticWebAppsAuthCookie 的 Cookie（对 APP_URL/.auth/login/aad 的一次调用就足以对用户进行身份验证和授权）。可以在这里找到一个例子

我知道 MSAL 是 Azure AD 正在走向的流程，那么有没有办法通过 MSAL 流程授权用户？专门使用 Azure AD、静态 Web 应用和在静态 Web 应用中公开的函数（不是作为独立的 Azure Function 应用）。

我正在构建一个使用关键 css 提取插件的 vue/gridsome 应用程序。这一切都在本地运行良好，但我正在努力构建 github 操作。

我已经搜索了解决方案，似乎缺少 linux / unbuntu 依赖项，所以我尝试将它们添加到我的 yml 工作流程中：https ://medium.com/@cloverinks/how-to-fix-puppetteer-error- ibx11-xcb-so-1-on-ubuntu-152c336368

它仍然失败，我错过了一步还是 azure static web 应用程序和 github 操作有限制？

谢谢

我们正在尝试设置一个将我们的软件部署到 Azure 的 Github Action。我们的软件不支持多租户，因此我们将软件的副本部署到每个租户的新 Azure 资源组中。到目前为止，这没有问题。我们的 Github Action 有一个事件输入，我们可以在其中提供资源组名称，然后它可以从那里部署到该资源组。

但是，对于静态 Web 应用程序，Azure API 令牌是在黑盒后面生成的，部署过程也是如此。我不希望我们要部署到的每个租户都有一个 Github Action 工作流和存储库密码。

在我看来，自动生成的秘密可能以某种方式指定了要部署到哪个资源组，因为我认为“Azure/static-web-apps-deploy@v0.0.1-preview”Github Action 没有其他方法可以知道在哪里它要部署到。

Azure 门户会自动创建此秘密令牌并使用如下名称添加它：AZURE_STATIC_WEB_APPS_API_TOKEN_LEMON_WAVE_00AD12A10

显然有一种方法可以创建这个令牌，但有没有在任何地方讨论或概述过？

理想情况下，我能够根据需要创建该令牌并​​使用Azure 静态 Web 应用程序将Github 操作部署到我需要的任何资源组中执行手动部署，而无需复制工作流和 github 机密。

该服务本身看起来很棒，就像是对 Azure 存储静态 Web 应用程序的明显升级。但当前的部署选项很糟糕 - 为什么只从特定的 github 存储库和特定的 Azure 资源组？为什么不公开根据需要部署到任何地方的能力？

有任何想法吗？