Как развернуть Blazor WebAssembly как статический сайт на страницах GitLab

Я не могу найти руководства по развертыванию приложения веб-сборки Blazor на GitLab Pages в качестве статического сайта. Кому-нибудь удалось это сделать для .NET 6?

Я создал образец клиентского приложения Blazor веб-сборки:

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

Шаги по созданию этой простой веб-сборки:

  1. Установить .NET 6 SDK
  2. Создайте репо и клонируйте его (например: sasw-editor)
  3. Создайте решение с помощью веб-сборки Blazor Project 
            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

Это способ запустить приложение Blazor на порту, определенном в launchsettings.json

      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

Я это прекращаю. Он отлично работает при подаче с пустельгой.

Теперь процесс публикации папки распространения будет таким

      dotnet publish -c Release -o publish

Все артефакты и файлы теперь находятся в папке. Итак, теоретически я могу обслуживать эти вещи с помощью простого веб-сервера. Я устанавливаю базовый инструмент веб-сервера под названием local-web-server (для этого требуется NodeJs / npm, но вы можете использовать любой другой веб-сервер)

      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, которые теоретически могут обслуживать статические файлы.

Итак, я создаю .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 папка, на этот раз под public папка в GitLab

Но не удается отобразить приложение 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, верно?

Любая помощь приветствуется.

Источник

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
Источник

Решение состоит в том, чтобы просто использовать следующее

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

и использовать <base href="/sasw-community/sasw-editor/" />в index.htmlс относительным путем.

Я записал краткий туториал на ютубе https://youtu.be/c5nTDhHDnFg

См. https://gitlab.com/sunnyatticsoftware/training/blazorwasm-pages с полным образцом

Я до сих пор не знаю, как хорошо смешать базу локальной разработки /относительный путь с базой prod /sasw-community/sasw-editor/и изменить его динамически (возможно ли это вообще?)

Но проблема решается.

Источник
Другие вопросы по тегам