如何将Angular程序部署到IIS中

对于Angular或者VUE等这类单页面应用，通常编译出来后就是一个index.html文件和相关的js，css等。如果直接部署到IIS中，当你直接访问根目录的时候通常是没有问题的，比如http://vdeveloper.net 。但是如果带上路径就会出现错误了，比如 http://vdeveloper.net/welcome 。因为IIS上根本就没有welcome这个目录。你只能先打开http://vdeveloper.net ，然后通过里面的链接路由到 /welcome 页面。另外就是当你在某个页面尝试按F5刷新的时候也会出现同样的问题。

要解决这个问题，就需要用到IIS的URL重写，该功能在IIS 7以上都是支持的。当然我们需要先安装URL Rewrite模块，下载链接如下：https://www.iis.net/downloads/microsoft/url-rewrite

安装之后我们需要增加一个web.config文件放到应用的根目录下，配置如下内容：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <!--这里定义了URL重写的规则-->
            <rules>
                <rule name="redirect to index" stopProcessing="false">
                    <!--匹配所有请求-->
                    <match url=".*" />
                    <!--当请求不是文件也不是目录的时候-->
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <!--将请求映射到根目录-->
                    <!--如果部署的是网站下的一个子应用程序，则这里应该将url设置为子应用程序的目录，同时必须以“/”结尾，比如 url="/app/"-->
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
        <!--将默认文件设为index.html-->
        <!--当然也可以不设置，通常默认文件已经包含了index.html-->
        <defaultDocument>
            <files>
                <clear />
                <add value="index.html" />
            </files>
        </defaultDocument>
    </system.webServer>
</configuration>

除此之外，对于单页面应用还有个缓存的问题，因为对于index.html这种静态文件，浏览器都是会默认缓存起来的，这样一来，如果更新了版本就没法及时的体现出来，会带来一系列的问题。

我们也可以通过web.config来设置index.html的缓存，配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <!--找到index.html文件-->
    <location path="index.html">
        <system.webServer>
            <httpProtocol>
                <customHeaders>
                    <!--关闭缓存-->
                    <add name="Cache-Control" value="no-cache, no-store" />
                </customHeaders>
            </httpProtocol>
        </system.webServer>
  </location>
</configuration>

我这里选择了直接将index.html的缓存关闭，因为通常这个页面都比较小，问题不大。当然也可以根据自己的需要设置不同的缓存策略。

最后附上完整的web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="redirect to index" stopProcessing="false">
                    <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="/" />
                </rule>
            </rules>
        </rewrite>
        <defaultDocument>
            <files>
                <clear />
                <add value="index.html" />
            </files>
        </defaultDocument>
    </system.webServer>
    <location path="index.html">
        <system.webServer>
            <httpProtocol>
                <customHeaders>
                    <add name="Cache-Control" value="no-cache, no-store" />
                </customHeaders>
            </httpProtocol>
        </system.webServer>
  </location>
</configuration>