GitHub Actions中dotnet publish后Blazor App缺失wwwroot/scripts文件夹

问题描述 #

构建Blazor WebAssembly应用，通过GitHub Actions部署到Azure静态Web Apps。本地运行正常，但GitHub Actions流水线发布后，wwwroot/scripts文件夹缺失，导致动态导入模块失败。用act本地运行构建时，gulp任务执行成功但目标文件夹无输出。

配置信息 #

GitHub工作流任务 #

- uses: actions/checkout@v4
  with:
    submodules: true
- name: Deploy to Azure Static Web Apps
  id: builddeploy
  uses: Azure/static-web-apps-deploy@v1
  env:
      ENABLE_MULTIPLATFORM_BUILD: true
  with:
    azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
    repo_token: ${{ secrets.GITHUB_TOKEN }}
    action: "upload"
    app_location: "AppLocation"
    output_location: "wwwroot"
    app_build_command: "dotnet publish -c Release"

gulpfile.js #

var paths = {
    entries: ["./Components/Canvas2D/Canvas2d.ts"],
    output: "./wwwroot/scripts",
};

gulp.task("default", function () {
    return gulp
        .src(paths.entries)
        .pipe(
            esbuild({
                outdir: "/",
                bundle: true,
                target: "es2015",
                format: "esm",
                sourcemap: true,
                minify: true,
            })
        )
        .pipe(gulp.dest(paths.output));
});

package.json构建指令 #

"scripts": {
  "build": "gulp default"
}

报错信息 #

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: error loading dynamically imported module: https://blazorapp.fun/scripts/Canvas2d.js

解决方案 #

1. 调整构建命令顺序
   当前app_build_command仅执行dotnet publish，未先运行gulp任务。修改构建命令为：

   npm install && npm run build && dotnet publish -c Release
   

   确保先安装依赖、执行gulp生成JS文件，再执行dotnet发布。

2. 检查路径相对位置
   确认app_location设置的"AppLocation"是项目根目录，gulp输出路径./wwwroot/scripts相对于该位置是否正确。若app_location是子文件夹，需调整路径为../wwwroot/scripts这类对应相对路径。

3. 强制dotnet publish包含生成文件
   在Blazor项目的.csproj文件中添加以下配置，确保wwwroot/scripts下的文件被纳入发布输出：

   <ItemGroup>
     <Content Include="wwwroot/scripts/**/*">
       <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
     </Content>
   </ItemGroup>
   

4. 验证Azure静态Web Apps输出路径匹配
   output_location设置为wwwroot，需确认dotnet publish后的输出目录（默认bin/Release/netX.X/publish/wwwroot）中包含scripts文件夹。Azure静态Web Apps会从app_location下的output_location目录读取文件，需保证路径完全匹配。

5. 修复gulp任务的输出路径配置
   gulp的esbuild中outdir: "/"可能导致路径解析异常，尝试改为相对路径：

   esbuild({
       outdir: "./",
       // 其他配置不变
   })
   

   或直接指定输出文件名避免路径问题：

   esbuild({
       outfile: "Canvas2d.js",
       // 其他配置不变
   })
   

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