Azure静态Web应用中的角度PWA

问题描述

是否有人有经验在新的Azure资源Static Web Apps中托管Angular PWA应用程序？

我试图修改routes.json文件：

{
    "routes": [
        {
            "route": "/*","serve": "/index.html","statusCode": 200
        }
    ],"mimeTypes": {
        "json": "application/json","webmanifest": "application/json"
    }
}

但没有成功。

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

<staticContent>
  <mimeMap fileExtension="webmanifest" mimeType="application/json" />  
  <mimeMap fileExtension="json" mimeType="application/json" />           
</staticContent>

可安装PWA。

Demo project is there.

谢谢。

解决方法

当我们将任何应用程序配置为Azure静态Web应用程序时，它将使用npm run build作为构建应用程序的默认命令。现在，对于Angular应用程序，它使用内部运行ng build的相同命令。但是这里的问题是它不能在生产模式下运行。因此，我们可以通过在工作流文件中添加app_build_command并使用npm run build -- --prod作为其值来配置自定义构建命令。

app_build_command: "npm run build -- --prod"

以下是一些有用的链接：

https://docs.microsoft.com/en-us/azure/static-web-apps/front-end-frameworks https://docs.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow#custom-build-commands