如何在 GitLab Pages 中将 Blazor WebAssembly 部署为静态站点

Posted 2023-03-31

【中文标题】如何在 GitLab Pages 中将 Blazor WebAssembly 部署为静态站点

【英文标题】：How to deploy Blazor WebAssembly as static site in GitLab Pages

【发布时间】：2021-12-03 11:32:43

【问题描述】：

我找不到任何关于如何将 Blazor Web 程序集应用程序作为静态站点部署到 GitLab Pages 的指南。有没有人设法为 .NET 6 做到这一点？

我创建了一个示例 Web 程序集 Blazor 客户端应用程序：

https://gitlab.com/sunnyatticsoftware/sasw-community/sasw-editor

创建这个简单的 Web 程序集的步骤是：

安装 .NET 6 SDK 创建 repo 并克隆它（例如：sasw-editor） 使用 Web 程序集 Blazor 项目创建解决方案

dotnet new gitignore
dotnet new blazorwasm --name Sasw.Editor.Web --output src/Sasw.Editor.Web --no-https
dotnet new sln
dotnet sln add src/Sasw.Editor.Web

编译并运行它

dotnet build
dotnet run --project src/Sasw.Editor.Web

这是在 launchsettings.json 定义的端口上运行 blazor 应用程序的一种方式

Building...
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5291
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: C:\src\sasw-editor\src\Sasw.Editor.Web

我阻止它。与 Kestrel 一起食用时效果很好。

现在，发布分发文件夹的过程是这样的

dotnet publish -c Release -o publish

所有工件和文件现在都在publish 文件夹下。所以，理论上，我可以用一个简单的网络服务器来提供这些东西。我安装了一个名为 local-web-server 的基本 Web 服务器工具（它需要 NodeJs/npm，但您可以使用任何其他 Web 服务器）

npm install -g local-web-server

现在我导航到我的index.html 所在的publish/wwwroot 文件夹 然后我在那里启动网络服务器

ws
Listening on http://5CD013DP5L:8000, http://192.168.1.13:8000, http://127.0.0.1:8000, http://172.21.208.1:8000

如果我在 http://127.0.0.1:8000 或上述任何其他网址上打开浏览器，我可以看到我的 Blazor wasm 应用程序运行良好。

我想在 GitLab 页面中托管相同的 publish 文件夹，理论上它能够提供静态文件。

所以我创建了一个.gitlab-ci.yml 来编译、发布和复制内容到 GitLab 页面的公共文件夹。

image: mcr.microsoft.com/dotnet/sdk:6.0

variables:
  GIT_DEPTH: 1000
  PUBLISH_OUTPUT_DIR: publish

stages:
  - build
  - test
  - publish
  - delivery

build:
  stage: build
  script:
    - dotnet restore --no-cache --force
    - dotnet build --configuration Release --no-restore
  artifacts:
    paths:
    - test
    expire_in: 8 hour
  rules:
    - if: $CI_COMMIT_TAG
      when: never  
    - when: always

test:
  stage: test
  script: dotnet test --blame --configuration Release
  allow_failure: false
  rules:
    - if: $CI_COMMIT_TAG
      when: never  
    - exists:
      - test/**/*Tests.csproj

publish:
  stage: publish
  script:
    - dotnet publish -c Release -o $PUBLISH_OUTPUT_DIR
  artifacts:
    paths: 
      - $PUBLISH_OUTPUT_DIR/
    expire_in: 8 hour
  rules:
    - if: $CI_COMMIT_TAG
      when: never  
    - when: on_success

pages:
  stage: delivery
  script:
    - cp -a $PUBLISH_OUTPUT_DIR/ public
  artifacts:
    paths:
    - public
  only:
  - main

管道成功完成。我可以在 publish 文件夹中看到与本地完全相同的结构，这次是在 GitLab 的 public 文件夹下

但它无法呈现应用程序 https://sunnyatticsoftware.gitlab.io/-/sasw-community/sasw-editor/-/jobs/1846501612/artifacts/public/wwwroot/index.html

表演

Loading...
An unhandled error has occurred. Reload ???? 

我可以看到它正在尝试访问 https://sunnyatticsoftware.gitlab.io/ 或 https://sunnyatticsoftware.gitlab.io/favicon.ico 并返回 404

favicon.ico 将存在于https://sunnyatticsoftware.gitlab.io/-/sasw-community/sasw-editor/-/jobs/1846501612/artifacts/public/wwwroot/favicon.ico

所以这一定是某种 URL 重写问题，对吧？

任何帮助将不胜感激。

【参考方案1】：

解决方法就是使用下面的

pages:
  stage: delivery
  script:
    - cp -a $PUBLISH_OUTPUT_DIR/wwwroot public
  artifacts:
    paths:
    - public
  only:
  - main

并将index.html 中的<base href="/sasw-community/sasw-editor/" /> 与相对路径一起使用。

我在 youtube 上录制了一个快速教程https://youtu.be/c5nTDhHDnFg

完整示例请参阅https://gitlab.com/sunnyatticsoftware/training/blazorwasm-pages

我仍然不知道将本地开发的基础 / 相对路径与产品基础 /sasw-community/sasw-editor/ 混合并动态更改它的好方法（甚至可能吗？）

但是问题解决了。

【参考方案2】：

始终将其保留在base href="/"，然后在您的 ci 中将其更改为您需要的任何内容。例如。在 gitlab 上你可以使用 CI_PROJECT_NAME 变量。

pages:
  stage: deploy
  variables:
    SED_COMMAND: 's#<base\shref="\/"\s?\/>#<base href="\/$CI_PROJECT_NAME\/" \/>#g'
  script:
    - cp -a $PUBLISH_OUTPUT_DIR/wwwroot public
    - sed -r -i "$SED_COMMAND" public/index.html
  artifacts:
    paths:
    - public
  only:
    - main