AWS S3でBlazor wasm アプリを公開する方法
Blazor wasm は c#で書けるウェブアセンブリなアプリで、サーバーレスで稼働することができます。
この記事では、Blazor wasm で作成したウェブアプリをAWS S3 で公開する方法を紹介します。
目次
1. S3 バケットを作成する
まずはS3バケットを作成しましょう。
作成のしかたはいつもと同じです。コマンドラインが好きな方はコマンドラインからでもいいですし、ウェブコンソールが好きな方は ウェブコンソールから作成しましょう。
最終的にウェブホスティングを有効にしますので、パブリック・アクセスを許可しておく必要があります。
2. アクセス許可から、バケットポリシーを設定する
バケットの「アクセス許可」からバケットポリシーを選択します。
バケットポリシーを入力して、有効にします。
バケットポリシーは以下のように入力します。
{
Version: 2012-10-17,
Statement: [
{
Sid: PublicReadGetObject,
Effect: Allow,
Principal: *,
Action: s3:GetObject,
Resource: arn:aws:s3:::バケット名/*
}
]
}
3. ウェブホスティングを有効にする
ウェブホスティングを有効にします。
バケットのプロパティから「静的ウェブサイトホスティング」より、有効にします。
このとき、インデックスドキュメントとエラードキュメントの両方に「index.html」を入力することを忘れないようにしましょう。
3. Blazor wasm アプリを Publish する
Blazor wasm アプリを Publish して、デプロイするファイルを生成しましょう。
やり方は至ってかんたんで、プロジェクトディレクトリで以下のコマンドを実行するだけです。
> dotnet publish -c Release
以下のように、ファイルが生成されれば成功です。
haruo@Haruos-MBP dailystack % dotnet publish -c Release
Microsoft (R) Build Engine version 16.8.3+39993bd9d for .NET
Copyright (C) Microsoft Corporation. All rights reserved.
Determining projects to restore...
All projects are up-to-date for restore.
dailystack -> /Users/haruo/Documents/workspace/dailystack/bin/Release/net5.0/dailystack.dll
dailystack (Blazor output) -> /Users/haruo/Documents/workspace/dailystack/bin/Release/net5.0/wwwroot
Optimizing assemblies for size, which may change the behavior of the app. Be sure to test after publishing. See: https://aka.ms/dotnet-illink
Compressing Blazor WebAssembly publish artifacts. This may take a while...
dailystack -> /Users/haruo/Documents/workspace/dailystack/bin/Release/net5.0/publish/
4. S3 バケットにアップロードする
生成されたファイルをS3へアップロードしましょう。
アップロードする方法は何でもOKです。ウェブコンソールからアップロードしても構いませんし、AWS CLI がインストールされていれば、以下のコマンドからでもアップロードできます。
> aws s3 sync ローカルディレクトリ名 s3://バケット名 --delete
--delete
オプションは、ローカルディレクトリ側に存在せず、S3バケット側にのみ存在するファイルを削除する、という意味です。
5. URL にアクセスして動作確認する
S3のウェブホスティングURLにブラウザからアクセスしてみましょう。
この図のように、Blazorアプリが表示されれば成功です。
Blazor のおすすめ本
私もBlazorを用いていくつかウェブアプリを開発しました。フレームワークがとても分かりやすく、簡単にSPAを作れることが楽しいと感じています。
Blazor wasm であればAWS S3のようなウェブホスティングサービスでアプリを公開することもできますし、Blazor Serverアプリであれば簡単に2要素認証を構築できます。
Blazor は現在も開発が進められているフレームワークですので本の情報は少しずつ古くなってしまいますが、全体的・体系的に学ぶには、本はとても有力なツールです。
電子書籍になっていますので、まずは試し読みから始めてはいかがでしょうか。
章 | 内容 |
---|---|
第1章 | Blazorの仕組み |
第2章 | 開発環境 |
第3章 | 最初のBlazorアプリ |
第4章 | コンポーネント |
第5章 | データバインディング |
第6章 | イベント処理 |
第7章 | Razor記法 |
第8章 | フォームと検証 |
第9章 | データベースアクセス |
第10章 | Web APIの活用 |
第11章 | SVGの活用 |
第12章 | JavaScriptとの連携 |