Angular 9 通用部署问题

Question

老实说，我觉得这种情况不断变化很烦人。我在这里用更简单的 Angular 版本解决了这个问题：

将 Angular Universal 部署到 Azure

但现在这种说法已经过时了。不再生成 server.js，而是必须修改web.config以指向main.js，这听起来像是一个改进。我将我的yaml更新为：

pool:
  name: Azure Pipelines
steps:
- task: gittools.gitversion.gitversion-task.GitVersion@5
  displayName: GitVersion

- task: NodeTool@0
  displayName: 'Use Node 12.x'
  inputs:
    versionSpec: 12.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'
  inputs:
    verbose: false

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

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

- task: AzureRmWebAppDeployment@4
  displayName: 'Azure App Service Deploy: app-name'
  inputs:
    azureSubscription: 'Pay-As-You-Go (f61dc7cf-0ca2-4982-bbe7-9b6527c2962b)'
    WebAppName: r3plica
    packageForLinux: '$(Build.ArtifactStagingDirectory)/app'
    WebConfigParameters: '-Handler iisnode -NodeStartFile dist/app-name/server/main.js -appType node'

应该就是这样，但当然，事情没那么简单。现在，如果我运行node dist/app-name/server/main.js ，则会收到错误。它返回的是这个：

ReferenceError: Blob 未在 createBase64WorkerFactory 中定义 (D:\home\site\wwwroot\dist\app-name\server\main.js:1:1418371)

所以我环顾四周，有人建议我安装npm install --save-dev blob-polyfill，然后编辑server.ts文件：

import { Blob } from 'blob-polyfill';

global['Blob'] = Blob;

但这似乎并没有起到任何作用。错误仍然存​​在。有谁知道我必须做什么？

---

更新

我今天决定再试一次。我运行并将服务器和浏览器npm build:ssr文件夹复制到本地网络服务器并运行，它抱怨它在dist/my-project/browser/index.html找不到对我有帮助的index.html 文件。所以我将整个dist文件夹复制到wwwroot并运行，它起作用了。node server/main.jsnode dist/my-project/server/main.js

所以我更新了我的管道以执行相同的操作。我验证它实际上复制了整个 dist 文件夹，然后将 web.config 复制到根目录。我的 web.config 文件如下所示：

<configuration>
    <system.web>
        <customErrors mode="Off" />
    </system.web>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".woff2" />
            <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
        </staticContent>
        <handlers>
            <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
            <add name="iisnode" path="dist/my-project/server/main.js" verb="*" modules="iisnode"/>
        </handlers>
        <httpErrors errorMode="Detailed"></httpErrors>
    </system.webServer>
</configuration>

但是当我尝试加载我的网站时，它只会给我一个错误：

HTTP 错误 403.14 - 禁止

未为请求的 URL 配置默认文档，并且服务器上未启用目录浏览。

这真的很烦人。我查看了https://example.scm.azurewebsites.net并转到调试控制台并输入了node dist/my-project/server/main.js以下内容：

Node Express 服务器监听http://localhost:4000

所以据我所知它应该工作得很好。有谁知道为什么不呢？

Answer 1

所以，我再次设法解决了这个问题。我投入了几个小时的时间，它开始让我发疯。我决定建立一个本地网络服务器（iss）并尽我所能。最后，正是这个救了我，因为 iisnode 正在记录错误，我可以看到出了什么问题。

如果我保持文件夹结构不变，npm run build:ssr并更新 webconfig 以指向main.js，就像<add name="iisnode" path="dist/example-project/server/main.js" verb="*" modules="iisnode"/>您收到类似以下错误：

错误：无法在视图目录“C:\inetpub\wwwroot\dist\example-project\server\dist\example-project\browser”中查找视图“index”

正如您从错误中看到的，它使用main.js所在位置的相对路径。从这里你可能可以看到我是如何解决我的问题的。

我更新了我的任务以包含一个新副本，并将main.js复制到根目录并将我的web.config更新为：

<add name="iisnode" path="main.js" verb="*" modules="iisnode"/>。

为了完整起见，这是我的完整web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <webSocket enabled="false" />
        <handlers>
            <add name="iisnode" path="main.js" verb="*" modules="iisnode"/>
        </handlers>
        <rewrite>
            <rules>
                <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
                    <match url="^main.js\/debug[\/]?" />
                </rule>
                <rule name="StaticContent">
                    <action type="Rewrite" url="public{REQUEST_URI}"/>
                </rule>
                <rule name="DynamicContent">
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
                    </conditions>
                    <action type="Rewrite" url="main.js"/>
                </rule>
                <rule name="Angular Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/index.html" />
                </rule>
            </rules>
        </rewrite>
        <security>
            <requestFiltering>
                <hiddenSegments>
                    <remove segment="bin"/>
                </hiddenSegments>
            </requestFiltering>
        </security>
        <httpErrors existingResponse="PassThrough" />
    </system.webServer>
</configuration>

这是我的 azure xaml：

pool:
  name: Azure Pipelines
steps:
- task: gittools.gitversion.gitversion-task.GitVersion@5
  displayName: GitVersion

- task: NodeTool@0
  displayName: 'Use Node 12.x'
  inputs:
    versionSpec: 12.x
    checkLatest: true

- task: Npm@1
  displayName: 'npm install angular cli'
  inputs:
    command: custom
    verbose: false
    customCommand: 'install @angular/cli -g'

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

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

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

- task: CopyFiles@2
  displayName: 'Copy web.config'
  inputs:
    SourceFolder: '$(Build.ArtifactStagingDirectory)/dist/example-project/browser'
    Contents: web.config
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: CopyFiles@2
  displayName: 'Copy main.js'
  inputs:
    SourceFolder: '$(Build.ArtifactStagingDirectory)/dist/example-project/server'
    Contents: main.js
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: AzureRmWebAppDeployment@4
  displayName: 'Azure App Service Deploy: example-project'
  inputs:
    azureSubscription: 'Your Subscription'
    WebAppName: 'example-project'
    packageForLinux: '$(Build.ArtifactStagingDirectory)'
    enableCustomDeployment: true
    RemoveAdditionalFilesFlag: true