Blazor最速デプロイ Firebase Hosting編

今回はBlazor Webassemblyアプリを公開する手段として、今回は [Firebase Hosting](https://firebase.google.com/?hl=ja) にデプロイする方法を紹介します。

**Firebase**

https://firebase.google.com/?hl=ja

[Firebase Hosting](https://firebase.google.com/?hl=ja) は、[Sparkプラン](https://firebase.google.com/pricing?hl=ja)であれば、無料でWebに公開することができます。設定不要でSSLに対応しているため、Blazor WebAssemblyでPWAをデプロイすることも可能です。デプロイするツールも豊富に提供されており、さくっとBlazorアプリケーションをリリースしたいときは便利です:thumbsup:

Firebase Hostingにデプロイする方法は既に記事があります:point_up:私もよく参考にさせて頂いてます:pray:
最新のツールへの対応や自分がはまったところも含めて、記事にしたいと思います:thumbsup:

**Blazorで作成したウェブサイトをFirebaseで公開する** (@nobu17さん)

https://qiita.com/nobu17/items/67c11cf622f2e4721635

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

http://atriasoft.work/cs/1249

# 前提
* Googleアカウント作成済み
* VisualStudio2022 Previewインストール済み
* Windows10でのデプロイ環境
* Blazor WebAssembly(.NET 6.0)アプリのデプロイ
* Firebase CLI(スタンドアロンバイナリ)でのデプロイ

#Blazor WebAssemblyファイルの作成
今回はBlazor WebAssemblyアプリケーションをデプロイします。Blazor WebAssemblyアプリケーションはブラウザで実行されるため、静的サイトとしてそのままデプロイすることができます。

プロジェクトを作成して、フォルダへ発行をします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/9ddeae20-9f2e-3ff0-fcda-34edb08946c6.png" width=60%>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/ca8cd9af-da6d-fecf-4f83-45a3a2bc68bc.png" width=60%>

.Net6 だと発行されるパスは以下の通りになります。

```cmd:
bin/Release/net6.0/browser-wasm/publish/
```

発行してデプロイ対象のファイルを作成します。

#Firebaseプロジェクトの作成

Firebase コンソールにアクセスして、新規のプロジェクトを作成します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/2c77e9f3-1907-19b6-1054-5162280af213.png" width=50%>
Googleアナリティクスは対応したGoogleアカウントが必要になるので、ここではOFFを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/54644f7d-6cea-c93e-d3b1-272aeb2cfb7d.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/8cd6386b-41f9-34ab-6398-d77870948a9a.png" width=50%>
Firebaseプロジェクト準備としてはこれで完了です:v:簡単ですね:thumbsup::thumbsup::thumbsup:

#Firebase Hostingデプロイ
##Firebase CLIのセットアップ

Firebase CLIをダウンロードします。Windowsだとスタンドアロンバイナリが便利です。

**Firebase CLI リファレンス**

https://firebase.google.com/docs/cli?hl=ja

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/6f229cdf-a5b7-a4d8-6c5b-9d72155aafa9.png" width=70%>

## Firebase CLIの実行

Firebase CLI(スタンドアロンバイナリの場合は firebase-tools-instant-win.exe )を実行します。

初回実行時のクラッシュレポートの選択はどちらでも良いです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/6e60e7de-1333-7300-1857-f7521ec85fc2.png" width=70%>

Googleアカウントの認証はブラウザへリダイレクトして認証します。
Success! が出れば、Googleアカウントとの連携はOKです。

```cmd:
+  Success! Logged in as (アカウント)
```

## `firebase init`の実行
`firebase init`コマンドの実行でターゲットフォルダをデプロイする初期化を行います。

**コマンドを実行する前に今のカレントディレクトリを確認します。初期化の中でデプロイ対象のフォルダは、カレントディレクトリからの相対パス指定を行うので、ここの指定を間違えるとうまくいきません**

`cd`コマンドを使って、フォルダに移動します。今回の場合は`wwwroot`の1つ上のディレクトリをカレントディレクトリとします。

```cmd:
> dir
 ドライブ C のボリューム ラベルがありません。
 ボリューム シリアル番号は C2AA-23DB です

 C:\Users\user\source\repos\BlazorAppTestPJ\BlazorAppTestPJ\bin\Release\net6.0\browser-wasm\publish のディレクトリ

2021/12/04  22:13    <DIR>          .
2021/12/04  22:11    <DIR>          ..
2021/10/27  18:00             1,705 web.config
2021/12/04  22:13    <DIR>          wwwroot
               1 個のファイル               1,705 バイト
               3 個のディレクトリ  381,186,682,880 バイトの空き領域

>
```

`firebase init`コマンドを実行して初期化を実行します。

```cmd:
>firebase init

? Are you ready to proceed? (Y/n) y   👈 yを選択

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confir
m your choices.
e
>(*) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys　👈 Spaceキーで選択

? Please select an option: (Use arrow keys)
> Use an existing project　　👈　コレを選択

? Select a default Firebase project for this directory:
> blazorapptestpj (blazorapptestpj)　　👈　Firebaseコンソールで作成したプロジェクトを選択

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? wwwroot　　👈 wwwroot を入力
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y　　👈 yを入力
? Set up automatic builds and deploys with GitHub? (y/N) n   👈 nを入力
? File wwwroot/index.html already exists. Overwrite? (y/N) n　👈 nを入力( ★ここが出ないと失敗している!)

i  Skipping write of wwwroot/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

+  Firebase initialization complete!  👈　これで完了!

```

wwwrootのindex.htmlが見えていると下記の設問が表示されます。**index.htmlが見えていない場合、自動的にindex.htmlが作成され、自動生成されたファイルがアップロードされるので、その場合はCLIツールを実行しているカレントディレクトリの場所を見直します。**
自分は一番ここがはまりました。。:disappointed_relieved:

```cmd:
? File wwwroot/index.html already exists. Overwrite? (y/N) n
```

## ```firebase deploy```の実行
`firebase deploy`を実行すると、ファイルがアップロードされます。

```cmd:
> firebase deploy

=== Deploying to 'blazorapptestpj'...

i  deploying hosting
i  hosting[blazorapptestpj]: beginning deploy...
i  hosting[blazorapptestpj]: found 132 files in wwwroot　👈ファイルの数がこのくらいある事!
+  hosting[blazorapptestpj]: file upload complete
i  hosting[blazorapptestpj]: finalizing version...
+  hosting[blazorapptestpj]: version finalized
i  hosting[blazorapptestpj]: releasing new version...
+  hosting[blazorapptestpj]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/blazorapptestpj/overview
Hosting URL: https://blazorapptestpj.web.app
```
払いだされたURLにアクセスします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/877306a1-f945-9f9d-a4aa-e790bc34c07b.png" width=60%>

見慣れたページが表示されれば成功です:ok_hand:
デプロイをし直してもページが更新されない場合は、ブラウザのキャッシュをクリアすると解決する場合があります:thumbsup:

#おわりに
Blazorを公開する手段として、Firebase Hostingにデプロイする方法をご紹介しました。
Googleアカウントがあれば誰でもデプロイすることが可能ですので、ぜひ試してみてください:zap::zap::zap::rocket::rocket::rocket: