在 IIS 上部署 Angular 应用和配置与优化教程

在 IIS 上部署 Angular 应用的完整步骤

以下内容适用于典型的前端 Angular 应用（非 SSR）。如果你的项目使用服务端渲染 (SSR)，步骤会有额外区别。

前期准备

安装或启用 IIS 及 URL 重写模块
在 Windows 控制面板 → “启用或关闭 Windows 功能”中勾选 “Internet Information Services” 以及 “Web 管理工具”、“应用程序开发功能”等。
此外需要安装 IIS 的 URL Rewrite 模块，以支持路由的重写规则。
确认应用使用路由
若你的 Angular 应用使用 @angular/router 实现前端路由（即存在多个子路径），那么部署时必须配置重写规则，让所有子路径都返回给 index.html 以让路由机制生效。

在本地构建 Angular 应用

1. 在项目根目录打开终端，运行构建命令。推荐使用生产模式构建，并指定 base-href（特别是部署至子目录时）：

ng build --prod --base-href /your-app/ # 如果你要部署至 IIS 的子目录 /your-app/

如果部署在根目录，可省略 --base-href 或设置为 /。

2. 构建完成后，你将在 dist/项目名/ 下得到一组静态文件（HTML、JS、CSS、资源等）

3. 加入 web.config

在 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>

这个规则的作用是：当用户请求的路径不是已存在的文件或目录时，统一将请求转发（Rewrite）到 index.html，由 Angular 路由负责处理。

4. 在 Angular 的配置中（如 angular.json 或相应构建配置文件）将 web.config 加入 assets 或等效资源打包列表，以确保它在构建时会被拷贝到 dist/ 目录。

在 IIS 上配置站点与应用池

打开 IIS 管理器（运行 inetmgr）。
创建应用池
→ 在 “应用程序池” 中新建一个池，托管管道模式可选择默认，托管运行时版本建议设置为 “无托管代码”（No Managed Code），因为这是一个纯静态前端应用。
创建站点或子应用
- 若你希望将 Angular 应用作为独立网站运行，可以在 “站点” 右键 → “添加网站”，指定主机名、端口、物理路径为 dist/项目名 文件夹。
- 若你希望将 Angular 应用作为已有网站下的子应用（即虚拟目录或子应用），则在该网站下右键 → “添加应用程序”，指定别名（如 your-app）和物理路径至 dist 文件夹，并使用刚才创建的应用池。
权限设置
确保应用的物理目录对 IIS 用户（如 IIS_IUSRS）具有读取权限，允许访问静态资源。
启用 URL 重写模块
在 IIS 管理器中选中站点或应用，双击 “URL 重写”，检查是否启用。如未启用需先安装模块。

验证与调试

在浏览器访问 http://your-domain/ 或 http://your-domain/your-app/，应看到 Angular 应用成功加载。
测试前端路由跳转。例如访问某个子路径（如 /page1），然后刷新页面，仍应正确加载对应界面，而不是返回 404。
若刷新子路径报错，则有可能是重写规则未生效或 web.config 放置位置不正确。
在 IIS 日志或失败请求跟踪日志中查看 URL 重写是否命中；也可以在浏览器调试面板查看 network 请求与状态码。

常见问题与优化建议

404 错误：通常是因为请求的路径未被重写至 index.html，或 web.config 未被包含到构建输出中。
子目录部署路径错乱：确保在构建时使用正确的 --base-href 和 --deploy-url 参数，脚本与资源请求路径才能正确拼接。
子应用使用错误应用池：如果子应用使用默认 .NET 应用池可能触发 .NET 处理，导致错误。应使用 “无托管代码” 池。
缓存问题：浏览器可能缓存旧版 JS/CSS，建议上线时使用文件名哈希、版本号控制或清除缓存策略。
HTTPS / 访问控制：如果你的主站使用 SSL 或有安全策略，在 IIS 上也需要正确绑定证书与配置访问控制规则。
日志与错误页面：可在 IIS 中打开详细错误页面或失败请求跟踪，以方便定位重写规则与资源访问问题。

总结

通过上述步骤，你可以将一个使用 Angular 路由的前端应用部署到 IIS 服务器上，无论是作为根站点还是子应用。关键在于：

正确构建并指定 base-href / deploy-url
包含并设置合适的 web.config 重写规则
在 IIS 中使用合适的应用池、站点或子应用，并确保权限正确

完成之后，用户就可以直接通过域名访问，无需额外后端支持。