如何在 iis 上部署 angular-cli 应用程序

Posted 2023-03-30

技术标签:

【中文标题】如何在 iis 上部署 angular-cli 应用程序【英文标题】：How to deploy angular-cli app on iis 【发布时间】：2016-12-23 16:13:07 【问题描述】：

我有简单的 angular2-cli 应用程序（模型驱动形式的一页 - 不涉及路由器）。使用“ng serve”一切正常。我用 ng build --product 制作了生产版本。我将所有 ./dist 文件夹内容复制到 C:\inetpub\wwwroot 下的新文件夹中。我从 IIS 管理控制台制作了虚拟应用程序。默认应用文件是 index.html。我浏览到应用程序 uri，我只得到带有“正在加载...”的页面。我尝试在没有 --product 开关的情况下构建（仅 ng build），但结果是一样的。 Angular 应用程序未加载。在 IIS 上发布 Angular 应用还需要其他什么吗？

【问题讨论】：

检查浏览器控制台是否显示“正在加载...” 我发现了问题所在。在 index.html 中，我应该使用而不是。当我添加点时，一切都开始工作了。如果要使用路由器会有问题。但正如你提到的，你不会，这意味着 href=". " 就足够了。您可能在子文件夹中发布了您的应用程序。您也可以将此子文件夹名称用作基本 href 无需任何Web.config即可部署 【参考方案1】：

这是我解决这种情况的方法；

使用 angular-cli 创建项目使用ng build 构建您的应用程序打开 IIS，新建虚拟目录并显示dist 文件夹在 index.html 中将 base href 从 / 设置为 /yourAliasNameOnIIS

使用此 web.config 将请求重定向到您的 index.html 页面

<system.webServer>
<rewrite>
  <rules>
    <rule name="AngularJS Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="REQUEST_FILENAME" matchType="IsFile" negate="true" />
        <add input="REQUEST_FILENAME" matchType="IsDirectory" negate="true" />
        <add input="REQUEST_URI" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/yourAliasNameOnIIS" />
    </rule>
  </rules>
</rewrite>

将您的虚拟目录转换为 Web 应用程序

您也可以使用ng build --deploy-url "/yourAliasNameOnIIS"更改dist/index.html中的src路径。

希望对你有帮助！

【讨论】：

请注意，--deployUrl 不再存在（不确定它是否曾经存在），现在是 --deploy-url。此外，还可以使用--base-href 来实际更改基本href。部署 url 命令只是更改脚本 src 位置。我采用了这种方法，但在所有 css、js 文件等上都出现 404 错误。您也可以对虚拟项目执行这些步骤吗？我的意思是你可以创建新的空角度项目并执行这些步骤吗？我用额外的 IIS 重写规则回答了这个问题，增加了更多功能：***.com/a/47442941/558509 如果我不想将它托管在虚拟目录中怎么办？如果我为它建立了另一个网站怎么办？我们也可以不做基本的href改变吗？【参考方案2】：

当您打开浏览器的开发工具时，您会在应用尝试下载 js、css 等文件时看到 404 消息

您需要将 index.html 中的基本 href 设置为

<base href="./">

这将确保基本 ref 与您的网站在 IIS 中的位置相关。您还需要使用哈希定位策略，否则 IIS 将拦截您的 ng2 路由器 URL 更改并尝试为该 URL 找到控制器/操作。

在你的 app.module.ts 的导入下：

RouterModule.forRoot(routerConfig,  useHash: true )

我已经完成了这两个步骤，并且在带有 IIS 的 Azure VM 上一切正常。这样做也意味着您不必将 SPA 放在根目录上，并且可以让多个 SPA 彼此愉快地运行（在 IIS 上的不同网站中）

【讨论】：

谢谢，但是有一种方法可以在不使用哈希的情况下部署应用程序吗？这是我的主要问题。一切正常，但如果你想导航到特定路线（如 www.site.com/login），IIS 返回 404（预期行为）但如果导航是使用应用程序进行的，则工作正常（问题来自使用导航来自资源管理器的栏）将此添加到 web.config： 【参考方案3】：

对我来说，这很简单：

index.html

href=""

这样就更简单了，不需要修改index.html文件：

ng build -prod --base-href

【讨论】：

【参考方案4】：

我提出了很多建议，对我有用的是link

这里清楚地描述了为什么需要以不同方式为 Angular 应用程序配置事物的一个很好的解释。按照链接中的步骤操作，然后我使用以下设置在已发布的文件夹位置添加了一个 web.config：

<?xml version="1.0"?>
<configuration>
<system.webServer>  
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="REQUEST_FILENAME" matchType="IsFile" negate="true" />
            <add input="REQUEST_FILENAME" matchType="IsDirectory" negate="true" />
            <add input="REQUEST_URI" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
  </rewrite>
 </system.webServer>
</configuration>

上面的链接也描述了这些设置。希望这对某人有所帮助。

【讨论】：

【参考方案5】：

我尝试了以下方法，它奏效了。

在 IIS 中创建新网站（通过 inetmgr）使用“ng build --prod” - 生成生产版本代码复制 dist 文件夹的文件，然后将其粘贴到 IIS 网站的根文件夹中（不要将文件夹复制到 IIS 网站的根文件夹中，这会导致问题）从您的终端设置凭据、授权等。为“MACHINE_NAME\IIS_IUSRS & MACHINE_NAME\NETWORK SERVICE”设置根文件夹的访问权限在 IIS 中将默认页面设置为“index.html” 现在您可以浏览网站了。

【讨论】：

我在 proxy.conf.js 文件中有一些代理设置。运行“ng build --aot --prod”后，我按原样部署了 dist 文件。该网站已启动并正在运行，但使用代理设置的页面仍在使用 localhost。如何在生产环境中设置代理设置？ "复制 dist 文件夹的文件，然后将其粘贴到 IIS 网站的根文件夹（不要复制文件夹并将其放入 IIS 网站的根文件夹，这会导致问题）"。你能解释一下什么问题吗？【参考方案6】：

除了对我最有效的 ulubeyn 回答之外，我还添加了自己的 IIS 重写规则以启用：

1) 从 /dist 到别名的初始重定向 2) 从别名下载 javascript 和 3) 别名上的角度路由

<rules>
  <rule name="Redirect from blank URL to IIS Alias" stopProcessing="true">
    <match url="^/?$" />
    <action type="Rewrite" url="/MyDist" />
  </rule>
  <rule name="Redirect from /dist folder to IIS Alias" stopProcessing="true">
    <match url="^(.*)/dist" />
    <action type="Rewrite" url="/yourAliasNameOnIIS" />
  </rule>
  <rule name="Allow Angular URL Routing on IIS Alias" stopProcessing="true">
    <match url="^yourAliasNameOnIIS/*" />
    <conditions logicalGrouping="MatchAll">
      <add input="REQUEST_FILENAME" matchType="IsFile" negate="true" />
      <add input="REQUEST_FILENAME" matchType="IsDirectory" negate="true" />
      <add input="REQUEST_URI" pattern="^/(api)" negate="true" />
    </conditions>
    <action type="Rewrite" url="/yourAliasNameOnIIS" />
  </rule>
  <rule name="Redirect to IIS Alias folder with parameters" stopProcessing="true">
    <match url="(.*)" />
    <conditions logicalGrouping="MatchAll">
      <add input="REQUEST_FILENAME" matchType="IsFile" negate="true" />
      <add input="REQUEST_FILENAME" matchType="IsDirectory" negate="true" />
      <add input="REQUEST_URI" pattern="^/(api)" negate="true" />
    </conditions>
    <action type="Rewrite" url="/yourAliasNameOnIIS/R:1" appendQueryString="true" />
  </rule>
</rules>

【讨论】：

【参考方案7】：

对于那些使用 angular i18n 的人，您必须为每种语言构建应用程序并将它们放在单独的文件夹中

ng build --output-path=dist/fr --prod --bh /fr/
ng build --output-path=dist/en --prod --bh /en/

这里是 iis 的配置

<?xml version="1.0" encoding="UTF-8"?>
 <configuration>
  <system.webServer>
    <directoryBrowse enabled="true" />
    <rewrite>
        <rules>
            <rule name="Imported Rule 1" stopProcessing="true">
                <match url="^../index\.html$" ignoreCase="false" />
                <action type="None" />
            </rule>
            <rule name="Imported Rule 2" stopProcessing="true">
                <match url="(..)" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="REQUEST_FILENAME" matchType="IsFile" ignoreCase="false" negate="true" />
                    <add input="REQUEST_FILENAME" matchType="IsDirectory" ignoreCase="false" negate="true" />
                </conditions>
                <action type="Rewrite" url="R:1/index.html" />
            </rule>
            <rule name="Imported Rule 3">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="HTTP_ACCEPT_LANGUAGE" pattern="^fr" />
                </conditions>
                <action type="Redirect" url="/fr/" redirectType="Found" />
            </rule>
            <rule name="Imported Rule 5">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="HTTP_ACCEPT_LANGUAGE" pattern="^es" negate="true" />
                </conditions>
                <action type="Redirect" url="/en/" redirectType="Found" />
            </rule>
        </rules>
    </rewrite>
 </system.webServer>
 </configuration>

【讨论】：

【参考方案8】：

您可以在没有任何 Web.config 文件的情况下部署它，如下所示，

你可以在 dist 文件夹里面找到index.html 找到base href 标签

现在相应地改变它的路径

Ex -: 如果在 wwwroot 内部部署

<base href="/">

Ex-: 如果部署在 wwwroot 的文件夹中

<base href="/FolderName/">

【讨论】：

【参考方案9】：

将 web.config 文件添加到位置 app/src/ web.config 的内容：

<?xml version="1.0" encoding="utf-8"?>
<configuration>    
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="REQUEST_FILENAME" matchType="IsFile" negate="true" />
          <add input="REQUEST_FILENAME" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

在 .angular-cli.json 中将 web.config 添加到 assets 部分，如下所示：

"assets": [
    "assets",
    "favicon.ico",
    "web.config"
],

【讨论】：

【参考方案10】：

在 IIS 上，您必须将 web.config 复制到已部署的文件夹：

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <security>
    <requestFiltering>
      <fileExtensions>
        <add fileExtension=".json" allowed="true" />
        <add fileExtension=".woff2" allowed="true" />
      </fileExtensions>
    </requestFiltering>
  </security>
  <staticContent>
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="application/json" />
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="REQUEST_FILENAME" matchType="IsFile" negate="true" />
          <add input="REQUEST_FILENAME" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>

您可以像这样在 src 中自动创建 web.config 文件，然后将其添加到 .angular-cli.json 中：

"assets": [
    "assets",
    "favicon.ico",
    "web.config"
],

【讨论】：

【参考方案11】：

对我有用且非常容易的是首先配置我的路线

RouterModule.forRoot([
--some routes-- 
],  useHash: true )

所以我所有的路线前面都有 # 然后使用

ng build --base-href "./" --prod

在 wwwwroot 内的文件夹中构建并部署我的应用程序。

【讨论】：

【参考方案12】：

按照以下步骤操作：

运行以下命令。 [ng build --prod --base-href='/'] 创建一个文件夹，即“D:\SmartTrader-Angular” 将 dist 内容复制到 D:\SmartTrader-Angular 文件夹创建 IIS 站点无需创建 web.config 文件。在 IIS 中重新启动站点。现在应该可以工作了。

【讨论】：

我忘了说。将 dist 内容复制到 D:\SmartTrader-Angular 文件夹。

以上是关于如何在 iis 上部署 angular-cli 应用程序的主要内容，如果未能解决你的问题，请参考以下文章

如何将带有 angular 2 前端（angular-cli build）的 spring-boot webapp 部署到 Tomcat？

如何在 IIS 6.0 上部署我的 WCF 服务？

如何将网站部署到IIS服务器上

如何在 angular-cli.json 上包含媒体（打印|屏幕）

如何将c#做好的asp.net网站部署到iis上

怎么把JAVA网站项目部署到IIS上