azure - 部署 Angular 5 版本 :ssr on Azure

Question

我已经从此处找到的角度通用模板开始构建了我的项目: universal-starter

我正在尝试将 ssr 版本部署为 azure Web 应用程序。我的代码位于 VSTS 上。

在我的本地计算机上，我可以运行以下命令:

1. npm 安装
2. npm run build:ssr。这会生成 dist 文件夹。
3. 然后我可以将 dist 文件夹复制到其他位置并使用下面的命令运行
4. 节点服务器.js

应用程序在本地计算机上的端口 4000 上启动。

按照上述步骤，我在 VSTS 上创建了一个包含以下任务的构建流程:

1. 运行 npm install 的 npm 任务
2. 运行 npm run build:ssr 的 npm 任务
3. 具有以下配置的 Azure 应用服务部署任务:
   • 包文件夹:dist/
   • web.config 参数:-Handler iisnode -NodeStartFile server.js -appType 节点

上述进程成功运行，但是当我导航到 https://my-site-name.azurewebsites.net/时该网站无法访问。

如何在 Azure 上成功部署 Angular 5 SSR？

更新:自此NodeJS-EmptySiteTemplate在 azure 上运行没有错误，我已根据该项目进行了以下更改:

1. 该服务器正在监听 process.env.PORT | 8080
2. 那里有一个 web.config 文件我丢失了。我将相同的 Web 配置文件放置在 wwwroot 中。

但我没有得到:“由于发生内部服务器错误，该页面无法显示。”

Answer 1

在花费了很多时间之后，我将扩展 Starians 的答案。虽然它最终帮助我让 azure 工作，但还是有一些信息丢失或不正确。所以，我会尝试一步一步地走。

The first thing to note, is that I do not change any file to get this to work. If you change webpack.server.config.js then when you do a local build:ssr it will create server.js in your root application folder, which is undesirable.

因此，如果您使用的是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 (将其命名为“Copy dist文件暂存”
• 添加另一个复制文件任务，将源文件夹设置为$(Build.ArtifactStagingDirectory)/app/dist，内容到server.js，目标文件夹到$(Build.ArtifactStagingDirectory)/app(将其命名为“Copy server.js 到根目录”)
• 然后添加删除文件任务，将源文件夹设置为$(Build.ArtifactStagingDirectory)/app/dist，并将>Contents 到 server.js (将其命名为“删除 dist/server.js”
• 最后，添加 Azure App Service Deploy 任务，将包或文件夹设置为 $(Build.ArtifactStagingDirectory)/app
  • 找到文件转换和变量替换选项，确保选择生成 Web.config 并添加以下Web.config 参数:-Handler iisnode -NodeStartFile server.js -appType 节点

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

web.config

server.js

dist

和 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

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