Question

我在我的web.config中将我的Node.js部署到IIS时出现问题：

> <handlers>
>         <add name="iisnode-ng-universal" path="dist/server.js" verb="*" modules="iisnode" />
>     </handlers>

 <rule name="ng-universal" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{HTTP_HOST}" pattern="test" />
        </conditions>
        <action type="Rewrite" url="dist/server.js" />
    </rule>

我收到此错误：

image

这是我的网络文件树的外观：

web files

我尝试向IIS_IUSRS和IUSR授予完全权限，但似乎无效。喜欢这篇帖子建议： iisnode encountered an error when processing the request

Answer 1

你可以试试下面的代码..它对我有用

<?xml version="1.0" encoding="utf-8"?>


<configuration>
    <system.webServer>        
      <handlers>
        <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
      </handlers>
      <rewrite>
        <rules>
            <rule name="DynamicContent">
                 <match url="/*" />
                 <action type="Rewrite" url="server.js"/>
            </rule>
       </rules>
      </rewrite>
    </system.webServer>
  </configuration>

您的server.js可能位于dist文件夹之外。

Answer 2

将Angular 8项目升级到9之后，这意味着我几乎将所有内容都升级到最新版本，

1.- webpack.config.js文件被重命名为.bak，因此似乎不再使用webpack，事实上，如果我尝试重新激活webpack构建，则什么也没有发生，它会创建构建，但会脚本无法运行。在node server.js的情况下进进出出完全不说任何内容。

2.-现在dist文件夹的根目录中没有.js文件，浏览器和服务器版本的文件夹也像以前一样存在，但是甚至编辑web.config文件以指示iisnode运行{{1 }}而不是server/main.js始终会抛出500，无论我做什么。

3.-最初唯一起作用的是本地运行

server.js

这意味着在浏览器版本中存在对视图的引用，但它的运行方式应该是从根目录开始，要求dist /浏览器。

我修改了npm run dev:ssr中的构建路径和服务器构建路径，以在./dist文件夹的根目录中创建main.js文件。

angular.json（修改了outputPath）

angular.json

嗯，问题来了。浏览器版本生成./dist/browser没问题，服务器版本确实将main.js文件直接放在./dist中，但是不知何故，它决定删除./dist/browser文件夹，并在运行节点main.js时{{ 1}}指向architect: { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/browser", "index": "src/index.html", "main": "src/main.ts", "tsConfig": "tsconfig.app.json", ... }, ... }, "server": { "builder": "@angular-devkit/build-angular:server", "options": { "outputPath": "dist", "main": "server.ts", "tsConfig": "tsconfig.server.json" }, ... }, ... }）找不到./browser/index.html，当然不是因为服务器构建过程设法删除了浏览器文件夹。

hacky解决方案，运行第三个版本（再次创建浏览器版本）

我希望可以解决这个问题，但是老实说这根本不会打扰我，一台计算机运行的是构建而不是我，但是，您知道，如果不删除服务器构建过程，可能会更好更快。浏览器构建文件夹。

现在，每次我部署选定的版本时，它都可以直接从AppVeyor直接部署到Azure App Service，

package.json（请注意服务器构建后的额外生产版本）

web.config

请注意，to main.js脚本同时进行了两个构建，然后又重新构建了浏览器。还请注意，{ ... "scripts": { ... "dev:ssr": "ng run Angular-Universal:serve-ssr", "serve:ssr": "node dist/main.js", "build:ssr": "npm run build:universal && ng run Angular-Universal:build:production", "start:ssr": "npm run build:ssr && npm run serve:ssr", "build:universal": "ng run Angular-Universal:build:production && ng run Angular-Universal:server:production", "prerender": "ng run Angular-Universal:prerender" }, ... }脚本已被修改为运行build:ssr

最后，必须修改server.ts文件，以根据目标系统的文件夹结构从./browser/index.html或./dist/browser/index.html请求视图。部署到Azure App Service时，main.js请求浏览器/index.html，但如果该项目在本地环境中以serve:ssr或dist/main.js的形式在macOS上运行，则请求dist / browser / index.html 。无论如何，只要有一个简单的方法，就可以越过这个障碍。

server.ts（对应用程序功能的更改）

npm run dev:ssr

以防万一您想知道如何将node main.js文件复制到// The Express app is exported so that it can be used by serverless Functions. export function app() { const server = express(); let distFolder: string; const path1 = join(process.cwd(), 'browser'); // Running from the deployed version (production) const path2 = join(process.cwd(), 'dist/browser'); // Running from the source (macOS local development) if (fs.existsSync(path1)) { distFolder = path1; } else if (fs.existsSync(path2)) { distFolder = path2; } else { return null; } console.log('distFolder:', distFolder); const indexHtml = fs.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; }文件夹的根目录下，由于我使用的是AppVeyor for CI / CD，所以我将工件创建命令修改为包括web.config（从回购源文件直接添加到.7z文件中）

为什么不包括我的dist？

web.config

我希望这可以对我所处的环境有所帮助，或者至少对辩论有用。在升级到版本9之后，没有人愿意尝试成功地部署到Azure App Service。请让我知道是否可以改进某些方面，也许是可以避免删除浏览器生成文件夹的生成参数。干杯。

Answer 3

经过2天的反复试验（Angular 8），以下流程对我有用

假设您关注了https://angular.io/guide/universal
- 假设您已将src \ tsconfig.server.json更改为-如果已经在src文件夹中生成了 tsconfig.server.json ，请使用此注释

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app-server",
    "module": "commonjs"
  },
  "files": [
    "src/main.server.ts" -- old
    "main.server.ts" -- use this
  ],
  "angularCompilerOptions": {
    "entryModule": "./app/app.server.module#AppServerModule"
  }
}

并使用 npm run build：ssr && npm run serve：ssr
按照该帖子的答案1 并从中安装iisnode https://github.com/tjanczuk/iisnode（如果需要，请参考此人的教程https://www.youtube.com/watch?v=JUYCDnqR8p0）
从Link安装URL重写
将dist文件夹复制到iis网站文件夹
移动内容，直到看起来如下

website_root:.
│   server.js
│   web.config
│
├───dist
│   └───browser
│           3rdpartylicenses.txt
│           favicon.ico
│           index.html
│           main-es2015.da6c4688eda738c0ae37.js
│           main-es5.da6c4688eda738c0ae37.js
│           polyfills-es2015.0ef207fb7b4761464817.js
│           polyfills-es5.2b9ce34c123ac007a8ba.js
│           runtime-es2015.e8a2810b3b08d6a1b6aa.js
│           runtime-es5.e8a2810b3b08d6a1b6aa.js
│           styles.09e2c710755c8867a460.css
│
└───server
        main.js

部署到Azure（受此Link's answer by **r3plica 的启发）**

唯一的不同是将服务器文件夹移至根目录的附加“复制文件”任务

注意

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

node <path to server.js>

这会告诉您最基本的错误信息

Answer 4

如果您想使用服务器端渲染运行 Angular 应用程序：

1-创建一个新项目：

ng new anguniversal

2-启用服务器端渲染 (SSR)

ng add @nguniversal/express-engine

第 1 步

首先执行下面给出的命令以使用 express 服务器构建一个 Angular 应用程序。

npm run build:ssr

现在你可以在你的项目文件夹中看到 dist 文件夹了。

第 2 步

在您的 Windows 服务器中创建一个新文件夹（例如将其命名为 angular-universal）并从这里的项目文件夹中复制 dist 文件夹

第 3 步

从 dist/anguniversal/server 文件夹复制 main.js 文件并将其直接粘贴到 angular-universal 文件夹中。

第 4 步

创建并打开 Web.config 文件（在 angular-universal 文件夹中）并将代码添加到其中。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="iisnode" path="main.js" verb="*" modules="iisnode" />
    </handlers>
    <rewrite>
      <rules>
        <rule name="DynamicContent">
          <match url="/*" />
          <action type="Rewrite" url="main.js"/>
        </rule>
        <rule name="StaticContent" stopProcessing="true">
          <match url="([\S]+[.](jpg|jpeg|gif|css|png|js|ts|cscc|less|ico|html|map|svg))" />
          <action type="None" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" />
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".ttf" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <remove fileExtension=".otf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/x-woff" />
      <mimeMap fileExtension=".otf" mimeType="application/otf" />
    </staticContent>
  </system.webServer>
</configuration>

第 5 步

在服务器上安装 IIS Node 和 URL Rewrite。

第 6 步

在 IIS 中添加网站...。

第 7 步

在 IIS 中，转到应用程序池。对于您创建的网站（angular-universal）。然后将 .NET CLR 版本更改为无托管代码。

完成，您可以查看结果。

将Angular Universal部署到IIS

4 个答案: