带有 Azure 应用服务的 Angular Universal 无法工作

Question

我创建了一个 Angular 通用应用程序，该应用程序在本地运行良好，但是当我尝试将其部署到 Azure 应用服务中时，它部署成功，但未运行该应用程序。收到 403 禁止。

`# Node.js 与 Angular

触发：

• 发展

泳池： vmImage：“ubuntu-最新”

阶段：

• 阶段：构建 显示名称：构建阶段 职位：

  • 工作：建造 水池： vmImage：“ubuntu-最新” 脚步：

    • 任务：NodeTool@0 输入： 版本规格：“18.x” 显示名称：“安装 Node.js 18.x”

    • 脚本： | 光盘应用程序/ npm install -g @angular/cli npm install --legacy-peer-deps npm 运行构建：dev：ssr

      显示名称：“npm 安装和构建” 工作目录：“$(Build.SourcesDirectory)”

    • 任务：复制文件@2 输入： SourceFolder：“$(Build.SourcesDirectory)/dist/app/browser” TargetFolder：“$(Build.ArtifactStagingDirectory)/dist/app” displayName：“将 dist 浏览器文件夹复制到工件暂存目录”

    • 任务：复制文件@2 输入： SourceFolder：“$(Build.SourcesDirectory)/dist/app/server” 内容：main.js TargetFolder：“$(Build.ArtifactStagingDirectory)/dist/app” displayName: "将 main.js 复制到工件暂存目录"

    • 任务：PublishTestResults@2 条件：成功或失败() 输入： 测试结果格式：“JUnit” 测试结果文件：“**/TESTS-*.xml” displayName: "发布单元测试结果"

    • 任务：ArchiveFiles@2 显示名称：“存档文件” 输入： rootFolderOrFile: "$(System.DefaultWorkingDirectory)" 包含根文件夹：假 存档类型：zip 存档文件：$(Build.ArtifactStagingDirectory)/drop.zip 替换现有存档：true

    • 任务：PublishBuildArtifacts@1 输入： 发布路径：“$(Build.ArtifactStagingDirectory)/drop.zip” 神器名称：“掉落” 发布位置：“容器”

• 阶段：发展 displayName：“部署到开发” 取决于：构建 条件：成功() 职位：

  • 部署：部署开发 水池： vmImage：“ubuntu-最新” 环境： 开发 战略： 运行一次： 部署： 脚步： - 任务：AzureWebApp@1 显示名称：“部署应用服务” 输入： azure订阅：“xxxxxxxxxxx” 应用程序名称：“应用程序” 包：“$(Pipeline.Workspace)/drop/drop.zip” 运行时堆栈：“节点|16-lts” `

这是我的 pipline，甚至尝试在 azure 应用程序服务中使用 FTP 服务器进行手动部署，但似乎没有任何效果。** 我认为问题出在 dist 目录结构上。如果有人可以提供帮助，那就太好了。**

Answer 1

我像这样修改了我的Azure应用程序服务文件夹结构

• wwwroot
  • 浏览器文件夹
    • 浏览器内容
  • 服务器内容
  • 网络配置

这是我的网络配置

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <webSocket enabled="false" />
        <handlers>
            <add name="iisnode" path="main.js" verb="*" modules="iisnode"/>
        </handlers>
        <rewrite>
            <rules>
                <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
                    <match url="^main.js\/debug[\/]?" />
                </rule>
                <rule name="StaticContent">
                    <action type="Rewrite" url="public{REQUEST_URI}"/>
                </rule>
                <rule name="DynamicContent">
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
                    </conditions>
                    <action type="Rewrite" url="main.js"/>
                </rule>
                <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>
        <security>
            <requestFiltering>
                <hiddenSegments>
                    <remove segment="bin"/>
                </hiddenSegments>
            </requestFiltering>
        </security>
        <httpErrors existingResponse="PassThrough" />
    </system.webServer>
</configuration>