angular - Azure 静态 Web 应用中的 Angular PWA

Question

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

我试图修改routes.json文件：

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

但没有成功。

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

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

PWA 是可安装的。

演示项目在那里。

谢谢。

Answer 1

当我们将任何应用程序配置为 Azure 静态 Web 应用程序时，它会npm run build用作构建应用程序的默认命令。现在，对于 Angular 应用程序，它使用内部运行的相同命令ng build。但这里的问题是它没有在 prod 模式下运行。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

Answer 2

这对我有用：我尝试在管道变量 $deployment_token 中添加一个变量名称，这是 Azure 门户中 Azure 静态 Web 应用程序中的部署令牌。然后我创建了一个管道来使用这样的角度代码：

trigger:
- master

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '14.x'
  displayName: 'Install Node.js'

- task: AzureStaticWebApp@0
  inputs:
      app_location: "/" 
      Routes Location:"add the address of routes.json"
      app_build_command: "npm install -g @angular/cli&& npm install && ng build --prod"
       output_location: "dist"
   env:
       azure_static_web_apps_api_token: $(deployment_token)