← Cloudflare Pages / pages / framework-guides

Blazor

Blazor ↗ это SPA-фреймворк, позволяющий использовать в браузере код на C# вместо JavaScript. В этом руководстве вы создадите сайт на Blazor и развернёте его с помощью Cloudflare Pages.

Blazor использует C#. Вам потребуется последняя версия .NET SDK ↗ чтобы продолжить создание проекта Blazor. Если SDK не установлен в системе, скачайте и запустите установщик.

Существует два типа моделей размещения Blazor: Blazor Server ↗ который требует сервер для передачи приложения Blazor конечному пользователю, и Blazor WebAssembly ↗ который выполняется в браузере. Blazor Server несовместим с моделью периферийной сети Cloudflare, поэтому в этом руководстве используется только Blazor WebAssembly.

Создайте новое приложение Blazor WebAssembly (WASM), выполнив следующую команду:

dotnet new blazorwasm -o my-blazor-project

Для развёртывания Cloudflare Pages потребуется способ сборки проекта Blazor. В корневом каталоге проекта создайте build.sh файл. Заполните файл следующим содержимым (изменив .dotnet-install.sh строку соответствующим образом, если вы используете не самую новую версию .NET SDK):

#!/bin/sh
curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh
chmod +x dotnet-install.sh
./dotnet-install.sh -c 8.0 -InstallDir ./dotnet
./dotnet/dotnet --version
./dotnet/dotnet publish -c Release -o output

Ваш build.sh файл должен быть исполняемым, чтобы команда сборки работала. Сделать его исполняемым можно командой chmod +x build.sh.

Все руководства по фреймворкам предполагают, что у вас уже есть базовое понимание Git ↗. Если вы новичок в Git, обратитесь к этому краткое руководство по Git ↗ о том, как настроить Git на локальном компьютере.

Если вы клонируете по SSH, необходимо сгенерировать ключи SSH ↗ на каждом компьютере, с которого вы отправляете или получаете данные из GitHub.

См. документация GitHub ↗ и Документация Git ↗, где это описано подробнее.

Создание .gitignore файл гарантирует, что в репозиторий GitHub попадёт только нужное. Создайте .gitignore файл с помощью следующей команды:

dotnet new gitignore

Создайте новый репозиторий GitHub, перейдя по адресу repo.new ↗. После создания нового репозитория перейдите в каталог только что созданного проекта, чтобы подготовить локальное приложение и отправить его в GitHub, выполнив в терминале следующие команды:

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Чтобы развернуть сайт в Pages:

1. На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.

   Перейдите в Workers & Pages ↗

2. Выберите Создать приложение.

3. Выберите Pages на вкладке.

4. Выберите Импорт существующего репозитория Git.

5. Выберите созданный вами новый репозиторий GitHub, а затем нажмите Начало настройки.

6. В Настройка сборок и деплоев раздел и укажите следующую информацию:

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

После деплоя сайта вы получите уникальный поддомен для своего проекта на *.pages.dev. Каждый раз, когда вы фиксируете новый код в своем сайте Blazor, Cloudflare Pages автоматически пересоберет ваш проект и развернет его. Вы также получите доступ к развёртывания предпросмотра для новых pull request, чтобы вы могли увидеть, как изменения выглядят на сайте, прежде чем разворачивать их в продакшен.

Если вы получаете сообщение об ошибке Error: Asset "/opt/buildhome/repo/output/wwwroot/_framework/dotnet.wasm" is over the 25MiB limit, решите эту проблему одним из следующих способов:

1. Уменьшите размер ваших ресурсов с помощью следующего руководство ↗.

Или

2. Удалите *.wasm файлы из результата сборки (rm output/wwwroot/_framework/*.wasm) и измените ваше приложение Blazor, чтобы загружать файлы, сжатые Brotli ↗ взамен.

После выполнения этого руководства вы успешно развернули свой сайт на Blazor на Cloudflare Pages. Чтобы начать работу с другими фреймворками, обратитесь к списку руководств по фреймворкам.