Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Blazor

最終更新 Markdown で表示Agent セットアップ

Blazor ↗ は、ブラウザー上で JavaScript ではなく C# コードを使える SPA フレームワークです。このガイドでは、Blazor でサイトを構築し、Cloudflare Pages でデプロイします。

.NET をインストールする

Blazor は C# を使います。Blazor プロジェクトを作成するには、最新の .NET SDK ↗ が必要です。システムに SDK がインストールされていない場合は、インストーラーをダウンロードして実行してください。

新しい Blazor WASM プロジェクトを作成する

Blazor のホスティングモデルは 2 種類あります。エンドユーザーに Blazor アプリケーションを配信するためにサーバーが必要な Blazor Server ↗ と、ブラウザー上で動作する Blazor WebAssembly ↗ です。Blazor Server は Cloudflare のエッジネットワークモデルと互換がないため、このガイドでは Blazor WebAssembly だけを使います。

次のコマンドを実行し、新しい Blazor WebAssembly（WASM）アプリケーションを作成します。

dotnet new blazorwasm -o my-blazor-project

ビルドスクリプトを作成する

デプロイするには、Cloudflare Pages が Blazor プロジェクトをビルドする方法が必要です。プロジェクトのルートディレクトリに build.sh ファイルを作成します。次の内容を書き込みます（最新の .NET SDK を使っていない場合は、.dotnet-install.sh の行を適切に更新してください）。

#!/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 でクローンする場合は、GitHub に対して push または pull する各コンピューターで SSH キーを生成 ↗ する必要があります。

詳細は GitHub のドキュメント ↗ と Git のドキュメント ↗ を参照してください。

.gitignore ファイルを作成する

.gitignore ファイルを作成すると、必要なものだけが GitHub リポジトリにプッシュされます。次のコマンドを実行して .gitignore ファイルを作成します。

dotnet new gitignore

GitHub リポジトリを作成する

repo.new ↗ にアクセスして、新しい GitHub リポジトリを作成します。作成後、新しく作ったプロジェクトディレクトリに移動します。次のコマンドをターミナルで実行して、ローカルアプリケーションを 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

Cloudflare Pages でデプロイする

サイトを Pages にデプロイするには、次の手順を実行します。

  1. Cloudflare ダッシュボードで Workers & Pages ページを開きます。

    Workers & Pages を開く ↗

  2. Create application を選びます。

  3. Pages タブを選びます。

  4. Import an existing Git repository を選びます。

  5. 作成した新しい GitHub リポジトリを選び、Begin setup を選びます。

  6. Set up builds and deployments セクションで、次の情報を入力します。

設定項目 値
Production branch main
Build command ./build.sh
Build directory output/wwwroot

設定が終わったら、最初のデプロイを開始できます。Cloudflare Pages が dotnet、プロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイする様子が表示されます。

サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。 Blazor サイトに新しいコードをコミットするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。新しいプルリクエストでは プレビューデプロイ も使えるため、本番にデプロイする前に変更の見た目を確認できます。

トラブルシューティング

ファイルが 25 MiB の上限を超えている

Error: Asset "/opt/buildhome/repo/output/wwwroot/_framework/dotnet.wasm" is over the 25MiB limit というエラーメッセージが出た場合は、次のいずれかの方法で解決します。

  1. 次の ガイド ↗ に沿ってアセットのサイズを小さくします。

または

  1. 出力から *.wasm ファイルを削除し（rm output/wwwroot/_framework/*.wasm）、Blazor アプリケーションを Brotli 圧縮ファイルを読み込む ↗ ように変更します。

さらに学ぶ

このガイドを完了すると、Blazor サイトを Cloudflare Pages にデプロイできています。ほかのフレームワークを始めるには、Framework ガイドの一覧 を参照してください。

役に立ちましたか？