Deployed Angular on Azure 在所有路由上给出 404

Question

我一整天都在尝试为 CI 获取我的 dev.azure 管道并为 Angular 前端应用程序运行ning 获取 CD，但最终没有任何效果。 .

我目前处于以下状态：

我有一个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/ I get redirected to https://mySecretSubdomain.azurewebsites.net/home 并看到一个空白页面（在源代码中我看到它返回了我的 index.html）。

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

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

angular.json包含以下部分：

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

我搜索了所有可能的选项，但没有找到任何有用的信息。有什么想法吗？

编辑 14/09/2020 - 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) 中，管道中的步骤和我一样多。所以，我相应地更新了我的管道，我会及时通知你。

Answer 1

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

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

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

Deployed Angular on Azure 在所有路由上给出 404

Deployed Angular on Azure gives 404 on all routes

azure-deployment

azure-devops

azure-pipelines

angular

azure-appservice

编辑 14/09/2020 - 1:

编辑 14/09/2020 - 2: