如何通过Azure CI/CD流水线将Ember.js应用正确部署到Azure App Service

问题根因 #

• 缺少Ember项目的编译构建步骤：Ember是前端单页应用，npm install 安装依赖后需要执行编译命令生成可直接部署的静态产物，你当前的构建流水线只安装了依赖，没有执行编译，打包的是完整源码而非可运行的站点文件
• Node版本不兼容：构建环节使用Node 6.x，和你App Service配置的Node 14版本差异过大，新版Ember.js完全不支持Node 6.x，会导致编译失败或产物异常
• 打包目录错误：你打包了整个工作区根目录，而非编译后生成的静态产物目录（默认是dist），导致部署到App Service的文件根本不是可访问的站点内容
• 发布配置错误：你将静态前端应用按Node.js服务端应用配置，指定了启动文件server.js，但Ember编译后是纯静态文件，不存在server.js启动文件，所以访问时会出现空白Node默认页
• 运行时配置冲突：App Service运行栈是Node14，但你在部署配置里又指定了WEBSITE_NODE_DEFAULT_VERSION为6.9.1，版本冲突会导致运行异常

修复步骤 #

1. 修改构建流水线YAML #

替换原有构建配置为以下内容：

trigger:
- master

pool:
  vmImage: ubuntu-latest

steps:
# 统一Node版本为和App Service一致的14.x
- task: NodeTool@0
  inputs:
    versionSpec: '14.x'
    checkLatest: true

# 安装依赖
- task: Npm@1
  inputs:
    command: 'install'
    workingDir: 'app/'

# 新增：执行Ember编译，生成dist静态产物
- task: Npm@1
  inputs:
    command: 'custom'
    workingDir: 'app/'
    customCommand: 'run build' # 对应package.json里的build命令，默认Ember项目就是ember build --environment production

# 修改：只打包编译后的dist目录，不包含根文件夹
- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: 'app/dist'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

2. 修改发布流水线配置 #

替换原有部署YAML为以下内容，移除Node服务端相关配置：

steps:
- task: AzureRmWebAppDeployment@4
  displayName: 'Deploy Azure App Service'
  inputs:
    azureSubscription: '$(Parameters.ConnectedServiceName)'
    appType: '$(Parameters.WebAppKind)'
    WebAppName: '$(Parameters.WebAppName)'
    RuntimeStack: 'NODE|14-lts'
    # 新增静态文件托管启动命令
    StartupCommand: 'npx serve -s'
    # 移除Node服务端相关的WebConfig配置和版本指定
    WebConfigParameters: ''
    AppSettings: ''

3. 可选优化 #

如果不想用serve托管，也可以直接将Azure App Service调整为静态站点托管模式，无需Node运行时，性能更好配置更简单。

内容的提问来源于stack exchange，提问作者Erck