【问题标题】:Angular 9 universal 9 deployment on IIS server with web.config? How to deploy angular 9 Server side rendering on IIS server使用 web.config 在 IIS 服务器上部署 Angular 9 通用 9?如何在 IIS 服务器上部署 Angular 9 服务器端渲染
【发布时间】:2020-09-18 06:25:34
【问题描述】:

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

对于 IIS,web.config 是什么

【问题讨论】:

    标签: angular iis angular9 angular-universal


    【解决方案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 Rewriteiisnodex64iisnodex86

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

    9)在 IIS 中创建网站

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

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

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

    浏览您的网站:

    【讨论】:

    • 我被这个 500 错误困住了。 node.exe 进程没有向 stderr 写入任何信息,或者 iisnode 无法捕获此信息。常见的原因是 iisnode 模块无法创建日志文件来捕获来自 node.exe 的 stdout 和 stderr 输出。给予许可和一切
    • @PriyankaArora 我请求您为您的问题创建一个新线程。
    • 如果您能告诉我您是如何获得 iisnode 文件夹的,那将是极大的帮助。我从链接安装,将它放在 iis 模块中,但是如何在站点中创建此文件夹。
    猜你喜欢
    • 2020-08-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多