如何使用angular-cli及其新的通用服务器渲染功能将Angular部署到生产服务器

Question

我已经有一个使用angular-cli部署在Azure Server中运行的Angular应用程序。

我要做的就是运行ng build --prod --aot命令，并将所有文件从/dist文件夹复制到我的根网站文件夹。 一切正常！

由于SEO问题，现在我想实现服务器端渲染。 因此，我遵循该通用渲染指南 ，因此能够创建服务器捆绑包。

好的，所以现在我有2个文件夹：

1. /dist
2. /dist-serv

现在？ 将其部署到Azure Server时需要做什么？ 我应该将Witch文件夹复制到我的根文件夹中，以便我的Web服务器可以开始对其进行预渲染吗？

Answer 1

使用服务器端渲染，将文件复制到服务器的根文件夹是不够的。

您将需要运行Web服务器（例如Node.js Express），并在传入请求中调用renderModuleFactory。 例如，以这篇文章为例，但是有很多。

Answer 2

这是我将Angular部署到生产Azure服务器（IIS）的方式：

第一步：创建一个ANGULAR-CLI项目。 这里的说明： angular-cli

步骤二：遵循此参考文献使其具有通用性： Universal-starter

注意：您可以克隆此存储库并绕过步骤1

*如何使一个项目适合另一个项目：

1. 修改项目1和2中都存在的文件，使其与项目2（通用）和项目2完全相同。
2. 创建在项目2上存在但在项目1上不存在的文件*

好了，现在您有了一个默认的通用项目。 您应该能够运行npm run build:ssr && npm run serve:ssr和/或npm run build:prerender && npm run serve:prerender 注意：如果无法运行以上命令，则应仔细检查项目中的所有文件就像第2步中的存储库一样。

第三步：

像这样创建一个web.config文件。

 <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      <system.webServer>
        <webSocket enabled="false"/>
        <handlers>
          <add name="iisnode" path="/server.js" verb="*" modules="iisnode"/>
        </handlers>
        <rewrite>
          <rules>
            <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
              <match url="^/server.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="/server.js"/>
            </rule>
          </rules>
        </rewrite>
        <security>
          <requestFiltering>
            <hiddenSegments>
              <remove segment="bin"/>
            </hiddenSegments>
          </requestFiltering>
        </security>
        <httpErrors existingResponse="PassThrough"/>
      </system.webServer>
    </configuration>

步骤四：将web.config复制并粘贴到dist文件夹的根目录中，如下所示：

 \dist
        \browser
        \server
        prerender.js
        server.js
        web.config

步骤五：像这样更改项目中的server.ts文件：

...
// const PORT = process.env.PORT || 4000;
const PORT = process.env.PORT || 8080; // <= I changed here
// const DIST_FOLDER = join(process.cwd(), 'dist');
const DIST_FOLDER = join(process.cwd()); // <= I changed here

... (continue)

第6步重建所有内容并将其从/dist文件夹复制到Azure网站根目录。

享受=）