将 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

这是我的，它可以工作

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 2

我在另一个帖子中回答了这个问题，但我也会把它放在这里：

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

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

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

• 首先，连接到您的存储库并设置您要使用的分支
• 添加Node Tool Installer任务并将其设置为使用当前版本的node
• 添加一个npm任务并将Command设置为自定义；将命令和参数设置为install @angular/cli -g（将其命名为“npm install angular cli”）
• 添加另一个 npm 任务，但继续安装（将其命名为“npm install packages”）
• 添加命令行任务并将脚本设置为npm run build:ssr（将其命名为“构建项目”）
• 添加Copy files任务，将Source folder设置为$(Build.SourcesDirectory)/dist，Contents设置为**，目标文件夹到$(Build.ArtifactStagingDirectory)/app/dist（将其命名为“将dist文件复制到暂存”
• 添加另一个复制文件任务，将源文件夹设置为$(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 Deploy任务，将Package or folder设置为$(Build.ArtifactStagingDirectory)/app
  • 找到File Transforms & Variable Substituion Options，确保选中Generate Web.config并添加这些Web.config参数：@ 987654333@

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

web.config

server.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

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

Answer 3

我跟着 r3plica 的回答，我不得不做一点修改并将 dist/server 移动到根目录，一切顺利。

如果事情不起作用，请始终使用 node 指向 server.js

node <path to server.js>

这会告诉你你做错的最基本的事情