Blazor WebAssemblyアプリをFirebaseにデプロイする

ことの発端はこれです。

ツイート内で言及している”既存の方法”とは@nobuさんによる以下の記事で言及されている方法です。
画像付きでめちゃくちゃわかりやすいです。

Blazorで作成したウェブサイトをFirebaseで公開する – Qiita

しかし、調べてみるとBlazor WebAssembly 3.2.0 Preview5からデプロイする手法がちょっとだけ変わっているようです。
(自分の手元で確認した情報なので、もっと前からかもしれません)

Twitter上で同じような引っかかり方をしている方もいたので、ここで知見を共有できればと思います。

環境

  • Windows 10
  • Blazor WebAssembly 3.2.0 (プレビュー版でない)
  • VisualStudio 2019
  • Firebase CLI 8.2.0

手順

手順は基本的に @nobu さんによる

Blazorで作成したウェブサイトをFirebaseで公開する – Qiita

と同じです。

Blazorプロジェクトを立てる

FirebaseにデプロイするBlazorプロジェクトを立ち上げます。

適当なプロジェクト名や場所を指定しましょう
Blazor WebAssembly Appを選択します

発行する

プロジェクトが立ち上がったら、ソリューションエクスプローラーから”発行”を選択します。

発行ウィンドウを開きます
公開先を”フォルダー”にします。

今回出力先は

としておきます。

発行ボタンを押して発行します

Firebase側の設定

Firebase上でプロジェクトを作成しておきます。

適当なプロジェクト名をつけましょう
適当に進めてください

プロジェクト作成終了後、コマンドプロンプトを立ち上げてfirebaseにログインします。

次に先程Blazorプロジェクトを出力したディレクトリにディレクトリ移動を行います。

先程出力したディレクトリ

このディレクトリまで移動した後、firebaseの初期化コマンドである firebase init を実行します。

firebase init後の回答

回答終了後、以下のような構造になります。

firebase init後

次に、wwwrootの中身を全てdistに移動させます。

index.htmlも上書きしてください。

wwwrootの中身
全てファイルを置き換える

最後に firebase deploy を打てばデプロイが完了します。

おわりに

以上がBlazor製Appをfirebaseにデプロイする方法になります。

正式リリースされたこともあってかますます勢いづいているBlazor。

もっと多くの方に使われていくと嬉しいです。

Atria
  • Atria
  • 大学生個人開発者| AtCoder(茶) / C# / VBA /その他趣味いっぱい