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

i86rm4rw  于 2023-10-22  发布在  Angular
关注(0)|答案(1)|浏览(172)

我正在尝试从Azure DevOps Pipelines将Angular [v16.2] Universal(SSR)应用部署到Azure App Service。为了简单起见,我现在都在构建管道中完成。
这是我的管道,构建和部署应用程序。

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中的文件夹结构如下所示(' Jmeter 板'是应用程序的名称):
公司简介
|--> dist/
|-------> server.ts
|-------> Dashboard/
|-----------> browser/
|-----------> server/
当我尝试访问该页面时,我看到"You do not have permission to view this directory or page."

p8ekf7hl

p8ekf7hl1#

根据YAML示例,Web应用程序可以是Windows Azure Web应用程序。应用程序文件夹位于wwwroot/dist文件夹下。
在这种情况下,您可以在Azure Web App ->配置->路径Map中更新虚拟应用和目录
您可以将虚拟路径保留为**/,并将物理路径更改为site/wwwroot/appname**(例如:site/wwwroot/dist/Dashboard)。
举例来说:

相关问题