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



我找不到任何关于如何将Blazor web组装应用程序作为静态网站部署到GitLab Pages的指南。有人能为.NET 6做到这一点吗?

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

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

创建这个简单web组件的步骤是:

  1. 安装.NET 6 SDK
  2. 创建repo并克隆它(例如:sasw-editor(
  3. 使用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
    
  4. 编译并运行它
    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:srcsasw-editorsrcSasw.Editor.Web

我停了。配上红隼后效果很好。

现在,发布分发文件夹的过程就像这个

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或上面的任何其他url上打开浏览器,我可以看到我的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重写问题,对吧?

任何帮助都将不胜感激。

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

pages:
stage: deploy
variables:
SED_COMMAND: 's#<baseshref="/"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

解决方案只是使用以下

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

并将CCD_ 19中的CCD_。

我在Odysee频道上录制了一个快速教程https://odysee.com/@sunnyAtticSoftware:a/blazor wasm gitlab pages:e

请参阅https://gitlab.com/sunnyatticsoftware/training/blazorwasm-pages全样本

我仍然不知道有什么好方法可以将本地开发的基础/相对路径与产品基础/sasw-community/sasw-editor/混合并动态更改它(这可能吗?(

但问题已经解决了。

最新更新