Question

我已经使用angular-cli在Azure服务器上运行Angular应用程序进行部署。

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

因为SEO问题，现在我想实现服务器端渲染。所以我遵循universal rendering guide并且我能够创建服务器包。

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

/dist
/dist-serv

现在？我需要做什么才能将其部署到Azure服务器？我应该将Witch文件夹复制到我的根文件夹，以便我的网络服务器可以开始预呈现它吗？

Answer 1

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

您需要运行Web服务器（如Node.js Express）并在传入请求上调用renderModuleFactory。参见例如this post作为一个例子，但那里有很多。

Answer 2

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

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

第二步： 按照此引用使其具有通用性：universal-starter

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

*如何将一个项目融入另一个项目：

将项目1和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)

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

享受=）

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

2 个答案: