在 Azure 上部署 Angular 5 build:ssr

Question

我从此处找到的 angular 通用模板开始构建我的项目： universal-starter

我正在尝试将 ssr 构建部署为 azure web 应用程序。我的代码在 VSTS 上。

在我的本地机器上，我可以运行以下内容：

npm install
npm run build:ssr。这会生成 dist 文件夹。
然后我可以将 dist 文件夹复制到其他地方，然后运行使用下面的命令
node server.js

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

所以按照上面的步骤，我在我的 VSTS 上创建了一个构建过程，任务如下：

运行s npm install
运行npm run build:ssr
具有以下配置的 azure 应用程序服务部署任务：
- 包文件夹：dist/
- web.config 参数：-Handler iisnode -NodeStartFile server.js -appType node

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

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

更新： 由于这个 NodeJS-EmptySiteTemplate 运行s 在 azure 上没有错误，我根据该项目做了以下更改：

该服务器正在侦听 process.env.PORT | 8080
我丢失了一个 web.config 文件。我在 wwwroot 中放置了相同的 web-config 文件。

但我得到的不是："The page cannot be displayed because an internal server error has occurred."

Answer 1

我建议您使用当前目录作为工作文件夹，而不是添加额外的 dist 文件夹 (const DIST_FOLDER = join(process.cwd(), 'dist');)。

您可以启用该应用程序服务的诊断日志并查看详细日志，它仍然在 D:\home\site\wwwroot\dist\dist\browser 中查找索引视图，因此它不正确并会抛出 500 错误。

顺便说一句：端口是 80 (process.env.PORT) 而不是 4000。

更新：

server.ts 需要 dist 文件夹中的模块文件，因此仅更改 DIST_FOLDER 是行不通的。简单的方法是将 server.js 放在 dist 文件夹之外（不要修改 server.ts）。

简单步骤：

打开webpack.server.config.js
替换路径：path.join(__dirname, 'dist')到path:__dirname
NPM 安装任务
NPM 自定义任务 (运行 build:ssr)
复制文件任务（源文件夹：$(Build.SourcesDirectory)/dist；内容：**；目标文件夹：$(Build.ArtifactStagingDirectory)/app/dist）
复制文件任务（源文件夹：$(Build.SourcesDirectory)；内容：server.js prerender.js（每行一个）
Azure 应用服务部署任务（包或文件夹：$(Build.ArtifactStagingDirectory)/app；Webconfig 参数：-Handler iisnode -NodeStartFile server.js -appType node）

Answer 2

在这上面花了很多时间之后，我将扩展 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 视觉设计器，则可以按照以下步骤操作：

首先，连接到您的存储库并设置您要使用的分支
添加 Node Tool Installer 任务并将其设置为使用当前版本的 node
添加一个 npm 任务并将 Command 设置为自定义；将 命令和参数 设置为 install @angular/cli -g（将其命名为 "npm install angular cli"）
添加另一个 npm 任务但保持安装（将其命名为 "npm install packages"）
添加一个命令行任务并将脚本设置为npm run build:ssr（将其命名为"build the project"）
添加一个复制文件任务，将源文件夹设置为$(Build.SourcesDirectory)/dist，内容到 ** 和 目标文件夹 到 $(Build.ArtifactStagingDirectory)/app/dist（将其命名为 "Copy dist files to staging"
添加另一个复制文件任务，将源文件夹设置为$(Build.ArtifactStagingDirectory)/app/dist，内容到 server.js 和 目标文件夹 到 $(Build.ArtifactStagingDirectory)/app（将其命名为 "Copy server.js to the root"）
然后添加一个删除文件任务，将源文件夹设置为$(Build.ArtifactStagingDirectory)/app/dist和内容到 server.js（将其命名为 "Delete the dist/server.js"
最后，添加一个 Azure App Service Deploy 任务，将 包或文件夹 设置为 $(Build.ArtifactStagingDirectory)/app
- 找到文件转换和变量替换选项，确保选择生成Web.config并添加这些Web.config 参数: -Handler iisnode -NodeStartFile server.js -appType node

如果你正确地遵循该指南，你最终应该得到一个类似于以下的文件夹结构：

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

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

在 Azure 上部署 Angular 5 build:ssr

Deploy Angular 5 build:ssr on Azure

azure

server-side-rendering

azure-devops

angular5