如果你有一个 Angular 应用程序，并且你需要将其部署到 IIS 服务器上，那么以下是如何操作的。
本文包含完整的设置步骤，但如果你已经有一些配置，并且只对某些特定信息感兴趣，那么本文将涵盖以下内容：
目录：
- 我们想要实现什么
- 启用 IIS 和安装 URL Rewrite
- 配置 Angular 以在开发构建中输出文件
- 在 IIS 中添加新的应用程序
- IIS 权限
- 配置
deploy-url和base-href - IIS 配置文件
1. 我们想要实现什么
我们有一个基于 Angular 的应用程序，其中包含路由，我们使用 npm run start 命令在本地系统上开发，并在端口 localhost:4200 上提供应用程序。
具体要求是，我们现在需要从 IIS Web 服务器上运行此应用程序，而不是从本地虚拟开发服务器上运行。
这只是一个简单的场景。以下配置也可以应用于生产版本。
2. 启用 IIS
IIS Web 服务器默认未启用，因此我们需要手动启用。
- 在 Windows 中，导航到 控制面板 > 程序 > 程序和功能 > 打开或关闭 Windows 功能（屏幕左侧）。
- 选中 Internet Information Services 复选框。选择确定。
IIS 安装可能需要系统重启。
然后，在搜索栏中简单搜索 IIS Manager 即可打开它。
我们还需要 IIS URL Rewrite 模块。你可以在官方网站上找到它。
3. 配置 Angular 以在开发构建中输出文件
当使用 Angular 与默认开发服务器 ng serve 时，输出位于内存中，并且不会写入磁盘。
为了使用我们自己的服务器，我们需要使用 ng build --watch，它将像 ng serve 一样监视文件，但会将它们写入磁盘，而不会运行服务器。
因此，更新 package.json 文件并在 scripts 中添加一个命令，以执行此命令。
如果我们运行此命令，我们将在 dist 文件夹中看到应用程序的开发构建版本。
4. 在 IIS 中添加新的应用程序
现在，我们已经配置了 Angular 以在 watch 模式下构建文件并将它们写入磁盘，我们需要进入 IIS 管理器并添加新的应用程序。
添加新的应用程序到 IIS 中
工作流程如下：
- 复制输出文件的文件路径，对于我们来说是
dist/my-app中的文件。 - 右键单击 Default Web Site > Add Application
- 在 alias 字段中填写你要提供应用程序的路由（
localhost/my-app）
可能需要重启 IIS。
5. IIS 权限
此时，如果我们打开浏览器并尝试访问应用程序 localhost/my-app，我们将看到类似于以下内容：
这是因为 IIS 服务器未收到对我们文件的访问权限。
IIS 还会创建 IUSR 作为通过 IIS 访问文件的默认用户。因此，我们需要确保 IUSR 和 IIS_USRS 都有读取文件/文件夹的权限。
为此，右键单击文件夹 > 属性 > 安全 选项卡 > 查看 IUSR 和 IIS_USRS 是否在“组或用户名”列表中，如果没有，
点击编辑 > 添加 > 高级 > 查找 > 选择 IUSR 并点击确定。
6. 配置 deploy-url 和 base-href
一旦我们向 IIS 授予了我们文件的权限，我们可以重新打开应用程序。但是，实际上我们看到的是一个空白页面和一些控制台错误。
我们的 Angular 应用程序在 localhost/my-app 下运行，但如果我们查看开发人员工具，我们会发现应用程序的文件是从 localhost 直接请求的。与其使用http://localhost/my-app/styles.css，我们使用http://localhost/styles.css，其他文件也是一样。
问题在于Angular已经构建了我们的应用程序，假定文件将从主路径/加载。
为了解决这个问题，我们需要在构建应用程序时指定deploy-url和base-href的值。
base-href用于路由，deploy-url用于资源。
在package.json中，使用以下命令更新build:dev脚本：
7. IIS配置文件
让我们再次构建应用程序，看看我们有什么。
此时，工作流程应该是这样的。应用程序应该按预期工作，但路由只能在应用程序内部工作。
如果我们访问像localhost/my-app/two这样的路由，并刷新页面，或者在浏览器中输入此URL，我们将进入404 IIS页面。
这种情况发生的原因是IIS仅配置了理解localhost/my-app并将此URL映射到our_app_path/dist/my-app的内容。
它不知道localhost/my-app/two或我们应用程序的任何其他路由。
要解决这个问题，我们需要配置IIS将localhost/my-app/*的所有请求重定向到我们的应用程序。
所需的配置也在Angular部署页面的服务器配置部分中有记录。
对于IIS，我们需要创建一个名为web.config的新配置文件，其内容如下：
这个web.config文件必须随我们的构建一起包含，因此必须放在dist/my-app中。
为了自动执行此操作，让我们将此文件放在src文件夹中，并将angular-cli.json文件更新如下：
将arhitect.build中的assets移至configuration.development和configuration.production中。
这样，我们可以在开发版本中加载web.config文件，并在生产版本中跳过它。
如果你的使用情况是在开发和生产构建中都需要它，则保留原始的architect.build中的资产，并附加src/web.config。
最后，由于我们引入了一个新的配置选项，让我们最后更新build:dev脚本:
"build:dev": "ng build --watch --deploy-url /my-app/ --base-href /my-app/ --configuration=development"
如果我们再次以开发模式构建应用程序，我们应该看到web.config文件被复制到我们的分发目录中，现在应用程序完全按预期工作。
结论
部署Angular应用程序的过程与基于框架的应用程序并没有太大的区别。需要复制相同的步骤，只是方式略有不同。
评论(0)