\

AWS S3でBlazor wasm アプリを公開する方法

Blazor wasm は c#で書けるウェブアセンブリなアプリで、サーバーレスで稼働することができます。

この記事では、Blazor wasm で作成したウェブアプリをAWS S3 で公開する方法を紹介します。

1. S3 バケットを作成する

まずはS3バケットを作成しましょう。

作成のしかたはいつもと同じです。コマンドラインが好きな方はコマンドラインからでもいいですし、ウェブコンソールが好きな方は
ウェブコンソールから作成しましょう。

最終的にウェブホスティングを有効にしますので、パブリック・アクセスを許可しておく必要があります。

2. アクセス許可から、バケットポリシーを設定する

バケットの「アクセス許可」からバケットポリシーを選択します。

バケットポリシーを入力して、有効にします。

バケットポリシーは以下のように入力します。

1
2
3
4
5
6
7
8
9
10
11
12
{
"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 して、デプロイするファイルを生成しましょう。

やり方は至ってかんたんで、プロジェクトディレクトリで以下のコマンドを実行するだけです。

1
> dotnet publish -c Release

以下のように、ファイルが生成されれば成功です。

1
2
3
4
5
6
7
8
9
10
11
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 がインストールされていれば、以下のコマンドからでもアップロードできます。

1
> aws s3 sync ローカルディレクトリ名 s3://バケット名 --delete

--deleteオプションは、ローカルディレクトリ側に存在せず、S3バケット側にのみ存在するファイルを削除する、という意味です。

5. URL にアクセスして動作確認する

S3のウェブホスティングURLにブラウザからアクセスしてみましょう。

この図のように、Blazorアプリが表示されれば成功です。

コメントシステムを導入しました!コメント頂けると嬉しすぎて、光の速さで返信します(●´ω`●)

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱