Blazor

Blazor ↗ は、ブラウザ内で JavaScript の代わりに C# コードを使用できる SPA フレームワークです。このガイドでは、Blazor を使用してサイトを構築し、Cloudflare Pages を使用してデプロイします。

.NET のインストール

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

新しい Blazor WASM プロジェクトの作成

Blazor には 2 種類のホスティングモデルがあります: 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 ファイルを作成します。このファイルに次の内容を記入します（最新の .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.

Before you continue

All of the framework guides assume you already have a fundamental understanding of Git ↗. If you are new to Git, refer to this summarized Git handbook ↗ on how to set up Git on your local machine.

If you clone with SSH, you must generate SSH keys ↗ on each computer you use to push or pull from GitHub.

Refer to the GitHub documentation ↗ and Git documentation ↗ for more information.

`.gitignore` ファイルの作成

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

dotnet new gitignore

Create a GitHub repository

Create a new GitHub repository by visiting repo.new ↗. After creating a new repository, go to your newly created project directory to prepare and push your local application to GitHub by running the following commands in your terminal:

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 にデプロイするには:

Cloudflare ダッシュボード ↗ にログインし、アカウントを選択します。
アカウントホームで Workers & Pages を選択します。
アプリケーションの作成 > Pages > Git に接続 を選択します。

作成した新しい GitHub リポジトリを選択し、ビルドとデプロイの設定 セクションで次の情報を提供します:

設定オプション	値
プロダクションブランチ	`main`
ビルドコマンド	`./build.sh`
ビルドディレクトリ	`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 というエラーメッセージが表示された場合、次のいずれかのアクションを実行して解決します:

次のガイド ↗ を使用して、アセットのサイズを減らします。

または

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

Learn more

By completing this guide, you have successfully deployed your Blazor site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings