ASP.NET Core 8+Angular17模板应用本地IIS部署求助

一、前置环境检查 #

• 确认已安装 .NET 8 Hosting Bundle v8.0.2（需包含ASP.NET Core Module v2组件）
• 确认IIS已启用以下必需组件：
  • ASP.NET Core Module v2
  • 静态内容
  • URL重写模块

二、Visual Studio 2022 项目发布配置 #

1. 右键解决方案中的ASP.NET Core项目（带API的那个），选择发布
2. 选择文件夹作为发布目标，指定本地发布路径（例如C:\Publish\Net8Angular17Demo）
3. 点击编辑按钮，配置发布参数：
   • 配置：选择Release
   • 目标框架：选择net8.0
4. 切换到文件发布选项，勾选：
   • 删除目标处的现有文件
   • 在发布前构建
5. 关键配置（确保Angular自动构建并打包到发布目录）：
   若Visual Studio版本为17.8+，直接在Angular构建选项中设置：
   • 构建命令：npm run build
   • 输出目录：ClientApp/dist/<你的Angular项目名>/browser（模板默认项目名通常为client，即路径为ClientApp/dist/client/browser）
     若没有该选项，手动在ASP.NET Core项目的.csproj文件中添加以下配置：

   <Target Name="PublishAngular" AfterTargets="ComputeFilesToPublish">
     <Exec Command="npm install" WorkingDirectory="ClientApp" />
     <Exec Command="npm run build" WorkingDirectory="ClientApp" />
     <ItemGroup>
       <ResolvedFileToPublish Include="ClientApp/dist/client/browser/**/*" RelativePath="wwwroot\%(RecursiveDir)%(Filename)%(Extension)" />
     </ItemGroup>
   </Target>
   

6. 点击发布，等待发布完成

三、IIS站点及应用程序池配置 #

1. 打开IIS管理器，右键网站 → 添加网站：
   • 网站名称：自定义（例如Net8Angular17Demo）
   • 物理路径：选择之前设置的发布目录（C:\Publish\Net8Angular17Demo）
   • 端口：指定未被占用的端口（例如8080）
2. 右键新建站点 → 管理网站 → 高级设置，确认应用程序池关联正确
3. 配置应用程序池：
   • 若没有对应池，右键应用程序池 → 添加应用程序池
   • .NET CLR版本选择无托管代码
   • 托管管道模式选择集成

四、解决404/空白页的关键配置 #

1. 修改站点根目录下的web.config，添加Angular单页应用路由重写规则：

   <?xml version="1.0" encoding="utf-8"?>
   <configuration>
     <location path="." inheritInChildApplications="false">
       <system.webServer>
         <handlers>
           <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
         </handlers>
         <aspNetCore processPath="dotnet" arguments=".\YourAspNetCoreProject.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />
         <rewrite>
           <rules>
             <!-- 将非API、非静态文件的请求转发到Angular的index.html -->
             <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" />
                 <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
               </conditions>
               <action type="Rewrite" url="/index.html" />
             </rule>
           </rules>
         </rewrite>
       </system.webServer>
     </location>
   </configuration>
   

   注意将YourAspNetCoreProject.dll替换为实际的项目DLL文件名

2. 配置站点身份验证：
   • 右键站点 → 身份验证，启用匿名身份验证（模板示例应用默认无需授权）
3. 设置文件权限：
   • 给发布目录添加IIS_IUSRS和IUSR用户的读取权限
   • 若启用stdout日志，确保发布目录下的logs文件夹有写入权限

五、部署验证 #

1. 启动IIS站点，访问http://localhost:8080
2. 若仍为空白页，打开浏览器开发者工具排查：
   • 网络标签：检查JS/CSS等静态资源是否404，确认wwwroot目录下是否包含Angular构建后的文件
   • 控制台标签：查看是否有JS路径错误或其他运行时异常
3. 验证API可用性：访问http://localhost:8080/api/weatherforecast，确认能返回JSON数据

内容的提问来源于stack exchange，提问作者Tony