如何将.NET 6的Blazor WebAssembly作为静态站点部署到GitLab Pages

问题根因 #

你的部署失败是两个原因共同导致的：

• 静态文件目录结构不符合GitLab Pages要求
• Blazor默认站点根路径与GitLab Pages的子路径部署规则不匹配

具体解决步骤 #

1. 修正CI文件的文件复制逻辑 #

GitLab Pages要求对外提供的静态资源必须直接放在public目录的根路径下，你当前配置是把整个publish目录复制到public，导致所有前端资源都放在了public/wwwroot二级目录下，需要修改.gitlab-ci.yml中pages阶段的脚本：

pages:
  stage: delivery
  script:
    - mkdir -p public
    # 直接把发布产物的wwwroot下的所有内容复制到public根目录
    - cp -a $PUBLISH_OUTPUT_DIR/wwwroot/* public/
    # 新增单页应用路由支持，避免刷新页面404
    - cp public/index.html public/404.html
  artifacts:
    paths:
    - public
  only:
  - main

2. 修正Blazor站点根路径配置 #

Blazor默认会从站点根路径请求资源，但你的GitLab Pages部署路径为子路径/sasw-community/sasw-editor/，需要修改基础路径配置，有两种方案可选：

• 方案1：修改项目中wwwroot/index.html的base标签，将<base href="/" />改为<base href="/sasw-community/sasw-editor/" />
• 方案2：在发布命令中动态指定基础路径，无需修改源码，修改publish阶段的脚本：

  publish:
    stage: publish
    script:
      - dotnet publish -c Release -o $PUBLISH_OUTPUT_DIR -p:StaticWebAssetBasePath="/sasw-community/sasw-editor/"
    artifacts:
      paths: 
        - $PUBLISH_OUTPUT_DIR/
      expire_in: 8 hour
    rules:
      - if: $CI_COMMIT_TAG
        when: never  
      - when: on_success
  

3. 注意访问地址 #

配置修改后重新运行流水线，部署完成后请访问GitLab Pages给项目分配的正式地址（可在项目「设置」-「Pages」页面查看），不要使用CI任务生成的临时产物地址，临时地址的路径规则和正式Pages地址不一致。

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