使用 Azure Devops 的 Angular 部署不加载 - 显示“嘿节点开发人员！”页

Question

我正在尝试将 Angular 应用程序部署到 Azure，部署似乎有效，工件看起来正确，但是当我访问网站时，我看到了默认的 Azure“嘿节点开发人员”页面。见 (http://testss-123.azurewebsites.net/)

我的构建管道如下：

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'
  workingDirectory: '$(Build.SourcesDirectory)'

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.SourcesDirectory)/dist'
    includeRootFolder: true
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true

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

我的部署管道是默认的“将 Node.js 应用部署到 Azure 应用服务” see here

我已经尝试过使用实际应用程序以及构建的默认应用程序购买“ng new”

Answer 1

我无法解决这个问题，但作为一种解决方法，我将应用程序部署在 docker 容器中，并使用以下 dockerfile

FROM node:latest AS node

WORKDIR /app

COPY . .

RUN npm install && \
    npm run build-prod

FROM nginx:alpine
COPY --from=node /app/dist/superselection/nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=node /app/dist/* /usr/share/nginx/html

我的 src 文件夹中的以下 nginx conf 文件：

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

最后是以下构建管道：

pool:
  name: Azure Pipelines
steps:
- task: Docker@0
  displayName: 'Build an image'
  inputs:
    azureSubscription: XXXXXXXX
    azureContainerRegistry: XXXXXXXX
    defaultContext: false
    context: '$(System.DefaultWorkingDirectory)'

- task: Docker@0
  displayName: 'Push an image'
  inputs:
    azureSubscription: XXXXXXXX
    azureContainerRegistry: XXXXXXXX
    action: 'Push an image'

Answer 2

默认情况下，您的 Azure WebApp 在 IIS 实例上运行。如果你想处理 Html5 模式（没有 hashbang），那么你必须创建一个 Web.Config 文件并定义一个重写。

<configuration>
   <system.webServer>
      <defaultDocument enabled="true">
         <files>
            <add value="index.html" />
         </files>
      </defaultDocument>
   </system.webServer>
</configuration>

Answer 3

如果您登录http://testss-123.scm.azurewebsites.net/。您可能会发现您的代码已部署到文件夹site/wwwroot/dist/yourapp，安装site/wwwroot。这可能会导致此问题。

您可以如下修改您的 archiveFiles 任务。将 rootFolderOrFile 指向 dist 文件夹下的 app-name 文件夹。并将 includeRootFolder 设置为 false。

以便输出 zip 文件仅包含您可以部署的代码。

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.SourcesDirectory)/dist/<yourapp>'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true