使用 Azure Devops 的 Angular 部署无法加载 -- 显示"hey node developers!"页面

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应用程序服务"参见此处

我已经在一个实际的应用程序中尝试过这一点，也在默认的应用程序构建中尝试过购买"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。配置文件并定义重写。

<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文件夹下的应用程序名称。并将includeRootFolder设置为false。

以便输出zip文件只包含准备部署的代码。

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