将 Angular Universal 部署到 Azure

Question

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

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

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

如果我将这些 ftp 传输到我的 azure 站点（就像我过去使用普通 angular 应用程序所做的那样），它就不起作用。我收到一个错误：

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

因此，我尝试使用 VSTS 设置 CI，并按照我发现的一些步骤来发布 angular Universal（尽管它们不是很清楚）。这是我的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 的答案。虽然它最终确实帮助我让 azure 工作，但还是有一些信息缺失或不正确。所以，我将尝试一步一步地走。

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

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

• 首先，连接到您的存储库并设置您希望使用的分支
• 添加节点工具安装程序任务并设置它使用当前版本的节点
• 添加一个npm任务并将命令设置为自定义；将命令和参数设置为install @angular/cli -g（将其命名为“npm install angular cli”）
• 添加另一个npm任务但保持安装（将其命名为“npm install packages”）
• 添加命令行任务并将脚本设置为npm run build:ssr（将其命名为“构建项目”）
• 添加复制文件任务，将源文件夹设置为$(Build.SourcesDirectory)/dist，内容设置为**，目标文件夹设置为$(Build.ArtifactStagingDirectory)/app/dist（将其命名为“将 dist 文件复制到暂存”
• 添加另一个复制文件任务，将源文件夹设置为$(Build.ArtifactStagingDirectory)/app/dist，将内容设置为server.js，将目标文件夹设置为$(Build.ArtifactStagingDirectory)/app（将其命名为“将 server.js 复制到根目录”）
• 然后添加一个删除文件任务，将源文件夹设置为$(Build.ArtifactStagingDirectory)/app/dist和内容为server.js（将其命名为“删除 dist/server.js”
• 最后，添加一个Azure App Service Deploy任务，将Package 或文件夹设置为$(Build.ArtifactStagingDirectory)/app
  • 找到File Transforms & Variable Substituion Options，确保选择了Generate Web.config并添加这些Web.config 参数：-Handler iisnode -NodeStartFile server.js -appType node

如果您正确遵循该指南，您应该最终获得类似于以下内容的文件夹结构：

网页配置

服务器.js

区

并且该dist文件夹应包含另外两个文件夹（浏览器和服务器）。如果是这种情况（应该是这样），您将拥有一个可以工作的Angular Universal应用程序。

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

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 angular cli'
  inputs:
    command: custom

    verbose: false

    customCommand: 'install @angular/cli -g'


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


- script: 'npm run build:ssr'
  displayName: 'build the project'

- task: CopyFiles@2
  displayName: 'Copy dist files to staging'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/dist'

    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'


- task: CopyFiles@2
  displayName: 'Copy server.js to the root'
  inputs:
    SourceFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

    Contents: server.js

    TargetFolder: '$(Build.ArtifactStagingDirectory)/app'


- task: DeleteFiles@1
  displayName: 'Delete the dist/server.js'
  inputs:
    SourceFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

    Contents: server.js


- task: AzureRmWebAppDeployment@3
  displayName: 'Azure App Service Deploy: website'
  inputs:
    azureSubscription: 'Subscription 1'

    WebAppName: website

    DeployToSlotFlag: true

    ResourceGroupName: Temp

    SlotName: master

    Package: '$(Build.ArtifactStagingDirectory)/app'

    GenerateWebConfig: true

    WebConfigParameters: '-Handler iisnode -NodeStartFile server.js -appType node'

    UseWebDeploy: true

    RemoveAdditionalFilesFlag: true

我希望这对其他人有帮助:)