Хостим WASM-приложения на github pages в два клика


Хостим WASM-приложения на github pages в два клика

Приветствую. Хочу донести гениальную и простейшую идею о том, как можно делать несложные бессерверные веб-приложения и бесплатно хостить их на github pages.

Я не дословно перевожу, а скорее адаптирую, опуская совсем очевидные вещи, поэтому будет отсебятина.

С помощью Blazor WebAssembly (WASM) мы можем создавать веб-приложения, которые выполняются полностью на стороне клиента. При этом после публикации ( dotnet publish ) мы получаем статические файлы, которые потом просто юзер скачивает себе и выполняет. Благодаря этому, мы можем хостить подобные приложения на статических хостингах, например, github pages.

Создаем hello world на Blazor WASM

Воспользуемся замечательным dotnet CLI. Следующая команда

создает приложение-шаблон с демонстративным функционалом. Чтобы потыкаться локально, запустим

По умолчанию путь будет localhost:5000 или localhost:5001 .

Чтобы посмотреть на то, как выглядят статические файлы, которые мы будем публиковать, запустим команду:

Она сгенерит всякого в bin/Debug/net6.0/publish/wwwroot (в зависимости от таргет рантайма и конфигурации). Теоретически можно попробовать index.html у себя, но нужно будет поменять там путь (либо закинуть это все содержимое wwwroot к себе в корень).

Перейдем к следующей секции предполагая, что читатель закинул проект в репозиторий на гитхабе.

Как закинуть проект на гитхаб?

После того, как мы создали репозиторий на самом гитхабе, приступим к тому, чтобы в него залить наш проект.

Инициализируем репозиторий следующим набором команд

Теперь, чтобы запушить, нужно привязать наш удаленный репозиторий:

Все, проверяйте ваш репозиторий на гитхабе. На нем должно быть все самое важное из вашего кода в ветке main (если вы не переименовали основную ветку).

Создаем CI для установки приложения на github pages

Чтобы создать автоматическое обновление нашего веб-приложения, воспользуемся встроенным в гитхаб Github Actions:

Теперь можно писать сам workflow, по котому будет происходить магия. Это формат YAML:

( –nologo убирает ненужные логи в консоли)

Теперь то, что сгенерировалось в release, нужно закинуть в бранч gh-pages. Для этого можно использовать существующий Action, добавив в steps:

Здесь, наверное, все интуитивно. Все, наш файл вроде бы готов. После того, как мы его закоммитим в репозиторий, у нас должна появиться ветка, и, вместе с ней, сайт (по адресу yourusername.github.io/YourRepo ).

Так выглядит ваш репозиторий, если все нормально

Кстати, настройки Github Pages живут в Settings -> Pages в репозитории.

Не работает!

Еще пару небольших моментов пофиксить, ведь если до этого момента все было удачно, то сейчас при открытии сайта мы получаем

Смотрим ошибки и видим, что не нашлась куча файлов

Как видим, у нас кто-то украл часть пути (должно было быть swimburger.github.io/BlazorGitHubPagesDemo/css/app.css и остальные). Это из-за того, что у нас есть / в index.html, который генерируется. Автор оригинала предлагает использовать следующий костыль трюк:

(заменив BlazorGitHubPagesDemo на имя вашей репы)

После обновления, получаем

все еще часть файлов не найдена. Это потому, что Github Pages проигнорировал папку, которая начинается с _, потому что думает, что это jekyll. А значит его надо отключить:

Все, теперь все точно должно заработать.

Кастомная страница 404

Можно создать собственную страницу для ошибки 404. Для этого мы просто скопируем index.html в 404.html:

Заключение

Мы захостили функциональное веб-приложение на статическом хостинге Github pages, что может быть удобно для каких-то маленьких утилит или игр, а также сайтов всяких опенсорсных проектов.

Спасибо за внимание!

От переводчика

Эту статью я писал уже попробовав эту штуку сам, опустив ненужные моменты и учитывая современные инструменты до какой-то степени.

Чтобы не быть голословным, я сам сделал небольшую приложеньку (сам адрес), которая анализирует типы из BCL с помощью рефлексии. Вот здесь мой deployment, который как раз делает магию. Если шестой дотнет не хочется ставить, можно сделать все так же, но с пятым.


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *