Blazorをインストールする方法

をASP .あなたが作成することができます.ブラウザのサンドボックスの中で完全に動くNET Webアプリケーション.ブレザーWASMプロジェクトの公開出力は静的ファイルです.今、あなたは走ることができます.サーバー側のコードがないNET Webアプリケーションでは、これらのアプリケーションをNetLifyなどのさまざまな静的サイトホストに配備できます.
他のスタティックサイトホストでBlazor Washをホストすることに興味があるならば、他にいくつかのチュートリアルがあります

Azure Static Web Apps

GitHub Pages

Firebase Hosting

このチュートリアルでは、Bladeor WASMをNetlifyに展開する方法を示します.Netlifyは非常に人気のある静的サイトのホストですが、静的なサイトをホストするの上に、Netlifyは競争上の端を与える無料と有料機能のトンを提供しています.
このガイドでは、これらの高レベルの手順を参照してください.

クリエイトブレザー

プロジェクトをGitリポジトリにコミットする

新しいGitHubプロジェクトを作成し、GitのリポジトリをGithubにプッシュします

新しいNetlifyサイトを作成します

インデックスへのすべての要求を書き直します.HTML

必要条件:

.ネットCLI

ジット

ギタブ口座

Netlifyアカウント

あなたはsource code for this guide on GitHub .

クリエイトブレザー

次のコマンドを実行して、新しいBlazor WAMMプロジェクトを作成します.

mkdir BlazorWasmNetlify 
cd BlazorWasmNetlify 
dotnet new blazorwasm

アプリケーションを試して実行するにはdotnet run と出力のURLを参照https://localhost:5001 ):

dotnet run
# Building...
# info: Microsoft.Hosting.Lifetime[0]
# Now listening on: https://localhost:5001
# info: Microsoft.Hosting.Lifetime[0]
# Now listening on: http://localhost:5000
# 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:\Users\niels\source\repos\BlazorWasmNetlify
# info: Microsoft.Hosting.Lifetime[0]
# Application is shutting down...

オプション:あなたはdotnet publish プロジェクトを発行し、出力を確認するコマンド

dotnet publish
# Microsoft (R) Build Engine version 16.8.0+126527ff1 for .NET
# Copyright (C) Microsoft Corporation. All rights reserved.
# 
# Determining projects to restore...
# All projects are up-to-date for restore.
# BlazorWasmNetlify -> C:\Users\niels\source\repos\BlazorWasmNetlify\bin\Debug\net5.0\BlazorWasmNetlify.dll
# BlazorWasmNetlify (Blazor output) -> C:\Users\niels\source\repos\BlazorWasmNetlify\bin\Debug\net5.0\wwwroot Optimizing assemblies for size, which may change the behavior of the app. Be sure to test after publishing. See: https://aka.ms/dotnet-illink
# Compressing Blazor WebAssembly publish artifacts. This may take a while...
# BlazorWasmNetlify -> C:\Users\niels\source\repos\BlazorWasmNetlify\bin\Debug\net5.0\publish\

発行ディレクトリでは、Webを見つけるでしょう.設定ファイルとWWWrootフォルダ.設定ファイルは、IISでアプリケーションをホストするのに役立ちますが、静的サイトホスト用のファイルは必要ありません.あなたが必要とするすべては、WWWRootフォルダの中にあります.WWWRootフォルダーにインデックスが含まれます.ブレーザーアプリケーションを実行するために必要なHTML、CSS、JS、およびDLLファイル.

ブレザープロジェクトをGithubにプッシュ

このチュートリアルでは、アプリケーションのソースコードはGithubリポジトリ内にある必要があります.
まず、ローカルのgitリポジトリを作成し、ソースコードをリポジトリにコミットする必要があります.

# add the gitignore file tailored for dotnet applications, this will ignore bin/obj and many other non-source code files 
dotnet new gitignore
# create the git repository 
git init 
# track all files that are not ignore by .gitignore 
git add --all 
# commit all changes to the repository
git commit -m "Initial commit"

新規githubリポジトリを作成するinstructions ) そして、空のgithubリポジトリページから「コマンドラインから既存のリポジトリをプッシュする」というコマンドをコピーします.

git remote add origin https://github.com/Swimburger/BlazorWasmNetlify.git 
git push -u origin main

NetLifyサイトを作成する

NetLifyにログインして、あなたのチームページの「Gitからの新しいサイト」ボタンをクリックしてください

Githubボタンをクリックします.これは、あなたのGitHubアカウントにNetLifyパーミッションを与えることを通してあなたを連れて行く新しいウインドウを開きます.必要なアクセス許可をNetlifyに与え、少なくとも作成したGithubリポジトリにnetlifyアクセスを与える.

番目のステップでは、Githubリポジトリを検索し、リポジトリを選択します.

Step 3では、ビルドコマンドを提供する必要があります.Netlifyのビルドエージェントは、すべての必要があります.Ubuntuのビルドマシンにネットツールをインストールしました.
フィールドを入力しますdotnet publish -c Release -o release .
「発行ディレクトリ」フィールドに「release/wwwroot」と入力します.最後に、「展開サイト」ボタンをクリックします.

Netlifyサイトを作成し、サイトの概要ページにリダイレクトされます.このページでは、展開状態の変更をリアルタイムで見ることができます.

「展開」セクションの下の展開をクリックすると、展開の詳細が表示されます.ここでは、展開のリアルタイムでログ出力を見ることができます.
展開が終了すると、展開詳細ページの「プレビュー」ボタンをクリックできます.これはあなたのウェブサイトに表示されます.
NetLifyサイトの概要ページでは、あなたのサイトの名前の下にあなたのサイトへのリンクもあります.
あなたがちょうど展開したウェブサイトに移動すると、Blazor Washアプリケーションが返され、すべてが動作していることがわかります.

ほとんどすべてである.カウンターページに移動し、ページを更新すると、NetLifyの404ページで迎えられます.

インデックスへのすべての要求を書き直します。HTML

404問題を解決するには、NetLifyにインデックスへのすべてのリクエストを書き直すように指示する必要があります.HTML .これを行う最も簡単な方法はNetlify configuration file Gitリポジトリのルートでファイルに書き換え規則を追加します.
"netlify . toml "という名前のリポジトリのルートにファイルを追加します.この設定ファイルの使用the TOML configuration language .
NetLifify設定ファイルに次のコンテンツを追加します.

[[redirects]]
  from = "/\*"
  to = "/index.html"
  status = 200

リダイレクトの設定についての詳細はこちらをご覧くださいNetlify's Redirects and rewrites docs .
Githubに変更を加え、コミットし、プッシュします.

git add *
git commit -m "Add netlify.toml and configure SPA redirect for Netlify site"
git push

NetLifyはGitHubリポジトリの変更に通知され、自動的にサイトを再配備します.展開の一部として、NetLifyは設定ファイルを読み込み、tomlファイルで指定されたサイトを設定します.
再配備が完了すると、カウンターページに移動し、リフレッシュをヒットします.今度は404ページの代わりにカウンターページを見るべきです.

概要

Velor webassemblyは静的ファイルとして使用できます.これらのファイルはNetLifyなどの静的ホスティングサービスでホストできます.Githubリポジトリをソースコードとして新しいNetLifyサイトを作成できます.netlifyのビルドイメージには.ネットツールを構築し、公開することができます.NetLifyビルドを使用したNETアプリケーション.ルートパスではない間、Blazor WASMアプリケーションを更新すると、NetLifyは404ページを返します.代わりにBlazor WAIMアプリケーションを返すには、NetLifyで再書き込みを作成できます.すべてのリクエストをインデックスに書き換えるように設定します.HTML .