如何使用发布Angular 9 Unviersal。Azure应用服务中的Net Core应用程序

我创建了一个Asp。NET核心Web应用程序与Angular 9。我已经将Angular Universal添加到我的应用程序中。现在,我需要将我的应用程序发布到Azure应用程序服务中。

我使用以下命令构建了一个应用程序,

npm run build:ssr

在构建了angular通用应用程序后,它将在dist文件夹下给出两个文件夹结构。

dist/{app-name}/browser
dist/{app-name}/server

要使用以下命令单独运行angular应用程序,

npm run serve:ssr

它在当地运行良好。现在,我需要在Azure应用服务中发布应用程序。到目前为止,我已经搜索了很多东西并将其整合在一起。但不幸的是,在过去的四天里,我没有找到任何解决方案。

我需要更多关于如何在上配置的详细信息。网芯侧 .

有人能帮我解决这个问题吗?任何帮助都将不胜感激。

编辑:- 我按照以下答案做了同样的事情

Angular 9 universal deployment woes

这是我的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>

Yaml文件,

pool:
name: Azure Pipelines
steps:   
- 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: dist
    TargetFolder: '$(Build.ArtifactStagingDirectory)/dist'

- task: CopyFiles@2
    displayName: 'Copy web.config'
    inputs:
    Contents: web.config
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

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

 - task: AzureRmWebAppDeployment@4
    displayName: 'Azure App Service Deploy: sample-dev'
    inputs:
    azureSubscription: 'subscription'
   WebAppName: 'sample-dev'
   packageForLinux: '$(Build.ArtifactStagingDirectory)'
   ConfigurationSettings: '-Handler iisnode -NodeStartFile server.js -appType node'
   enableCustomDeployment: true

server.ts文件,

import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
// The Express app is exported so that it can be used by serverless 
 Functions.
 export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/angular-ssr/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 
 'index.original.html' : 'index';

  // Our Universal express-engine (found @ 
 https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
   bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
 // Serve static files from /browser
 server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
 }));

// All regular routes use the Universal engine
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: 
req.baseUrl }] });
   });

  return server;
  }

  function run() {
   const port = process.env.PORT || 4000;

  // Start up the Node server
   const server = app();
    server.listen(port, () => {
     console.log(`Node Express server listening on 
 http://localhost:${port}`);
 });
}

 // Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
  // The below code is to ensure that the server is run only when not 
 requiring the bundle.
  declare const __non_webpack_require__: NodeRequire;
  const mainModule = __non_webpack_require__.main;
   const moduleFilename = mainModule && mainModule.filename || '';
    if (moduleFilename === __filename || moduleFilename.includes('iisnode')) 
   {
      run();
    }

    export * from './src/main.server';

在Pipeline中没有出现错误,

但在点击URL时遇到错误

我错过了任何步骤吗?。有人能帮帮我吗?