Question

如何在IIS服务器上部署Angular 9 Server端渲染

对于IIS，web.config是什么

Answer 1

以下是创建示例应用并在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支持下构建您的项目，并从http：// localhost：4000地址启动Express服务器。

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

4）转到Windows服务器（C：\ inetpub \ wwwroot）并创建一个空文件夹（例如，将其命名为ng-ssr）

5）将dist文件夹复制到ng-ssr

6）打开C：\ inetpub \ wwwroot \ ng-ssr \ 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等。错误页面，以及旧版URL的重定向规则。

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

注意：下载URL Rewrite和iisnodex64，iisnodex86

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

9）在IIS中创建网站

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

10）在IIS中，转到您创建的网站的应用程序池，将.Net Framework版本更改为“无托管代码”

注意：确保已将iis_iusrs和iusr完全控制权限分配给ng-ssr文件夹。

浏览您的网站：

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

1 个答案: