Blazor WebAssemblyをAWS S3にデプロイする

# はじめに

Blazor WebAssembly を AWS S3 にデプロイしてみました。
手順を残しておきます。

# Blazor WebAssemblyの作成

Visual Studio for Macで作りました。

[ファイル]メニューの「新しいソリューション」を選択し、「Blazor WebAssembly アプリ」テンプレートを選択します。 
![スクリーンショット 2020-11-01 10.10.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/ba08e71e-68dd-b5d3-ae20-f8293fba637a.png)
WebAssemblyを作成するので、「ASP.NET Core でホストされた」チェックボックスは外します。
![スクリーンショット 2020-11-01 10.10.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/05938197-9a6c-fc5a-654a-4d750e05d264.png)
プロジェクト名とかはお好みで。
今回は「BlazorWebAssemblyTrial」というプロジェクト名にしました。
![スクリーンショット 2020-11-01 10.13.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/b7b23c6e-267b-07f0-0ded-389eeb2d6b90.png)
できあがり。
![スクリーンショット 2020-11-01 10.14.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/370010a7-8749-582d-f745-47bad4995df4.png)
実行してみます。
![スクリーンショット_2020-11-01_10_32_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/a0d005d2-09b3-1c3b-a920-38a98cf60463.png)
動きました。
![スクリーンショット 2020-11-01 10.16.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/34dcaf04-e93e-c328-a03f-72e44f5c9712.png)

# 発行

AWS S3にデプロイするモジュールを作成するために[「発行」](https://docs.microsoft.com/ja-jp/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-3.1&tabs=visual-studio-mac#publish-the-app)を行います。

作成したプロジェクトを右クリックして[公開] - [フォルダーに公開…]をクリックします。
![スクリーンショット 2020-11-01 10.44.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/fc2db8d9-adaa-f527-aa6c-212946938e87.png)

発行先のフォルダーを選択して発行ボタンをクリックすると発行されます。
今回は発行先をデフォルトのままにしました。
![スクリーンショット 2020-11-01 10.47.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/227ec736-7738-ce4e-fef1-539c7f67fa5b.png)
![スクリーンショット_2020-11-01_10_58_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/9812c7c4-3518-5d25-0ccf-660cae90d381.png)

# AWS S3 でバケットを作成する

WebAssemblyをデプロイするバケットを作成します。
![スクリーンショット 2020-11-01 11.20.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/6256ad11-d467-94b7-1497-177c2a86fa34.png)

バケット名は「blazor-trial」としました。
バケット作成ページの一番下の「バケットの作成」ボタンをクリックするとバケットが作成されます。
![スクリーンショット 2020-11-01 11.26.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/afa68274-009d-bdd0-339c-fd71a4d7b968.png)

# 発行したWeb Assemblyモジュールをバケットに配置する。

ターミナルで発行されたフォルダの「wwwroot」フォルダに移動し、以下のAWS CLIコマンド[^1]を実行してwwwrootにあるファイルを作成したバケットにアップロードします。

```bash
wwwroot $ aws s3 sync . s3://[バケット名]
```

[バケット名]には先ほど作成したバケット名を指定します。
アップロードに成功するとバケットの「オブジェクト」タブが以下のようになります。
![スクリーンショット 2020-11-01 11.47.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/bd2185ef-7c03-a88a-4903-5df1e13718f7.png)

# バケットを静的ウェブサイトとしてホスティングする

AWS S3開発者ガイドの[静的ウェブサイトの設定](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html)を参考に設定していきます。

## バケットの内容を公開可能に設定する

バケットの「アクセス許可」タブを以下のように設定します。
![スクリーンショット 2020-11-01 15.28.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/cdd90eea-8d09-fc4d-0461-221fe6e050b5.png)
![スクリーンショット 2020-11-01 15.29.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/6c2f6912-3003-8885-604c-903e0fc02bc7.png)

## バケットをホスティングする

バケットの「プロパティ」タブの「静的ウェブサイトホスティング」の「編集する」ボタンをクリックし、以下のように設定します。

- 静的ウェブサイトホスティング：「有効にする」にチェックをつける。
- インデックスドキュメント：`index.html`を設定する。
- エラードキュメント：入力しないと保存できないので、適当に入力する、
![スクリーンショット 2020-11-01 15.36.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/c0d145f0-b61e-1342-d8c8-61a145777943.png)

その他はデフォルトのままで「変更の保存」ボタンをクリックします。

## ホスティングしたWebAssemblyにアクセスする。
「バケットウェブサイトエンドポイント」にURLが表示されるのでクリックします。
![スクリーンショット_2020-11-01_15_41_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/9249afea-b22d-ff05-ec2c-57f4c433c08d.png)

「Loading...」と表示されます。
しばらくすると…
![スクリーンショット_2020-11-01_15_46_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/1fb9781f-5e90-de5a-e89b-959fc3c87d27.png)


ページが表示されました。
![スクリーンショット_2020-11-01_15_44_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342629/59ec81a1-5e3a-4c30-362b-712d2c0e8b1d.png)

「Loading...」が長いなぁ。
C#でSPAが作れるBlazor。色々触ってみようと思います。

[^1]: AWS CLIがインストールされている前提で説明しています。<br>環境に合わせてAWS CLIをインストールしてください。