使用web.config在IIS服务器上部署Angular 9通用9?如何在IIS服务器上部署angular 9服务器端渲染

以下是创建示例应用程序并在iis中部署的步骤:

1) 安装Angular 10 CLI并初始化一个新项目。(如果您已经创建了应用程序并安装了npm,则可以跳过此步骤)

npm install -g @angular/cli
ng new angular-seo-app

2) 返回命令行界面,首先导航到项目的文件夹:

cd angular-seo-app

ng add @nguniversal/express-engine --clientProject angular-seo-app

原理图会自动将所需的配置和包添加到您的项目中,甚至会添加一个Express服务器。

Express服务器将渲染Angular应用程序的一部分,并将HTML返回给浏览器。默认情况下,服务器在4000端口上运行

3) 返回终端并运行以下命令:

npm run build:ssr 
npm run serve:ssr

这将使用SSR支持构建您的项目,并从启动Express服务器http://localhost:4000地址。

您将在项目文件夹中看到dist文件夹。

4) 转到windows服务器(C:\inetpub\wwwroot)并创建一个空文件夹(例如命名为ng-ssr)

5) 复制到dist文件夹到ng-ssr

6) 打开C:\inetpub\wwwroot\ngssr\dist\angular seo-app\server文件夹,您将找到main.js文件

7) 复制main.js并直接粘贴到ng-ssr文件夹中

8) 在ng-ssr文件夹中创建web.conifg文件,并在其中添加以下代码:

<?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>

IIS web.config文件是一个XML文件,其中包含web服务器上特定站点(或目录)的规则。它类似于Apache中的.htaccess文件。 此文件可能包含您网站的规则设置404、403等错误页面,以及旧网址的重定向规则。

我们的web.config文件包含URL重写规则、iis节点设置和mime类型。

注意:下载 URL Rewrite 和 iisnodex64 , iisnodex86

现在,您的网站文件夹必须如下所示:

9) 在IIS中创建网站

并添加文件夹路径:C:\inetpub\wwwroot\ng-ssr

10) 在IIS中,转到您创建的网站的应用程序池,更改。Net Framework版本为无托管代码

注意:确保您为ng-ssr文件夹分配了iis_iurs和iusr完全控制权限。

浏览您的网站: