Question

我正在尝试将有角度的应用程序部署到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 App Service” see here

我已经尝试过使用实际的应用程序，也尝试过使用内置的默认应用程序购买“ ng new”

Answer 1

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

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

Answer 2

如果您登录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

Answer 3

我无法解决此问题，但是作为一种解决方法，我将应用程序部署在具有以下dockerfile的Docker容器中

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'

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

3 个答案: