Blazor WASMサイトをGithub Pagesへアップロード

はじめに

前回の記事でgithub pagesにサイトを作成しました。Blazor WASM プロジェクトは静的サイトなので、Github Pagesでも表示でると考え試しましたが、意外と苦労しました。

開発環境

• 開発PC
  • OS: Windows 11 Pro
  • 開発ツール: Visual Studio 2022 (Windows)
  • .NET SDK: .NET 8.0

アップロード方法

Visual studio 2022で発行し生成された、wwwrootフォルダの中身を、Github Pagesのフォルダへコピーして、githubでcommit、pushししばらくすると反映されます。

最初のLoadingで停止

Blazor WASMのページを表示すると、関連ファイルを読み込んでからページが表示されます。Loadingところで停止してしまいました。

ブラウザF12 開発ツールで見たところ、
GET https://lmjs7.net/_framework/blazor.webassembly.js net::ERR_ABORTED 404 (Not Found)
とエラーになっていました。jsファイルをのアドレスを直接ブラウザで表示させようとしても404 (Not Found)となってしまいます。

対応策

ChatGPTに聞いたところ、対応策を教えてくれました。

1. GitHub Pages用の<base href>を設定

GitHub PagesのURL構造に基づいて、Blazorアプリの<base href>を動的に設定します。

方法：wwwroot/index.htmlの調整

index.htmlに以下のコードを追加して、<base href>を動的に切り替えます：

<script>
    var baseHref = window.location.pathname.endsWith('/') 
        ? window.location.pathname 
        : window.location.pathname + '/';
    document.write('<base href="' + baseHref + '">');
</script>

このスクリプトは、GitHub Pagesのホスティングパス（リポジトリ名を含む）を自動的に検出し、正しい<base href>を設定します。

2. .nojekyllファイルを追加

GitHub Pagesでアンダースコア（_frameworkや_contentなど）の扱いを変更するために、.nojekyllファイルをプロジェクトに追加します。

方法：Visual Studioで追加

(1) ソリューションエクスプローラーでwwwrootフォルダーを右クリック。
(2)「新しい項目の追加」→「テキストファイル」を選択。
(3) ファイル名を.nojekyllに変更して保存します。

.nojekyllファイルは空のままで問題ありません。

結果

無事にサンプルのWebページを表示することができました。

最後に

Blazor WASM プロジェクトで作成したWebページをGithub Pagesで表示することができました。今後はBlazor WASMでいろいろ作成し、投稿しながら投稿しようと思います。