使用Bicep部署Angular应用持续出现403禁止访问问题求助

结合你提供的Bicep配置和流水线任务，以下是针对性的排查和修复步骤：

1. 修正流水线任务的App类型配置 #

你的Web App是Windows环境（main.bicep中isLinux: false），但流水线任务里appType设为了'Web App On Linux'，这会导致部署逻辑不匹配，直接修改为Windows类型：

- task: AzureRmWebAppDeployment@4
  displayName: 'Deploy Web App'
  inputs:
    azureSubscription: $(serviceConnectionName)
    ResourceGroupName: $(tenant)
    appType: 'Web App' # 改为Windows类型的Web App
    WebAppName: $(webAppName)
    packageForLinux: '$(Pipeline.Workspace)/web-ci/drop/publish/publish.zip'
    enableCustomDeployment: true
    ExcludeFilesFromAppDataFlag: false
    # 静态Angular应用无需npm start，暂时注释或删除该行
    # startUpCommand: 'npm start'

2. 调整Angular部署产物与启动方式 #

Angular生产环境应为静态构建产物（dist目录），而非通过npm start启动开发服务器：

• 确保CI阶段执行ng build --prod（或ng build --configuration production）生成dist目录
• 打包部署包时，直接将dist目录内的文件（而非dist文件夹本身）压缩为zip，确保解压后根目录直接包含index.html、assets等文件

3. 添加Windows IIS的SPA路由重写配置 #

Angular单页应用刷新页面时出现403，是因为IIS无法识别SPA路由，需在部署根目录添加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>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
  </system.webServer>
</configuration>

将此文件放入Angular项目的src目录，修改angular.json确保构建时复制到dist目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/web.config" // 添加该行
]

4. 修正Bicep中的Windows Runtime格式 #

Windows App Service的windowsFxVersion格式要求为NODE|版本号（竖线分隔），而非你当前使用的冒号格式，修改main.bicep的runtime参数：

module webAppService 'modules/appService.bicep' = {
  name: webAppServiceName
  params: {
    location: defaultLocation
    uniqPrefix: webAppServiceName
    runtime: 'NODE|18LTS' // 把冒号改成竖线
    isLinux: false
    isStandalone: false
    parentPlanId: apiAppService.outputs.appServicePlanId
  }
}

5. 在Bicep中配置默认文档 #

确保Windows App Service优先加载index.html，修改appService.bicep的Windows siteConfig：

var siteConfig = isLinux ? {
  linuxFxVersion: runtime
} : {
  windowsFxVersion: runtime
  netFrameworkVersion: 'v6.0'
  defaultDocuments: [ // 添加默认文档列表
    'index.html'
    'index.htm'
  ]
}

完成以上修改后重新部署应用，403问题应该能解决。如果仍有问题，可查看App Service的日志流（Log Stream）获取具体错误信息进一步排查。

内容的提问来源于stack exchange，提问作者Tamer Berat Çelik