Angular 9 通用 9 在 IIS 服务器上部署 web.config?如何在IIS服务器上部署angular9服务器端渲染
Angular 9 universal 9 deployment on IIS server with web.config? How to deploy angular 9 Server side rendering on IIS server
如何部署Angular IIS服务器上9服务器端渲染
IIS 的 web.config
是什么
以下是创建示例应用程序并在 iis 中部署的步骤:
1)安装Angular10 CLI并初始化一个新项目。 (如果您已经创建了应用程序并安装了 npm,则可以跳过此步骤)
npm install -g @angular/cli
ng new angular-seo-app
2) 返回到您的 command-line 界面,然后导航到您的项目文件夹:
cd angular-seo-app
ng add @nguniversal/express-engine --clientProject angular-seo-app
原理图会自动将所需的配置和包添加到您的项目中,甚至会添加一个 Express 服务器。
Express 服务器将向浏览器呈现您的 Angular 应用和 return 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 and iisnodex64 , iisnodex86
现在您的网站文件夹必须如下所示:
9)在 IIS 中创建网站
并添加文件夹路径:C:\inetpub\wwwroot\ng-ssr
10)在 IIS 中,转到您创建的网站的应用程序池,将 .Net Framework 版本更改为无托管代码
注意:确保您为 ng-ssr 文件夹分配了 iis_iusrs 和 iusr 完全控制权限。
浏览您的站点:
如何部署Angular IIS服务器上9服务器端渲染
IIS 的 web.config
是什么
以下是创建示例应用程序并在 iis 中部署的步骤:
1)安装Angular10 CLI并初始化一个新项目。 (如果您已经创建了应用程序并安装了 npm,则可以跳过此步骤)
npm install -g @angular/cli
ng new angular-seo-app
2) 返回到您的 command-line 界面,然后导航到您的项目文件夹:
cd angular-seo-app
ng add @nguniversal/express-engine --clientProject angular-seo-app
原理图会自动将所需的配置和包添加到您的项目中,甚至会添加一个 Express 服务器。
Express 服务器将向浏览器呈现您的 Angular 应用和 return 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 and iisnodex64 , iisnodex86
现在您的网站文件夹必须如下所示:
9)在 IIS 中创建网站
并添加文件夹路径:C:\inetpub\wwwroot\ng-ssr
10)在 IIS 中,转到您创建的网站的应用程序池,将 .Net Framework 版本更改为无托管代码
注意:确保您为 ng-ssr 文件夹分配了 iis_iusrs 和 iusr 完全控制权限。
浏览您的站点: