angular - 如何在 Azure 应用服务上部署 Angular SSR

Question

我正在尝试从 Azure DevOps Pipelines 将 Angular [v16.2] 通用 (SSR) 应用部署到 Azure 应用服务。为简单起见，我目前正在构建管道中完成所有操作。

这是我的管道，用于构建和部署应用程序。

trigger:
- master

pool:
 vmImage: ubuntu-22.04

steps:


- task: NodeTool@0
  displayName: 'Use Node 18.17.0'
  inputs:
    versionSpec: 18.17.0

- task: Cache@2
  displayName: load npm cache
  inputs:
    key: npm | $(Agent.OS) | $(System.DefaultWorkingDirectory)/Dashboard/package-lock.json
    restoreKeys: |
        npm | "$(Agent.OS)"
    path: $(npm_config_cache)

- script: |
    npm install -g @angular/cli
  displayName: 'Install Angular CLI'
  workingDirectory: '$(Build.SourcesDirectory)/Dashboard'

- script: |
    npm install
  displayName: 'Resolve Dependencies'
  workingDirectory: '$(Build.SourcesDirectory)/Dashboard'

- script: |
    npm run build:ssr
  displayName: 'Production Build'
  workingDirectory: '$(Build.SourcesDirectory)/Dashboard'

- script: |
    dir
  displayName: List directory
  workingDirectory: '$(Build.SourcesDirectory)'

- script: |
    dir
  displayName: List directory
  workingDirectory: '$(Build.SourcesDirectory)/Dashboard'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/app/dist'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/Dashboard/dist'
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/app/dist'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/Dashboard'
    Contents: server.ts
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/app/dist'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)'
    Contents: prerender.js
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

- task: AzureRmWebAppDeployment@3
  displayName: 'Azure App Service Deploy'
  inputs:
    azureSubscription: 'Dashboard Deployment'
    appType: 'app'
    WebAppName: 'DashboardDFIDTest'
    Package: '$(Build.ArtifactStagingDirectory)/app'
    ConfigurationSettings: '-Handler iisnode -NodeStartFile server.ts -appType node'

管道完成后，KUDU 中的文件夹结构如下所示(“Dashboard”是应用程序的名称):

wwwroot/
|--> 分布/
|--------> server.ts
|--------> 仪表板/
|------------> 浏览器/
|------------> 服务器/

当我尝试访问该页面时，我看到“您无权查看此目录或页面。”

Answer 1

根据您的 YAML 示例，Web 应用程序可以是 Windows Azure Web 应用程序。 app文件夹位于wwwroot/dist文件夹下。

在这种情况下，您可以在 Azure Web App -> 配置 -> 路径映射中更新虚拟应用程序和目录。

您可以将虚拟路径保留为/，并将物理路径更改为site/wwwroot/appname (例如 site/wwwroot/dist/Dashboard)。

例如: