在Azure上部署Angular可在所有路由上提供404

如何解决在Azure上部署Angular可在所有路由上提供404

我整天试图为Angular Frontend应用程序运行CI和CD的dev.azure管道，但最终无济于事...

我目前处于以下状态：

我有一个web.config，内容如下：

<?xml version="1.0" encoding="UTF-8"?>

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

当我使用以下URL访问网站时：https://mySecretSubdomain.azurewebsites.net/，我被重定向到https://mySecretSubdomain.azurewebsites.net/home并看到一个空白页（在源中，我看到它返回了我的index.html）。

在这种情况下，预期的行为是：显示登录页面（当我使用Visual Studio Code在本地运行应用程序时会发生这种情况。）

我打开了在Azure应用服务中发现的所有地方的日志记录。在https://mySecretSubdomain.scm.azurewebsites.net/下的DetailedErrors文件夹中，我得到了以下信息：我的请求实际上导致了HTTP 404-找不到错误。并且在错误描述的请求的URL标记中，它显示值：https://mySecretSubdomain:80/home（请注意：https是有意义的，端口80没有意义，并且我错过了URL中的.azurewebsites.net部分）。

angular.json包含以下部分：

...
"options": {
    browserTarget": "my-SecretApp-name:build","host": "https://mySecretSubdomain.azurewebsites.net/","port": 443
}
...

我搜索了所有可能的选项，但没有找到任何可以帮助的内容。有想法吗？

编辑14/09/2020-1：1：

以下回答@Cece Dong-MSFT的评论：

• 请求的管道：

在Yaml中：

pool:
  name: Azure Pipelines
  demands: npm

steps:
- task: Npm@1
  displayName: 'npm install'
  inputs:
    verbose: false

- task: Npm@1
  displayName: 'npm run build'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build --prod'

- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: src
    includeRootFolder: false

- task: PublishBuildArtifacts@1
  displayName: 'Publish artifacts: drop'

• 我检查了KUDU，所有文件均已发布，并且可以在“站点”路径中找到。

• 我暂时没有时间遵循您的示例（我相信它可以工作），如果有必要，我可以在本周晚些时候进行测试。

编辑14/09/2020-2：

我刚刚意识到@Cece Dong-MSFT提到的教程（http://dot-net-box.blogspot.com/2020/01/deploy-angular-8-app-to-azure-with.html）中，与我相比，还有更多的步骤在进行中。因此，我会相应地更新我的管道，并随时通知您。

解决方法

问题是我没有创建正确的管道。

最后，以下管道配置起作用：

pool:
  name: Azure Pipelines
steps:
- task: NodeTool@0
  displayName: 'Use Node 13.x'
  inputs:
    versionSpec: 13.x

- task: Npm@1
  displayName: 'npm install angular cli'
  inputs:
    command: custom
    verbose: false
    customCommand: 'install -g @angular/cli'

- task: Npm@1
  displayName: 'npm install dependencies'
  inputs:
    command: custom
    verbose: false
    customCommand: 'install --no-package-lock'

- task: Npm@1
  displayName: 'npm run build'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build --prod'

- task: AzureRmWebAppDeployment@4
  displayName: 'Azure App Service Deploy: MyWebName'
  inputs:
    azureSubscription: 'MySubscription'
    WebAppName: MyWebName
    packageForLinux: 'dist/my-app-name'

非常感谢@Cece Dong-MSFT通过提及教程http://dot-net-box.blogspot.com/2020/01/deploy-angular-8-app-to-azure-with.html

为我指出了正确的方向