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

答

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

Below are the steps to create a sample app and deploy in iis:

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

1)Install the Angular 10 CLI and initialize a new project. (you can skip this step if you already created the app and installed npm)

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

2)返回到命令行界面，然后从导航到项目的文件夹开始:

2)Go back to your command-line interface, and start by navigating to your project's folder:

cd angular-seo-app

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

原理图会自动将所需的配置和软件包添加到您的项目中，甚至还会添加Express服务器.

The schematic will automatically add the required configurations and packages to your project and will even add an Express server.

Express服务器将呈现Angular应用程序的一部分，并将HTML返回到浏览器.服务器默认在4000端口上运行

The Express server will render a part of your Angular app and return HTML to the browser. The server runs on the 4000 port by default

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

3)Go back to your terminal and run the following commands:

npm run build:ssr 
npm run serve:ssr

这将在SSR支持下构建您的项目，并从http://localhost:4000地址启动Express服务器.

This will build your project with SSR support and start the Express server from the http://localhost:4000 address.

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

You will see dist folder in your project folder.

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

4)Go to your windows server(C:\inetpub\wwwroot) and create an empty folder (name it ng-ssr for example)

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

5)Copy to dist folder into ng-ssr

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

6)Open C:\inetpub\wwwroot\ng-ssr\dist\angular-seo-app\server folder, you will find main.js file

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

7)copy main.js and paste it directly in ng-ssr folder

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

8)create web.conifg file in your ng-ssr folder and add below code in it:

<?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的重定向规则.

An IIS web.config file is an XML file containing rules for a particular site (or directory) on your web server. It is similar to a .htaccess file in Apache. This file may contain rules setting 404, 403, etc. error pages for your site as well as redirection rules for older URLs.

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

Our web.config file is containing the URL rewrite rule,iis node setting, and mime type.

注意:下载 URL重写和 iisnodex64 ， iisnodex86

Note: Download the URL Rewrite and iisnodex64 , iisnodex86

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

Now your website folder must look like this:

9)在IIS中创建网站

9)Create a Web Site in IIS

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

and add the folder path: C:\inetpub\wwwroot\ng-ssr

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

10)In the IIS, go to the Application Pool for the Web Site you created, change the .Net Framework Version to No Managed Code

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

Note: Make sure you assigned the iis_iusrs and iusr full control permission to the ng-ssr folder.

浏览您的网站: