我找不到任何有关如何将 Blazor Web 程序集应用程序作为静态站点部署到 GitLab Pages 的指南。有人在 .NET 6 上成功做到这一点吗?
我创建了一个示例 Web 程序集 Blazor 客户端应用程序:
https://gitlab.com/sunnyatticsoftware/sasw-community/sasw-editor
创建这个简单的 Web 程序集的步骤是:
sasw-editor
)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
现在我导航到我的
publish/wwwroot
所在的 index.html
文件夹
我在那里启动网络服务器
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
文件夹下
表演
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#<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
更新:Alexander选择的答案是一个更优雅的解决方案
解决方案很简单,使用以下方法
pages:
stage: delivery
script:
- cp -a $PUBLISH_OUTPUT_DIR/wwwroot public
artifacts:
paths:
- public
only:
- main
并将
<base href="/sasw-community/sasw-editor/" />
中的 index.html
与相对路径一起使用。
我在我的 Odysee 频道上录制了一个快速教程 https://odysee.com/@sunnyAtticSoftware:a/blazor-wasm-gitlab-pages:e
请参阅 https://gitlab.com/sunnyatticsoftware/training/blazorwasm-pages 包含完整示例
我仍然不知道有什么好方法将本地开发的基础
/
相对路径与产品基础/sasw-community/sasw-editor/
混合并动态更改它(甚至可能吗?)
但是问题已经解决了。