时间戳

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

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

问题描述

我正在尝试将 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 应用服务”， 请参见此处

我已经用一个实际的应用程序试过这个，也用默认的应用程序构建购买“ng new”

标签： node.jsangularazureazure-devopsdevops

解决方案

我无法解决这个问题，但是作为一种解决方法，我将应用程序部署在 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'

推荐阅读