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との連携

コメントを残す

メールアドレスが公開されることはありません。