ことの発端はこれです。
ツイート内で言及している”既存の方法”とは@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プロジェクトを立ち上げます。
発行する
プロジェクトが立ち上がったら、ソリューションエクスプローラーから”発行”を選択します。
今回出力先は
|
1 |
bin\Release\netstandard2.1\publish\ |
としておきます。
Firebase側の設定
Firebase上でプロジェクトを作成しておきます。
プロジェクト作成終了後、コマンドプロンプトを立ち上げてfirebaseにログインします。
|
1 |
firebase login |
次に先程Blazorプロジェクトを出力したディレクトリにディレクトリ移動を行います。
このディレクトリまで移動した後、firebaseの初期化コマンドである firebase init を実行します。
firebase init後の回答
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
? Are you ready to proceed? (Y/n) → y ? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. → Hosting ? Select a default Firebase project for this directory: (Use arrow keys) →先ほど作成したプロジェクトを選択 ? What do you want to use as your public directory? (public) → dist ? Configure as a single-page app (rewrite all urls to /index.html)? → y ? File dist/index.html already exists. Overwrite? (y/N) → n |
回答終了後、以下のような構造になります。
次に、wwwrootの中身を全てdistに移動させます。
index.htmlも上書きしてください。
最後に firebase deploy を打てばデプロイが完了します。
おわりに
以上がBlazor製Appをfirebaseにデプロイする方法になります。
正式リリースされたこともあってかますます勢いづいているBlazor。
もっと多くの方に使われていくと嬉しいです。
