Angular Universal教学-如何将Server Side Render 专案部属到IIS上

介绍

Angular Universal是Angular框架的一个重要功能，它允许我们在服务器端渲染Angular应用程序，以提供更好的性能、搜索引擎优化和用户体验。本教程将向您展示如何将使用Angular Universal构建的Server Side Render（SSR）专案部署到IIS上。

步骤1：生成SSR专案

在开始之前，我们需要先生成一个使用Angular Universal构建的SSR专案。您可以使用Angular CLI来创建一个新的Angular应用，如下所示：

ng new my-app

接着，进入项目目录并安装Angular Universal支持：

cd my-app
ng add @nguniversal/express-engine

这将会为您添加必要的依赖和配置，以支持SSR功能。

步骤2：编写SSR代码

接下来，您需要编辑SSR专案的代码以实现服务器端渲染。在项目根目录下，您可以找到一个名为server.ts的文件。打开它并将其更新为以下内容：

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// 读取服务器代码
const appServer = require('./dist/my-app-server/main').appServer;
// 读取浏览器代码
const indexHtml = readFileSync(join(DIST_FOLDER, 'my-app', 'index.html'), 'utf8');

enableProdMode();

// 创建Express服务器
const app = express();

// 配置静态资源路径
app.use(express.static(DIST_FOLDER, { index: false }));

// 处理所有URL请求
app.get('*', (req, res) => {
  // 渲染Angular应用
  renderModuleFactory(appServer.AppServerModuleNgFactory, {
    document: indexHtml,
    url: req.url
  }).then(html => {
    // 发送渲染后的HTML到客户端
    res.send(html);
  });
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

此代码使用express库创建了一个简单的服务器，并通过renderModuleFactory函数来渲染Angular应用。通过请求URL，服务器将会返回对应页面的SSR HTML。

步骤3：构建并部署到IIS

现在，我们可以构建我们的SSR专案，并将其部署到IIS上。

首先，使用Angular CLI构建专案：

ng build --configuration=production

接着，我们需要复制构建输出到IIS的网站目录中。打开构建输出的dist/my-app目录，并将其中的所有文件复制到IIS的网站目录中。

在IIS中创建一个新的网站，并将其指向您刚刚复制的文件。

结论

恭喜！您已成功将基于Angular Universal的SSR专案部署到了IIS上。您可以发起请求并访问您的网站，应该能够看到服务器端渲染的效果。

通过使用SSR，您可以提高Angular应用程序的性能，并改善搜索引擎优化。希望本教程对您有所帮助，并让您更好地理解如何将SSR专案部署到IIS上。

如果您想了解更多关于Angular Universal的信息，可以参考官方文档。感谢您的阅读！