Question

我有一个已设法转换为Angular Universal的应用程序（应客户要求）。我使用命令npm run serve:ssr运行我的应用程序，并将浏览器指向有效的http://localhost:4000。

现在我要部署。我已经运行npm run build:ssr，它创建了一个dist文件夹。 dist文件夹中没有“普通”角度文件。它相对稀疏，具有：

一个 server.js
一个浏览器文件夹
和一个服务器文件夹

如果我将这些文件通过ftp传送到我的azure站点（就像我以前使用普通的angular应用程序一样），那么它将不起作用。我收到错误消息：

您无权查看此目录或页面。

因此，我尝试使用VSTS设置CI，并遵循发现的一些步骤发布了角度通用性（尽管它们不是很清楚）。这是我的 yaml 文件：

queue:
  name: Hosted VS2017
  demands: npm

steps:
- task: NodeTool@0
  displayName: 'Use Node 8.x'
  inputs:
    versionSpec: 8.x

- task: Npm@1
  displayName: 'npm install'
  inputs:
    verbose: false

- task: Npm@1
  displayName: 'npm run'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build:ssr'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/app/dist'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/dist'
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/app/dist'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)'
    Contents: server.js
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/app/dist'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)'
    Contents: prerender.js
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

- task: AzureRmWebAppDeployment@3
  displayName: 'Azure App Service Deploy'
  inputs:
    azureSubscription: '<my subscription>'
    WebAppName: firstApplication
    DeployToSlotFlag: true
    ResourceGroupName: Temp
    SlotName: develop
    Package: '$(Build.ArtifactStagingDirectory)/app'
    ConfigurationSettings: '-Handler iisnode -NodeStartFile server.js -appType node'

我认为这是不对的。有人可以帮我吗？

Answer 1

我在另一篇文章中回答了这个问题，但我也会放在这里：

在花了很多时间之后，我将扩展Starians的答案。尽管它最终确实帮助我获得了成功，但是还是有一些信息丢失或不正确。因此，我将尝试逐步进行操作。

首先要注意的是，我没有更改任何文件来使其正常工作。如果您更改 webpack.server.config.js ，那么当您执行本地build:ssr时，它将在您的根应用程序文件夹中创建 server.js 。

因此，如果您使用的是天蓝色的视觉设计器，则可以按照以下步骤操作：

首先，连接到您的存储库并设置您要使用的分支
添加 Node Tool Installer 任务并将其设置为使用当前版本的节点
添加 npm 任务，并将 Command 设置为自定义；将命令和参数设置为install @angular/cli -g（将其命名为“ npm install angular cli”）
添加另一个 npm 任务，但保持安装状态（将其命名为“ npm install packages”）
添加命令行任务并将脚本设置为npm run build:ssr（将其命名为“ build the project”）
添加复制文件任务，将 Source文件夹设置为$(Build.SourcesDirectory)/dist，将 Contents 设置为**， 目标文件夹到$(Build.ArtifactStagingDirectory)/app/dist（将其命名为“将dist文件复制到暂存”
添加另一个 Copy files 任务，将 Source文件夹设置为$(Build.ArtifactStagingDirectory)/app/dist，将 Contents 设置为server.js， 目标文件夹到$(Build.ArtifactStagingDirectory)/app（将其命名为“将server.js复制到根目录”之类的名称）
然后添加 Delete Files 任务，将 Source文件夹设置为$(Build.ArtifactStagingDirectory)/app/dist，将 Contents 设置为server.js （将其命名为“删除dist / server.js”
最后，添加 Azure App Service部署任务，将 Package或文件夹设置为$(Build.ArtifactStagingDirectory)/app
- 找到文件转换和变量替换选项，确保已选择 Generate Web.config ，并添加以下 Web.config参数：{ {1}}

如果正确遵循该指南，则应该使用类似于以下内容的文件夹结构：

web.config

server.js

dist

和-Handler iisnode -NodeStartFile server.js -appType node文件夹应再包含两个文件夹（浏览器和服务器）。如果是这种情况（应该如此），您将有一个有效的 Angular Universal 应用程序。

对于那些想要的人，这里是 yml ：

dist

我希望这对其他人有帮助：）

Answer 2

这是我的，它有效

pool:
  vmImage: 'Ubuntu 16.04'

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

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'

- task: AzureRmWebAppDeployment@3
  inputs:
    azureSubscription: 'Azure CBW Dev'
    WebAppName: 'WebDev'
    Package: '$(System.DefaultWorkingDirectory)/dist'
    GenerateWebConfig: false
    WebConfigParameters: '-Handler iisnode -NodeStartFile server.js -appType node'

Answer 3

我跟随 r3plica 回答，我不得不做些小修改并将 dist / server 移至根目录，一切正常。

如果事情不正常，请始终使用 node 指向 server.js 此

node <path to server.js>

这会告诉您最基本的错误信息

将Angular Universal部署到Azure

3 个答案: